이 글은 인프런 김영한님의 Spring 강의를 바탕으로 개인적인 정리를 위해 작성한 글입니다.
홈 화면 추가
HomeController를 통해 html 연결하기
controller 패키지에서 HomeController 클래스를 하나 생성한다.
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}
@Controller 어노테이션을 붙여준다. 그리고 @GetMapping을 통해 "/"를 연결시킨다. /은 도메인의 첫번째 주소를 말한다. 즉, localhost:8080/ 에 접속했을 때 이 메서드가 호출이 되는 것이다. 이후 return 값으로 home을 반환한다. 따라서 이 메서드가 home을 반환하면, templates 패키지에서 home.html을 찾아간다.
이렇게 해서 localhost:8080/ 에 접속했을 때 home.html로 연결되게끔 설정을 완료했다.
회원 가입" 버튼을 눌렀을 때, 회원 가입 폼(Form)이 나오고 아이디를 적으면 회원 가입이 되는 것이 목표이다.
MemberController를 통해 html 연결하기
home.html에서 "회원 가입" 버튼을 누르면 /members/new로 연결이 되도록 했다. MemberController에서 GetMapping을 통해 해당 url을 연결하는 메서드 createForm을 작성해야한다.
이 메서드에서는 별 다른 기능은 하지 않고, 바로 createMemberForm.html로 연결만 한다. 여기서 하나 눈 여겨볼 것은 반환값으로 members/createMemberForm인 것을 볼 수 있다. 기본적으로 반환된 string의 이름을 가지고 있는 html 파일을 template 패키지에서 찾는데, 이런식으로 작성하면 경로로 인식한다. 즉, templates - members 패키지에 있는 createMemberForm.html을 찾게 되는 것이다.
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping(value = "/members/new")
public String createForm() {
return "members/createMemberForm";
}
}
get 방식이 아니라 post 방식으로 폼 태그에서 입력받은 내용(name)을 서버로 전송한다.
MemberForm 클래스 생성
createMemberForm.html 의 form 태그에서 전달받은 값을 저장할 수 있는 객체가 있어야한다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
createMemberForm.html에서의 "name"과 MemberForm의 name 변수가 서로 맵핑이 되면서 값을 받아온다.
입력 받은 데이터를 통해 회원 가입
MemberController의 내용을 수정해야 한다.
"/members/new" 경로로 들어올 때 취해야할 행동을 정의해야 한다.
MemberController
@GetMapping(value = "/members/new")
public String createForm() {
return "members/createMemberForm";
}
@PostMapping(value = "/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
이때 조심해야하는 것은 위 코드의 member는 domain 패키지에 있는 Member이다.
@GetMapping은 get 방식으로 폼 태그 데이터가 전송되었을 때 취해야 할 행동을 정의하는 어노테이션이고, @PostMapping은 post 방식으로 폼 태그 데이터가 전송되었을 때 취해야할 행동을 정의하는 어노테이션이다.
createMemberForm.html에서 폼 태그의 데이터 전송 방식은 post 방식으로 선택했으므로 get 방식은 크게 고려하지 않는다.
따라서 @PostMappig으로 연결된 create 메서드가 호출이 되는데, 매개 변수로 전달된 MemberForm에 name(아이디)가 전달이 되고, 이 name을 이용해 Member 객체에 이름을 설정하고, join을 진행한다.
이렇게 회원가입이 완료되었다면 redirect를 통해 home.html(localhost:8080/)으로 이동한다.
조회
홈 화면에서 "회원 목록" 버튼을 눌렀을 때, 회원 목록이 뜨는 것이 목표이다.
MemberController 수정
home.html에서 "회원 목록"을 눌렀을 때, /members로 이동하게 했다. 그러므로 @GetMapping 어노테이션을 통해 매핑을 해주고, 회원 조회를 하는 메서드를 작성해야 한다.
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
먼저 매개변수로 Model을 받는다. 그리고 memberService의 findMembers 메서드를 통해 받은 값을 List 변수에 담는다. 이후 매개변수로 받은 Model의 addAttribute 메서드를 이용하여 "members" 키에 맵핑되는 값에 members 리스트 객체를 담는다. 이후 "members/memberList"를 반환함으로써, templates/members 패키지에서 memberList.html을 찾도록 한다.
${members}는 Model에 key가 members인 value를 읽어들이라는 뜻이다. MemberController에서 model에 addAttribute를 통해 회원 정보를 List로 전달했기 때문에, 해당 List가 전달될 것이다.
th:each는 members에 있는 모든 요소들을 방문하게 하는 thymeleaf 문법이다. Loop를 돌면서 밑의 로직을 실행하게 된다. 우선 첫 번째 객체를 하나 꺼내서 member에 담고, id와 name을 출력하게 된다. 이 때, 이전에 설정한 Getter의 도움을 받아서 값을 받아온다. 이런 식으로 모든 회원을 돌면서 회원의 id와 name을 화면에 렌더링한다.
댓글