[인프런 스프링 입문] 회원 웹 기능

1. Home 화면 추가

기존 static 파일은 index.html을 사용했다. 하지만 여기에 다른 파일을 넣어준다면?

이를 우선적으로 인식하게 만드려면 무엇을 수정해야할까

 

- 우선, template을 만든다. 이름은 임의로 home.html 이라 설정한다 하자.

html 안에는 프론트엔드를 어떻게 구성할지 정해서 코드를 넣는다.

- 그 후, static 파일의 특성상 (처음에 스프링컨테이너에서 'GetMapping'을 통해 가져오는 이름과 동일한게 있는지 찾아본다)

controller에 새로운 Controller를 만들고, @GetMapping + return "home"을 이용해 home.html로 연결하는 코드를 짠다.

 

2. 등록(새 멤버 추가)

위에서 home화면에 새 멤버를 추가(등록)하는 기능을 만들어 페이지만 구현했다 (프론트엔드)

이와 같은 방식으로, '등록'버튼을 눌렀을 때 어떤 화면이 펼쳐질지 페이지 구현이 필요하다 (프론트엔드)

추가로, 등록한 멤버가 서버에 등록되어야하므로, 이 껍데기를 동작시킬 Controller가 필요하다.

 

- 우선, template을 만든다. 이름은 임의로 members/createMemberForm.html 이라 설정한다 하자.

html 안에는 프론트엔드를 어떻게 구성할지 정해서 코드를 넣는다.

- 그 후, static 파일의 특성상 (처음에 스프링컨테이너에서 'GetMapping'을 통해 가져오는 이름과 동일하게 있는지 찾아본다)

controller는 이전에 만들어놓은 MemberController를 사용한다. @GetMapping + return "members/createMemberFrom"을 이용해 연결하는 코드를 짠다.

- MemberForm이란 새로운 class를 만들고, private string name을 받고 변경하는 (Getter + Setter) 코드를 넣는다

- 이 MemberForm을 MemberController에서 받아오는 코드가 필요하다 @PostMapping + 코드로 구성한다

@PostMapping("/members/new")
public String create(MemberForm form){
    Member member = new Member();
    member.setName(form.getName());
    
    memberService.join(member);
    
    return "redirect:/";
}

코드를 보면서 설명하면, @PostMapping뒤에는 새로운 멤버를 등록하는 페이지 http주소이고,

MemberForm class를 매개변수로 받아와서,

member를 등록하고, memberService(이전에 선언해둔) class와 연결한다.

return "redirect:/"는 기존 홈페이지로 이동하는 코드이다.

 

3. 조회

위에서 등록한 멤버를 조회하는 페이지가 필요하다.

 

- MemberController에 list를 불러올 func을 추가한다.

@GetMapping("/member")
public String list(Model model){
    List<Member> members = memberService.findMembers();
    model.addAttribute("members", members);
    return "members/memberList";
}

코드를 보면서 설명하면, @GetMapping뒤에는 멤버를 조회하는 페이지 http주소이고,

memberService.findMembers를 통해 전체 멤버 조회가 가능하다. 이는 List members에 다 넣어지고,

model.addAttribute를 통해 "members"라는 key에 위의 List members라는 value가 할당된다.

return "members/memberList"를 통해 tempalte의 memberList.html로 연결된다.

- memberList.html에는 member를 하나씩 출력하는 코드가 작성되어있다 (프론트엔드)