
@RestController // 리턴시 그 문자를 그대로 응답 @Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것
1. UserController 구현
package controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; //@RestController // 리턴시 그 문자를 그대로 응답 @Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것 public class UserController { // 메모리에 띄워야 함 @GetMapping("/joinForm") public String joinForm(){ return "joinForm"; } }

- mustache는 저장소가 정해져 있음


- 폴더 이름, 확장자 생략 가능->View Resolver 클래스가 붙여줌
- 포워드(내부적 요청)와 동일
서버가 클라이언트에게 응답을 전달하는 개념
- mustache : 템플릿 엔진
데이터와 템플릿을 결합하여 동적으로 문서를 생성하는 데 사용
mustache 플러그 인 설치
설치 후 바로 실행이 안될 수 있으니 실행시켜야 함!

html > mustache로 변경


- form태그 : input태그를 한번에 날리기 위해 사용

- name이 없으면 키 값이 안 날라감
- 폼태그에서 데이터를 요청하면 바디로 날아감
그 바디 데이터는 마임 타임 : xform
바디 데이터는 마임 타임 : x-www-form-urlencoded
- get요청은 쿼리 스트링해서 날라감
- input타입의 종류가 많음
- submit은 버튼이랑 달리 액션을 발동시키는 것: 해당 주소로 통신 요청을 하는것
form태그 안에 있으면 디폴트 값이 submit!
밖에 있으면 디폴트 값이 버튼! 다름!
2. joinForm page 구현
<!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"> <input type="password" name="password" placeholder="password"> <input type="email" name="email" placeholder="email"> <button>회원가입</button> </form> </body> </html>


3. 값을 받는 4가지 방법
- join메서드를 때리는 애? 디스패처 서블릿
톰캣이 디스패처 서블릿을 호출
톰캣이 만들어서 객체(HttpServletRequest, HttpServletResponse) 전달해줌
1) 적기만 하면 됨
@PostMapping("/join") public String join(HttpServletRequest request) { String username = request.getParameter("username"); String password = request.getParameter("password"); String email = request.getParameter("email");
2) 파라미터에 바로 입력
바디 데이터가 날아오니까 가능한 것 아니면 터짐!
@PostMapping("/join") public String join(@Valid @ModelAttribute UserForm userF, BindingResult bindingResult) { }
3) @Valid
유효성 검사를 엄청 편하게 만들어줌
@ModelAttribute // 커맨드 객체를 모델에 추가 @Valid // 유효성 검사를 활성화 BindingResult // 파라미터를 통해 유효성 검사 결과를 확인
@PostMapping("/submitForm") public String submitForm(@Valid @ModelAttribute MyForm myForm, BindingResult bindingResult) { if (bindingResult.hasErrors()) { // 유효성 검사 에러가 있을 때 처리 return "errorPage"; } return ""; }
1), 2)번 방법으로 값 받아오기
package controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; //@RestController // 리턴시 그 문자를 그대로 응답 @Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것 public class UserController { // 메모리에 띄워야 함 @GetMapping("/joinForm") public String joinForm() { return "joinForm"; // 폴더이름도 확장자 생략 가능->뷰 리절브 클래스가 붙여줌 - 포워드(내부적 요청)와 동일 } @PostMapping("/join") public String join(String username, String password, String email) { // String username = request.getParameter("username"); // String password = request.getParameter("password"); // String email = request.getParameter("email"); System.out.println("username : " + username); System.out.println("password : " + password); System.out.println("email : " + email); return ""; } }

if (username.length() > 10) {} // 파일 리턴이라 응답이 두 번 되어서 끈김(반이중이니까) if (username.length() > 10) { return;} //끊어버리면 디스패처가 발동 안함
4. error page 만들기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>error</title> </head> <body> <h1>에러 : 잘못된 요청을 하셨어요</h1> </body> </html>

정상적으로 해도 에러가 뜸 > 버그가 있음
이름 error라고 하지말것!


5. main 페이지 만들기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>main page</h1> <hr> </body> </html>
6. 유효성 검사 후 DB에 연결해서 삽입하기
- 검사 전에 연결하면 제약 조건 위배로 오류가 터질 수 있음
- 이때 DB에서 오류가 나도 컨트롤러가 자기 역할을 안해서 오류 → 컨트롤러의 잘못임!
레이어의 책임을 분명하게 해야함!
7. 프론트에서 유효성 검사하기
유효성 검사는 프론트와 백엔트 모두 해야함!
백엔드는 유효성 검사 필수!!
프론트가 안하면 ux가 안 좋아질 뿐, 백엔드가 안하면 망함
정상적인 접근으로는 불가능하지만 보낼 수 있는 방법이 있음
ex) postman 툴로 제약 조건 무시하고 마음대로 post 요청 가능



8. main page 만들기
package controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class BoardController { //main을 바로 호출하는 컨트롤러 @GetMapping("/main") public String main() { return "main"; } }

9. redirection 사용하기
return "redirect:/main"; // 이미있으니 리다이렉션해야함
redirection : 컨트롤러가 있으면 뷰를 리턴하는게 아니라 만들어놓은 컨트롤러를 리턴!
재사용!
package controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; //@RestController // 리턴시 그 문자를 그대로 응답 @Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것 public class UserController { // 메모리에 띄워야 함 @GetMapping("/joinForm") public String joinForm() { return "joinForm"; // 폴더이름도 확장자 생략 가능->뷰 리절브 클래스가 붙여줌 - 포워드(내부적 요청)와 동일 } @PostMapping("/join") public String join(String username, String password, String email) { // String username = request.getParameter("username"); // String password = request.getParameter("password"); // String email = request.getParameter("email"); System.out.println("username : " + username); System.out.println("password : " + password); System.out.println("email : " + email); if (username.length() > 10) { return "error-404"; } return "redirect:/main"; // 이미있으니 리다이렉션해야함 } }
Share article