현재, 회원 웹 기능을 구현하는 과정 중에 있다. 지난 시간에는 회원 웹 기능을 탑재한 홈페이지라고 할 수 있는 홈 화면을 만들어보았다.
회원 웹 기능 - 등록
첫번째, 회원의 기능으로 "회원을 등록하는 기능" 을 구현해보도록 하겠다. 먼저, 전에 만들었던 MemberController class를 다시 열어서 다음과 같은 코드를 추가한다.
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}그 후, templates 하위에 members 폴더를 만들고 createMemberForm.html 이라는 html 형식의 파일을 생성한다.
createMemberForm.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<form action="/members/new" method="post">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요">
</div>
<button type="submit">등록</button>
</form>
</div>
</body>
</html>이 html 문서를 통해 hello Spring 홈페이지에서 회원가입을 누르게 되면, 다음과 같이 이름을 입력할 수 있는 칸이 생성되고, 등록 버튼이 생성된다.
지금까지 이른바, 회원 등록의 붕어빵 틀이 완성된 셈이다. 이제 회원을 등록할때의 컨트롤러. 즉, 붕어빵을 생성해보자. 먼저 controller package를 만들고 MemberForm class를 생성한다.
MemberForm controller는 다음과 같이 구성한다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}이렇게 하면 private으로 선언한 String name 과 위에서 만든 createMemberForm.html 에서의 name 과 매칭되면서 값이 들어오게 된다.
이제 해야할 일은 memberController 에 우리가 만든 MemberForm을 연결시켜주어야 한다. 따라서 memberController class에 다음 내용을 추가한다.
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member(); // member 객체 생성
member.setName(form.getName()); // form에서 getName으로 받음
memberService.join(member); // member를 join으로 넘김
return "redirect:/"; // 회원가입이 끝나면 홈 화면으로
}이제, hello Spring을 실행시키고 localhost를 통해 메인 웹 페이지로 들어가서 회원가입 버튼을 누른다.
이제 이름을 입력하는 칸에 spring이라고 입력하면,
위와 같이 hello Spring 홈 화면으로 돌아가고 그 외엔 아무 변화가 없는 것처럼 보인다. 아직 우리가 회원 목록에 관한 서비스를 구현하지 않았기 때문에 그렇지만 실제로는 DB에 {name(key): spring(value)} 형태로 서버로 넘어가서 spring이라는 이름을 가진 회원이 등록되었을 것이다.
작동 원리를 강사님께서 설명해주셨는데, 먼저 회원가입 버튼을 누르게 되면 지정된 URL인 /members/new address 로 들어가게 된다. 그렇다면 이쯤에서, 지금까지 우리가 만든 memberController 의 내용을 다시 한번 살펴보자.
@Controller
public class MemberController {
private MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new") // /members/new를 받고 있음
public String createForm() {
return "members/createMemberForm";
}
@PostMapping("/members/new") // /members/new를 받고 있음
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}"/members/new" 방식은 @GetMapping 과 @PostMapping이 각각 인자로 받고 있음을 확인할 수 있다. 각 방식의 특징을 알아보자.
Get
get 방식은 먼저, http 형식의 URL로 입력 인자를 받는 것이 특징이다. 그렇기 때문에 조회할 때 사용한다. 위 코드에서는 그냥 return값인 /members/createMemberForm 으로 이동하게 된다. 따라서 templates 하위의 createMemberForm.html 으로 다시 이동하면, html 파일이 그냥 웹 페이지에서 실행 된다.
다시 말해, 이 파일이 viewResolver를 통해서 나타내어지는 내용들이 우리가 localhost로 들어가서 회원 등록 버튼을 눌렀을 때 보여지는 화면인 셈이다.
createMemberForm.html 소스코드를 살펴보면
form 은 값을 입력할 수 있게 해주는 태그이고, action = "/members/new" 라고 되어 있다. 그리고 method는 post인데, 아까 우리가 예시로 "spring"이라는 회원을 등록할 때, 등록 버튼을 누르게 되면 action URL("/members/new")의 내용이 post 방식으로 넘어오게 된다는 것을 의미한다.
자 그렇다면, post 방식은 무엇인가?
Post
postMapping은 주로 데이터를 form 형태로 받아서 전달(등록)할 때 사용한다. 위의 memberController 에선 method가 post로 설정되어있는 것으로 보아 post 방식이 채택되었는데, 이는 회원가입시 받은 폼이 있기 때문에 post 방식을 선택한 것 같다.
public String create(MemberForm form) 메소드로 MemberForm을 참조하게 되고, MemberForm의 public void setName(String name) 메소드를 통해 아까 입력한 name 의 내용이 들어오게 된다.
Get과 Post 방식은 web에 관해서 공부할 때, 몇 번 들어보았지만 제대로 공부해본적은 없었다. 따라서 내용정리가 필요했었는데 songyouhyun님의 velog에 쉽게 설명되어있어서 이를 참고하며 공부하였다. (감사합니다!) https://velog.io/@songyouhyun/Get%EA%B3%BC-Post%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%A5%BC-%EC%95%84%EC%8B%9C%EB%82%98%EC%9A%94
마치며...
이로써 회원 등록에 관한 내용까지 구현했다. 강의를 들을 때마다 서버를 어떻게 구축해야하는지, 그리고 웹으로 보여지는 내용은 어떻게 구성해야 하는지에 대해 조금 감이 오는것 같았다. 비록 간단한 예제이지만 제대로 배우고 공부해서 내 것으로 만들기 위해 노력해야겠다.
