클라이언트가 회원가입을 할 때 데이터의 전달 과정은 다음과 같다.
클라이언트가 입력한 데이터를 디스패쳐 서블릿에서 입력받아 적절한 컨트롤러를 연결한다.
그 다음 컨트롤러는 받은 데이터를 유효성 검사, 파싱 후 DAO 와 연결한다.
디스패쳐 서블릿은 Spring에서 이미 구현되어 있기 때문에 개발자는 컨트롤러와 DAO 영역을 신경쓰면 된다.
자세한 내용은 이전의 블로그를 참고하면 된다.
간단한 회원가입 페이지와 데이터를 입력받아보자.
1. 회원가입 페이지 HTML
resources/templates/joinForm.mustache
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>회원가입 페이지</h1> <hr> <form action="/join" method="post"> <input type="text" name="username" placeholder="username" required> <input type="password" name="password" placeholder="password" required> <input type="email" name="email" placeholder="email" required> <button type="submit">회원가입</button> </form> </body> </html>
form 태그는 입력받은 데이터를 전달하는 태그이다. form 내부의 버튼은 type="submit” 이 고정 값으로 정해져있다. submit 버튼은 form 의 action을 발동시켜 통신을 요청한다. 만약 form 태그 내부라면 생략 가능하지만 form 태그 외부에서는 적어야 한다.
method="post" 를 통해 HTTP 헤더에 POST 요청이 표시된다.
required 는 프론트 유효성 검사로, 해당 데이터를 반드시 입력해야함을 뜻한다.
2. 데이터 파싱 , 유효성 검사 하기
UserController
@Controller public class UserController { @GetMapping("/joinForm") public String joinForm(){ return "joinForm"; } // 파싱 @PostMapping("/join") public String join(HttpServletRequest req, HttpServletResponse resp){ String username = req.getParameter("username"); String password = req.getParameter("password"); String email = req.getParameter("email"); //유효성 검사 if (username.length() > 10 || username.length() < 4) { return "error-404"; } return "redirect:/main"; } }
컨트롤러의 기능은 데이터 파싱과 유효성 검사 DAO 연결이 있다.
getParameter 메서드
application/x-www-form-urlencoded 형태의 데이터를 파싱한다. (x-form 데이터라고 부르자)x-form 는 키 = 값 의 형태로 만들어져 있으며 username=asdf&password=1234 같은 형식으로 이루어져있다. 이런 형태의 문자열을 getParameter 가 파싱해준다.
유효성 검사는 조건문으로 조건을 정해 원하는 데이터만 입력가능하도록 설정하고, 유효성 검사를 통과하지 못하면 에러 페이지를 띄운다.
resources/templates/error-404.mustache
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>아이디는 3~10자리 이내를 입력해야 합니다.</h1> </body> </html
public String join(String username, String password, String email) {} // 이렇게 매개변수에 키 값을 입력해도 알아서 파싱을 해준다. 이 방법이 더 쉽다.
3. 리다이렉션
return "redirect:/main";
리다이렉션 코드이다.
리다이렉션이란 클라이언트가 웹 서버에 어떤 요청을 했을 때, 그 요청을 다른 곳에서 실행하는 것을 의미한다.
회원가입을 입력하면 메인페이지를 띄우기 위해 입력한다.
return "main";
그런데 이렇게만 입력해도 메인 페이지로 이동한다.
하지만 리다이렉션을 이용하는 이유는 MVC 패턴을 활용하기 위해서다.
MVC 패턴은 따로 블로그에서 다루겠다.
MVC 패턴에 의하면 View 는 Controller 를 통해 보여지도록 한다. 그래서 main 을 바로 리턴하지 않고, 컨트롤러를 통해 리다이렉션 되도록 해야 한다.
BoarderController
@Controller public class BoarderController { @GetMapping("/main") public String main(){ return "main"; } }
resources/templates/main.mustache
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>main page</h1> <hr> </body> </html>
Share article