[Spring Boot] 회원가입, 회원조회 기능 구현

회원가입, 회원조회 기능 구현

MemberController에 Service 의존성 주입을 해줬으니 이제 View를 구현해야 한다.

아래와 같이 name을 /members/new에 POST로 보내는 form을 하나 작성했다.

/templates/members/createMemberForm.html

<!DOCTYPE html>
<html lang="en" th:xmlns="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
<div class="container">
    <form action="/members/new" method="post">
        <label for="name">이름: </label>
        <input id="name" name="name" type="text" placeholder="이름"/>
        <input value="회원가입" type="submit"/>
    </form>
</div>
</body>
</html>

이제 사용자가 /members/new에 접근하면 이전에 작성한 form을 보여주도록 mapping 해주자.

package com.devjaewoo.hellospring.controller;

import com.devjaewoo.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
public class MemberController {

    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/members/new")
    public String createForm() {
        return "/members/createMemberForm";
    }
}

이제 /members/new에 GET 방식으로 접근하면 아래와 같은 창을 띄워준다.

위의 창에서 회원가입을 누르면 /members/new에 name값을 POST로 전달하도록 구현했다.

둘 다 URL이 /members/new로 똑같은데 뭔가 잘못되는거 아닌가? 할 수 있겠지만,

하나는 GET으로 접근하고, 하나는 POST로 접근하기에 둘을 구분해서 작성해줄 수 있다.

여태까지는 @GetMapping으로 URL을 매핑해줬지만,

여기서 @PostMapping을 통해 POST로 들어오는 요청을 처리해줄 수 있다.

중요한건 POST 데이터가 어떻게 들어오느냐인데, 지금 Form은 name값 하나만을 보내주도록 설정되어 있다.

그러면 우리도 String name 변수를 갖는 클래스를 만들어 매개변수에 넣어주면 된다.

클래스 이름은 MemberForm으로 했다. 클래스 이름은 중요한게 아니라서 마음대로 해도 된다.

하지만 POST로 받는 값인 name 변수는 꼭 있어야 한다.

MemberForm.java

package com.devjaewoo.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

위의 MemberForm을 받아 MemberService를 통해 Join 해주는 코드를 작성하자.

회원가입 클릭 시 다시 / (root) URL로 redirect 해주도록 작성했다.

MemberController.java

package com.devjaewoo.hellospring.controller;

import com.devjaewoo.hellospring.domain.Member;
import com.devjaewoo.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MemberController {

    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/members/new")
    public String createForm() {
        return "/members/createMemberForm";
    }

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

이제 이름을 입력하고 회원가입 버튼을 누르면 홈페이지가 보인다.

아마 Repository에 저장이 됐을텐데, 확인할 수가 없다.

회원이 정상적으로 저장된것을 확인하기 위해 회원 목록 페이지를 만들어야 한다.

우선 /members 요청이 들어왔을 때 회원 리스트를 넘겨주도록 Controller 코드를 작성하자.

MemberController.java

package com.devjaewoo.hellospring.controller;

import com.devjaewoo.hellospring.domain.Member;
import com.devjaewoo.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@Controller
public class MemberController {

    ...

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

memberService에서 회원 리스트를 받아 model에 attribute로 넣어주고, /members/memberList.html을 반환한다.

model에 "members"라는 이름으로 회원 리스트를 저장했다. 조금 있다 다시 쓰이니 기억해두자.

memberList.html

<!DOCTYPE html>
<html lang="en" th:xmlns="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Member List</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>이름</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="member: ${members}">
        <td th:text="${member.id}">아이디</td>
        <td th:text="${member.name}">이름</td>
    </tr>
    </tbody>
</table>
</body>
</html>

회원 목록에 접근하면 보여질 페이지다.

HTML 코드를 보면 tr과 td 태그에 th:로 시작하는 이상한 속성이 붙어있는데

이전에 build.gradle에 Dependency로 추가했던 Thymeleaf 문법이다.

dependencies {
    ...
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    ...
}

Thymeleaf를 사용하기 위해 html 태그에 아래와 같이 XML Namespace를 정의해줘야 한다.

<html th:xmlns="www.thymeleaf.org">

아래의 코드에서 아까 model을 통해 넘겨줬던 members가 쓰인다.

th:each에서 members 리스트의 각 요소들을 꺼내 id와 name 변수 값을 읽어서 실제 텍스트로 넣어준다.

<tr th:each="member : ${members}">
    <td th:text="${member.id}">아이디</td>
    <td th:text="${member.name}">이름</td>
</tr>

이제 서버를 다시 올리고 회원 목록을 조회하면 아래와 같이 회원가입 했던 내역들이 잘 보인다.

하지만 메모리에 저장하다보니 서버를 껐다가 다시 켜면 모두 사라진다.

이를 해결하기 위해 데이터베이스에 값을 저장해야 하는데, 이건 다음 시간에 이어서 하겠다.

출처

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 (김영한 강사)

저작자표시 비영리 동일조건

'Study > Spring Boot' 카테고리의 다른 글

[Spring Boot] h2 Database 설정하기 (0)	2022.02.14
[Spring Boot] h2 DB에 TCP 접근 시 SocketTimeoutException 뜰 때 (0)	2022.02.14
[Spring Boot] 의존성 주입과 스프링 빈 등록 (0)	2022.02.13
[Spring Boot] Service와 테스트 케이스 만들기 (0)	2022.02.13
[Spring Boot] Repository와 테스트 케이스 만들기 (0)	2022.02.13