[스프링 부트] 화면 웹 기능 - 스프링 입문 강의 / 인프런

4. 회원 관리 예제 - 웹 MVC 개발

---

[목표] ➤ 회원 관리를 위한 맴버 컨트롤러, 의존관계를 만들었으니
이것을 이용해서 회원을 등록하고, 조회 가능한 매개인 웹 MVC를 만들어보자!

1) 회원 웹 기능 - 홈 화면 추가

회원을 등록하고 조회할 수 있는 버튼이 있는 홈 화면을 만들어보자.

---

1.  controller 폴더 > HomeController 추가 (home 화면 담당할 controller)

• @Controller는 저번 시간에 배웠던 것을 복기해보자.
  • XXXController는 @Controller annotation을 추가해줌으로써, 스프링 빈으로 자동 등록되어 외부 요청을 받는 역할을 수행한다.
• "/" : 단순 슬래쉬가 의미하는 것은 localhost8080으로 접속하자마자 뜨는 화면, 즉 https://localhost8080 을 의미
  • @GetMapping은 웹브라우저에서 바로 입력한 값을 캐치해 옴을 의미하는데, 사용자가 url로 입력한 값이며 html이름과 분리해서 생각해자.
  •  https://localhost8080를 url로 입력 했을 때 띄울 html 파일을 return을 통해 연결해준다. (home.html을 띄울 것.)

 

2. 홈 화면에 띄울 home.html을 만든다.

• 코드를 보면 알 수 있겠지만, 회원 가입은 member/new로, 회원 목록은 member로 연결된다. 하지만 아직 그 부분은 매핑해주지 않았기에, 당연히 접속 시도하면 오류가 발생한다.

 

url은 /member/new로 입력 됐지만, 관련해 처리한 것이 없으므로 에러 페이지 오류가 발생한다.

✔ 아니 저번에 만들었던 index.html은 어디감?;; 접속하면 원래 그것부터 나왔었는데?

➤ 정적 컨텐츠에서 배웠듯이, 톰켓 서버를 통해 웰컴페이지(=="/") 요청이 들어오면
  " (1) 스프링 컨테이너 에서 먼저 웰컴페이지 관련 컨트롤러가 있는지 살펴보고
    → (2) 없는 경우 resource/static 에서 웰컴페이지 파일로 등록된 html 파일을 찾아서 던진다."
 이렇게 처리한다고 했었다. 따라서 지금은 관련 컨트롤러가 있는 (1)번 경우이므로, home.html이 출력된다.
 (기존에 등록했던 index.html는 당연히 무시된다. 거기까지 가지도 못함)

---

2) 회원 웹 기능 - 회원 등록 페이지 만들기

홈 화면에서 [회원 등록] 링크를 통해 연결되는 회원 등록 화면을 만들어보자.

---

3. "/members/new" 에 대응하는 @GetMapping Annotation을 추가한다. 

• 해당 url(/members/new)에 대응하는 html 파일(createMemberForm)을 연결해준다.
• 이때 대응되는 html 파일은 templates/members/ 하위에 존재하는 파일이다. 
• MemberController 에 추가해야 됨!!!

 

4. templates 하위에, 회원 관련 작업을 처리할 폴더를 별도로 (members) 생성하고, createMemberForm.html 파일을 생성해준다.

등록 폼이 무사히 뜬다!

• 회원 등록 페이지가 생성됐다. form을 통해 입력된 이름 정보를 받아온다.
  • 이때 받아온 데이터의 이름은 name으로 처리한다.
• 이름 입력 후 등록버튼 클릭 시, "/members/new" (action이하 url) 로 post 방식으로 (method) 넘어감

 

5. createMemberForm.html에서 받은 데이터를 처리해 회원으로 메모리에 저장하는 컨트롤러 생성 (in MemberController)

• join - memberService Class에서 정의된 메서드로, 중복 회원인지 검사하고 회원 정보를 Member 객체에 담아 memberRepository의 메서드인 save를 통해 DB에 저장한 뒤, 저장한 id(임의로 부여한 숫자) 를 반환하는 함수이다.  
• GetMapping VS. PostMapping 
  • GetMapping : url을 통해 직접 입력된 값을 처리함
    • 조회할 때 주로 사용
  • PostMapping : form을 통해 post 방식으로 넘어간 데이터를 캐치해 처리함
    • 데이터를 form에 넣어 전달할때 주로 사용함

따라서, url은 둘다 /members/new로 동일한데, form 태그를 통해 넘어간 정보는 @PostMapping에서 처리한다. 

(MemberForm 객체의 name에 입력 값 저장해 던짐.

이때 html에서 post로 넘어가는 입력값 명을 "name"을 스프링이 인지해 처리해준다. )

 

이름이 spring인 회원 등록 후, 메인 회면으로 잘 redirect 됨을 확인 가능하다. 

(저장소에 잘 저장됐는지는 목록 만든 후 확인...ㅎㅎ;;) 

---

3) 화면 웹 기능 - 회원 조회 페이지 만들기

홈 화면에서 [회원 목록] 링크를 통해 연결되는 전체 회원 목록 조회 화면을 만들어보자.

"/members"

---

6. "/members" 에 대응하는 @GetMapping Annotation 추가

• model.addAttribute(String name, Object value)
  • Model에 데이터를 담을 때 사용하는 메소드 : addAttribute()
  • value에 해당하는 객체를 name에 해당하는 이름으로 추가한다. 추후 name으로 지정한 이름으로 불러 value를 사용 가능하다. 즉, name이 key 역할을 하는 것.
  • (혹은 별도의 String name 정의없이, 단순 value만 추가해 클래스의 이름 자체를 모델 이름으로 사용할 수도 있다.
• 따라서, 여기서는 findMembers 메소드를 통해 불러온 맴버들을 리스트 형으로 저장한 "members" 객체(value)를 → model에 "members"(name)라는 이름으로 추가하는 것이다. 
• 이렇게 model에 담아서 화면(뷰 템플릿)에 넘기기 쉽게 한다.

 

7. templates /members 하위에 회원 조회 탬플릿 memberList.html을 생성

가입 회원이 0명이기에 특별하게 표시되는 것이 없다.

• 회원이 잘 출력되는지 확인하기 위해 임의의 회원 데이터를 "회원 등록"을 통해 등록해준다 (spring1, spring2)

(좌) 입력한대로 잘 출력 됨을 확인 가능하다! (우) 해당 페이지 소스

•  템플릿에서 members를 읽어 들인다.
• thymeleaf 문법)) 
  •  ${모델명} : 모델 안의 값을 꺼내옴을 의미함 (이 전에 members라는 key로 회원 List를 담아와 추가했었다.
  • th: each → 리스트로 저장됐으므로 안에 담긴 정보를 다 꺼낼 때까지 루프를 돌림
  • 즉, 위처럼 출력되기 위해선
    • List인 members에서 저장된 첫 번째 객체를 꺼내와 member에 담는다.
    • 1st td →  첫 번째 맴버의 id (member.id)
    • 2nd td → 첫 번째 맴버의 이름 (member.name)
    • 이후 다시 members에서 두 번째 맴버를 꺼내오고... 이것을 반복한 것. (==> 자바의 for each 문법과 유사)

이때 저장한 회원 정보들 (spring1, spring2)는 메모리에 저장한 것이므로 서버를 재시작 하면 사라진다!!!
→ 따라서 실무에선 이런 데이터들은 파일이나 DB에 저장해줘야 한다.