5-2. 회원 웹 기능 - 등록

홈 화면에 하이퍼링크만 만들어놨던

이 '회원 가입', '회원 목록' 두 페이지 중에서

'회원 가입' 즉 /members/new 페이지를 만들어볼 것이다.

 

이 페이지는 회원 등록을 하는, 즉 사용자가 데이터를 서버에 제출하는 페이지이기 때문에

@GetMapping 만 쓰는 것이 아니라 @PostMapping도 써야 하고 form도 써야 한다.

 

 

 

 

@GetMapping 메소드 만들기

 

MemberController를 열어서 다음과 같은 메소드를 추가한다.

@GetMapping("/members/new") -> /members/new 의 경로로 GET 요청이 들어왔을 때 실행된다.

return "members/createMemberForm"; -> templates 디렉토리 하위의 members 디렉토리 안에 있는 createMemberForm.html의 내용을 화면에 띄운다.

 

 

 

 

createMemberForm.html 만들기

 

이제 이놈에 의해 열릴 createMemberForm.html을 만든다.

디렉토리 만들어주고

 

 

파일 만들어주고

 

 

내용 복붙

 

내용을 살펴보면

폼이 하나 있는데

그 폼에는 이름을 입력하는 인풋 칸과 데이터를 전송하는 등록 버튼이 있다.

폼에서 데이터를 전송하면  /members/new 경로로 POST 요청을 보낸다.

 

그리고 여기를 보면

input 태그의 속성 중 name이라는 속성의 값이 "name"으로 되어있다.

이 name 속성 덕분에

우리는 "name"이라는 문자열을 통하여 이 input에 들어온 값을 참조할 수 있게 된다.

 

 

 

프로세스를 죽인 다음 다시 실행하고 접속해서 버튼을 눌러보면

잘 뜬다.

 

 

@PostMapping 메소드를 아직 작성하지 않았기 때문에 등록을 누르면 오류 페이지가 뜬다.

 

 

 

 

MemberForm 만들기

값을 받아서 회원가입하는 @PostMapping 메소드를 만들기 전에!

사용자가 넘긴 이름 값을 넣고 뺄 그릇을 먼저 만들어주자.

 

MemberForm이라는 클래스를 새로 만든다.

왜인지 모르지만 강사님께서는 controller 패키지에다 만드셨다.

모델의 역할인 것 같은데... 아무튼 따라해본다.

 

 

이렇게 필드, getter, setter만 만들어주면 된다.

 

 

아까 input에서 name="name"이 있었다는 것 단 하나만으로

스프링이 알아서 딱 여기 있는 setName을 호출하여 name 값을 MemberForm 객체에 저장해준다고 한다.

굉장히 신기하다.

(+) name이 private으로 되어있으니 name 값이 바뀌는 방법은 setName 메소드 호출 뿐이다.

 

 

 

 

 

 

@PostMapping 메소드 만들기

이렇게 만들어준다.

 

 

 

 

 

 

 

작동과정

1. 사용자가 "기본URL/members/new"의 주소로 들어온다.

 

2. GET 요청이 들어온 것이므로 이놈이 반응한다.

그럼 스프링이 members 하위의 createMemberForm으로 찾아들어간다.

 

 

 

3. createMemberForm이 화면에 띄워진다.

 

 

4. 사용자가 이름을 입력하고 엔터를 치든 등록을 누르든 해서 데이터를 준다.

 

그럼 여기 있는 name 속성에 의해

 

 

여기 있는 name이라는 필드와 자동으로 매칭이 되어,

 

MemberForm 객체에 이름 값이 저장된다.

 

 

 

5. 등록을 누르는 순간 여기 적힌 대로 /members/new 의 경로로 POST 요청이 가기 때문에

 

 

즉시 이놈이 반응을 한다.

새 Member 객체를 하나 만든 다음,

아까 MemberForm에 저장되었던 name 값을 꺼내와서 Member 객체의 이름 값으로 넣어준다.

 

그 다음 memberService를 이용해 회원가입시킨다.

 

마지막으로 메인 화면으로 redirect한다.

 

 

 

요약:

GET 요청을 받아 이 화면이 뜨고

 

 

 

이렇게 이름 값을 적고 등록을 누르면

 

 

name 값 저장 및 전달 그리고 회원가입이 슈슈슉 이루어진 뒤

메인화면이 뜬다.