스프링 스터디 4주차

스프링 스터디 4주차 : 김영한의 스프링 입문강의 15,16,17강

 

15강 : 회원 웹 기능 - 홈 화면 추가

저번에 만든 멤버 컨트롤러, 의존관계 -> 멤버 컨트롤러로 회원 등록/조회하는거 만들어보자

위와 같이 HomeController를 만들고,

 

templates에 home.html을 만든다

 

Spring Boot에서 / 경로로 요청이 들어오면 home.html을 반환하도록 설정한 것!

Spring Boot의 기본 설정에 따라 templates 폴더 안에 home.html 파일을 넣어 두면, 해당 파일이 View Resolver에 의해 렌더링된다. 예를 들어, src/main/resources/templates/home.html 경로에 home.html 파일을 위치시키면, / 경로로 요청이 들어올 때 해당 HTML 파일이 클라이언트에 반환된다.

 

실행하면 이런 화면이 뜬다

 

회원가입 누르면 members/new , 회워목록 누르면 members로 가게됨

*정적 파일보다 컨트롤러가 우선순위가 높다 ! 

 

 

16강 : 회원 웹 기능 - 등록

우선 멤버 컨트롤러에 @GetMapping 추가한 후 , 

 

templates에 members 폴더를 만들어서 위와같은 html파일을 만들어준다

 

이렇게 하면 회원 가입을 눌렀을때 위와 같은 페이지로 접속하게 된다

 

컨트롤러 생성!

여기에서의 name이 createMemberForm의 input에서 받은 name과 매핑될 것이다

 

그 후 멤버컨트롤러에 @PostMapping을 위와 같이 추가해준다

 

이제 이름을 입력해서 가입하면 다시 홈화면으로 돌아가게 된다

 

원리는 다음과 같다

홈화면에서 회원가입을 누르면 , "members/new" 경로로 들어가게 된다

 

그럼 위의 GetMapping에서 createMemberForm으로 이동하게 된다 (템플릿에서 이 html을 찾음- 뷰 리졸버를 통해)

-> 이름 입력창과 등록버튼 있는 html이 화면에 나옴

-> 바로 여기에 action과 method가 설정되어있다

이 창에서 사용자가 이름을 입력하고 등록버튼을 누르면?

members/new의 경로로, post 방식으로 사용자가 입력한 데이터가 넘어간다 (name을 키로 해서)

-> memberController의 @PostMapping으로 넘어가게 된다 : url이 같지만 get / post를 다르게 매핑 !

-> create메소드 호출됨 : MemberForm의 필드인 name에 input창에 넣은 name이 들어가게 된다 (정확히는 스프링이 setName을 통해 값을 넣어줌)

 

 

17강 : 회원 웹 기능 - 조회

 

 

homt.html에서 회원 목록은 /members 경로로 설정해주었으므로, 해당 경로에 대한 GetMapping을 생성

 

여기서 타임리프가 본격적으로 동작한다

 

회원 가입에서 두개를 등록하고 회원 목록으로 가보면 위와 같이 나오는것을 확인할 수 있다

템플릿언어가 이를 렌더링함

템플릿 언어가, members를 읽어들임 (모델안의 값을 꺼냄-getMapping에서 모델 안에 키를 members로 해서 회원 리스트를 담아놨음) -> 루프를 톨며 id,name 매핑 로직 실행 

 

위의 일이 가능한 상세한 원리는 다음과 같다

1. 컨트롤러에서 모델에 데이터 전달: Spring 컨트롤러 메서드에서 Model 객체에 데이터를 추가해 뷰로 전달 - 여기서 model.addAttribute("members", members); 구문이 List<Member> 객체를 members라는 이름으로 뷰에 전달함

2. 뷰에서 모델의 데이터를 참조: Thymeleaf 템플릿에서 ${members}로 model.addAttribute("members", members);에서 전달한 데이터를 참조할 수 있습니다. memberList.html에서는 이 members 객체의 각 Member 객체를 th:each로 반복하며, member.id와 member.name 값을 th:text를 통해 가져와 화면에 출력

->  Spring이 뷰에 모델 데이터를 전달 해주기에 가능함 : 컨트롤러가 반환한 뷰 이름(members/memberList)에 해당하는 템플릿이 Thymeleaf에서 memberList.html로 매핑됨. Spring MVC는 모델에 담긴 데이터들을 뷰에 전달해주기 때문에, 이 템플릿은 Model에 추가된 데이터를 자유롭게 사용할 수 있음

-> Thymeleaf 템플릿에서 데이터 참조: memberList.html 템플릿에서 ${members} 표현식을 사용하면 Model 객체에서 members라는 이름으로 추가된 데이터를 참조 가능

즉, 컨트롤러가 Model에 데이터를 담아 보내면, Thymeleaf 템플릿은 ${} 구문으로 해당 데이터를 손쉽게 참조할 수 있다. Spring MVC가 Model 데이터를 뷰로 넘겨주기 때문에 별도의 추가 설정 없이 데이터를 활용할 수 있게 되는 것!