<< 학습 목표 >>
1. 클라이언트에게 "결괏값"을 전달해야하는 상황과 "결괏값을 담고 있는 페이지"를 전달해야하는 상황을 구분할 수 있다.
2. 클라이언트에게 "결괏값"을 전달할 수 있다.
3. 클라이언트는 서버에게 "결괏값"을 전달 받은 후 사용자에게 결과를 보여줄 수 있다.
지금까지 지나온 과정을 보면
Chapter01. 웹 프로그래밍 기초
Chapter02. 서블릿 기초
Chapter03. 클라이언트가 서블릿을 호출하는 방법 & 요청 방식에 따라 구현할 서블릿 메서드
앞서서는 클라이언트 코드 설명도 많이 했음
여기(Chapter04)부터 마지막(Chapter07)까지는 이제 모두 서블릿, 서버와 관련된 설명들임
클라이언트 코드 관련된 설명은 필요할 때만 하고 그외에는 코드만 첨부하겠음
Chapter03에서도 중간 중간 언급했지만 클라이언트인 HTML, CSS, JS 는 이 블로그에서 다루지 않으니 클라이언트 관련된 지식은 해당 책을 보거나 해당 블로그를 찾아보고 오시면 됩니다.
Chapter04의 처음으로 서버가 클라이언트에게 응답하는 기본적인 방법을 알아보자
https://codingaja.tistory.com/21 글에서도 간략하게 언급했지만
서버가 클라이언트에게 처리 결과 전달할때는
1. "결괏값"만 전달
2. "결괏값을 담고 있는 페이지"를 전달
하는 두 가지 방법이 있음
"결괏값"만 전달 하는 상황은 클라이언트가 XMLHttpRequest, Ajax로 요청했을 때임
그외에 나머지 요청들은 "결괏값을 담고 있는 페이지"를 전달해야함
왜일까?
XMLHttpRequest, Ajax는 현재 페이지에 그대로 머문 상태로 요청만 들어가므로 결과를 보여 줄 페이지가 현재 페이지임
그러나 나머지 요청(a 태그, form 태그, location.href 등등)은 해당 URL 로 페이지가 전환되므로 결괏값만 전달하게 되면 웹 브라우저는 딸랑 결괏값만 보여줌
사용자에게는 결과 화면(결과 페이지) 가 보여야하므로 서버는 "결괏값을 담고 있는 페이지"를 전달해야함
반드시 그런건 아니지만 이렇게 기억하고 있으면 대체로 맞고 이렇게 기억하고 개발하다 보면 정확한 기준을 스스로 습득할 수 있을 것
혹시 위 말들에 ? 가 생긴다면 HTML, JS, Servlet Chapter02 를 처음부터 다시 복습해야함
지금까지 서버가 전달(Response, 응답) 이라고 표현했는데 앞으로는 별도의 첨언 없이 전달, 응답 같은 의미로 사용하겠음
먼저! 1번의 상황을 알아보자
클라이언트는 Jquery의 Ajax를 사용해서 요청하고 서버는 요청을 처리한 결괏값만 보낼 것임
webapps 안에 chapter04 폴더를 만들고 그 안에 ajaxRequest.html 을 만들고 아래 코드를 넣자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax로 요청하는 페이지</title>
</head>
<body>
<form action="/studyProject/chapter04/login1" method="POST">
<h1>로그인 페이지</h1>
<fieldset>
아이디: <input type="text" name="id">
</fieldset>
<fieldset>
비밀번호: <input type="password" name="pw">
</fieldset>
<fieldset>
<button type="button" onclick="login()">로그인</button>
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script type="text/javascript">
function login() {
let $form = $("form");
let $id = $("input[type=text]");
let $pw = $("input[type=password]");
let id = $id.val();
let pw = $pw.val();
$.ajax({
url: $form.attr("action"),
type: $form.attr("method"),
data: "id="+id+"&pw="+pw,
success: function(responseData) {
console.log(responseData);
if(responseData == "yes") {
alert("로그인에 성공했습니다!");
} else if(responseData == "no") {
alert("로그인에 실패했습니다ㅠㅠ");
} else {
alert("아이디 또는 비밀번호가 비어있습니다.");
}
}
});
}
</script>
</body>
</html>HTML 코드 안에 ajax 요청 부분 안에 success: function(responseData) 를 보자
서버가 응답을 하면 success: function(responseData) 안에 있는 console.log ~ 부터 동작을 함
function의 매개변수로 있는 responseData는 서버가 전달한 결괏값을 받을 매개변수임
서버가 전달한 결괏값을 responseData 에 저장하고 그 안에 있는 소스 코드가 동작함
서버가 전달한 결괏값을 출력해보고(1) 서버가 전달한 결괏값에 맞는 처리 결과를 alert 함수로 보여주고 있음(2)
이제 클라이언트의 요청을 받고 처리한 후 결과를 전달할 서블릿을 추가하자
서블릿을 추가하기 전에! 서블릿에서 유효성 검증(Validation)에 필요한 메서드 먼저 만들자
utility 패키지를 만들고 그 안에 ParameterUtil 클래스를 추가한 뒤 아래 코드를 입력하자
package utility;
import javax.servlet.http.HttpServletRequest;
public class ParameterUtil {
/**
* name 파라미터 값을 꺼내는 메서드
* 파라미터가 없거나 파라미터 값을 trim() 한 후 비어있다면 null을 반환
*
* @param request 파라미터를 담고 있는 객체
* @param name 값을 꺼낼 파라미터의 이름
* @return String 또는 null
*/
public static String getString(HttpServletRequest request, String name) {
String str = null;
str = request.getParameter(name);
if(str != null) {
str = str.trim();
if(str.length() == 0) {
str = null;
}
}
return str;
}
}이 메서드가 직접 유효성 검증을 하지는 않음
이 메서드는 요청 정보(HttpServletRequest) 에 들어있는 파라미터 값을 꺼내줌
이제 서블릿을 추가하자
chapter04 패키지를 만들고 그 안에 ValueResponse 서블릿에 아래 코드를 입력하자
package chapter04;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import utility.ParameterUtil;
@WebServlet("/chapter04/login1")
public class ValueResponse extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter output = response.getWriter();
String id = ParameterUtil.getString(request, "id");
String pw = ParameterUtil.getString(request, "pw");
if(id == null || pw == null) {
output.print("empty");
} else {
String tempId = "myId";
String tempPW = "myPw";
if(id.equals(tempId) && pw.equals(tempPw)) {
output.print("yes");
} else {
output.print("no");
}
}
}
}
클라이언트에게 결괏값을 전달하기 위해서는 응답 정보(HttpServletResponse)에 들어있는 PrintWriter 객체를 꺼내야함(1)
아이디 또는 비밀번호를 전달하지 않았다면 클라이언트에게 "empty" 문자열을 전달함
아이디와 비밀번호 모두 전달했다면(2) 전달한 아이디가 tempId와 같고 전달한 비밀번호가 tempPw와 같다면 "yes" 문자열을 전달(3), 아이디 또는 비밀번호가 일치하지 않는다면 "no" 문자열을 전달함
여기서 tempId, tempPw는 로그인 성공/실패를 판단하기 위한 아이디/비밀번호임
이 챕터의 마지막에서는 서블릿과 DB를 연동하고 실제로 회원가입, 로그인을 할 수 있는 프로젝트를 할 것
그때 되면 tempId, tempPw 대신 DB를 활용하게 됨
이제 뷰와 서블릿(컨트롤러의 역할과 서비스의 역할을 동시에함)을 완성했으니 서버를 실행시키자
로그인 페이지에 아이디와 비밀번호를 tempId, tempPw와 동일하게 입력한 후 [ 로그인 ] 버튼을 눌러보자
그럼 화면에 "로그인에 성공했습니다!" 가 출력됨
클라이언트의 요청부터 서버의 응답까지 전체 과정을 세세하게 살펴보자
1.로그인 페이지에서 아이디, 비밀번호 입력 후 [ 로그인 ] 버튼을 클릭(1)하면 JS의 login 함수가 호출됨(2)
2. 그 후 사용자가 입력한 아이디, 비밀번호를 JS로 불러옴(3)
3. 그 후 ajax가 동작해 서버로 요청이 들어감(4)
4. 서버에서는 응답하기 위해 PrintWriter 객체를 꺼냄(1)
5. 클라이언트가 보낸 id, pw 파라미터 값을 꺼냄(2)
이때 getString 메서드 내부 코드를 분석해서 해석을 덧붙이자면 클라이언트가 id, pw 파라미터 자체를 보내지 않았거나 id, pw 파라미터를 보내긴 했지만 빈 문자열 또는 공백(스페이스 바)만 들어가 문자열을 보냈다면 null 이 반환됨
우리처럼 일반적으로 웹 페이지에서 [ 로그인 ] 을 했다면 id, pw 파라미터를 무조건 보내지만 이 챕터의 마지막에 배울 방법을 사용하면 id, pw 파라미터를 보내지 않고 [ 로그인 ] 을 하는 방법도 있음
6. 클라이언트가 id, pw 파라미터를 비정상적인 값으로 보냈다면 "empty" 문자열을 클라이언트에게 응답함(3)
7. 클라이언트가 id, pw 파라미터를 정상적인 값으로 보냈다면(4)
8. id와 tempId가 일치하고 pw와 tempPw가 일치한다면 "yes" 문자열을 클라이언트에게 응답함(5)
9. id와 tempId가 일치하지 않거나 pw와 tempPw가 일치하지 않는다면 "no" 문자열을 클라이언트에게 응답함(6)
서버가 응답했으니 다시 클라이언트의 ajax 로 돌아와야함
왜? ajax로 요청했으니까 / 서버의 응답에 따라 사용자에게 어떤 결과를 보여줘야할지도 ajax가 결정하는 것(1)
10. 서버가 보낸 데이터("empty", "yes", "no" 중에 하나)를 responseData 매개변수에 저장(2)
11. 서버가 보낸 데이터를 출력(3)
12. 서버가 보낸 데이터에 따른 결과를 사용자에게 보여줌(4)
여기까지 서버가 클라이언트에게 결괏값을 전달해야하는 상황과 결괏값을 전달하는 방법을 알아봤음
'Servlet + JSP > Serlvet-Chapter04' 카테고리의 다른 글
| Chapter04. 포워딩(Forwarding) / 클라이언트 몰래 요청 넘기기 (2) | 2023.03.03 |
|---|---|
| Chapter04. 포워딩(Forwarding) / 클라이언트에게 "여기로 가!" 지시하기 (0) | 2023.03.02 |
| Chapter04. 클라이언트에게 JSON 데이터 전달하기 (0) | 2023.03.02 |
| Chapter04. 클라이언트에게 상태 코드 담아 전달하기 (0) | 2023.03.02 |
| Chapter04. 클라이언트에게 페이지 전달하기 (0) | 2023.03.01 |