Java Spring-5

손현수·2023년 3월 24일

회원 관리 예제 - 웹 MVC 개발

회원 웹 기능 - 홈 화면 추가

controller 패키지 아래에 HomeController 파일을 만들고 다음과 같이 코드 작성

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home";
    }
}

templates 패키지 아래에 home.html 파일을 만든다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<body>

<div class="container">
    <div>
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="/members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</div> <!-- /container -->

</body>
</html>

이제 localhost:8080에 접속하면 다음과 같은 화면을 볼 수 있다.
정적 파일인 index.html보다 컨트롤러의 우선 순위가 더 높기 때문에 mapping이 되는 함수가 존재한다면 그것을 실행하게 되고 이 경우에는 기존에 작성되어 있던 index.html은 무시되고 home.html이 실행된다.

회원 웹 기능 - 회원 등록 폼 개발

회원등록을 구현하기 전에 home.html 코드를 살펴보면 회원 가입 링크를 클릭했을 때 /members/new로 이동하도록 되어있다. 따라서 MemberController 파일에 /members/new에 대한 mapping 메서드를 추가한다.

@Controller
public class MemberController {
    private final MemberService memberService;

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

    @GetMapping//새로 추가한 mapping 메서드
    public String createForm() {
        return "members/createMemberForm";
    }
}

위의 mapping 함수에서 return 값이 "members/createMemberForm"이므로 templates 디렉토리 아래에 members 디렉토리를 추가하고 createMemberForm.html 파일을 만든다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <form action="/members/new" method="post">
        <div class="form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
        </div>
        <button type="submit">등록</button>
    </form>
</div> <!-- /container -->
</body>
</html>

이제 home.html에서 회원 가입 버튼을 클릭하면 다음과 같은 페이지로 이동한다.
아직 이름을 입력했을 때 처리하는 로직이 구현되지 않았으므로 이름을 입력하고 등록을 누르면 에러가 발생한다.
따라서 controller 패키지 아래에 MemberForm.java 파일을 만들고 다음과 같이 코드를 작성한다.

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

이제 name을 저장할 클래스를 구현했으므로 사용자가 입력한 이름을 저장하는 코드를 작성하면 된다.
MemberController 파일에서 @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 form) {
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";//홈 화면으로 돌아가게 한다.
    }
}

전체적인 작동 과정

회원 가입 버튼을 누르면 /members/new로 이동하게 되고 @Getmapping("/member/new")에 mapping이 되어서 createForm() 메서드가 실행된다. 해당 메서드의 return 값이 members/createMemberForm이므로 createMemberForm.html 파일이 열리게 된다.
createMemberForm.html 코드에서 form 태그는 값을 입력할 수 있는 html 태그이고 action="/members/new" method="post"라고 되어있다. 이제 이름을 입력하고 등록 버튼을 누르면 /members/new url에 post 방식으로 넘어온다. post 방식으로 넘어올 때는 @GetMapping이 아니라 @PostMapping에 대응된다. @PostMapping은 데이터를 form에 넣어서 전달할 때 사용한다.
@PostMapping에 의해서 create() 메서드가 호출되는데 이때 매개변수로 사용되는 MemberForm form에 대해 살펴보면 해당 객체의 name 값에 사용자가 입력한 이름 값이 할당되어 있다. 이는 스프링이 처리해준 것인데 html 코드 중에서 name="name"을 기준으로 판단하여 처리한 것이다.

회원 웹 기능 - 조회

등록을 구현할 때와 마찬가지로 회원목록 버튼을 클릭하면 /members로 이동하게 된다. 따라서 이것에 대응되는 mapping 메서드를 구현해야 한다.

@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 form) {
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
    }

    @GetMapping("/members")//새로 구현한 mapping 메서드
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);//member 전체 리스트를 model에 담아서 화면(뷰)에 넘긴다.
        return "members/memberList";
    }
}

새로 추가한 mapping 메서드의 return 값이 members/memberList이므로 memberList.html 파일을 생성한다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <table>
            <thead>
            <tr>
                <th>#</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>
    </div>
</div> <!-- /container -->
</body>
</html>

이제 회원가입 버튼을 누르고 회원에 spring1, spring2 두가지를 추가한다. 마지막으로 회원 목록을 누르면 다음과 같은 화면이 보인다.
memberList.html 코드에서 주의깊게 살펴볼 부분은 다음과 같다.

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

위의 코드에서 ${members}는 model 안에 들어있는 members 값을 가져오는 것이다. 이전에 mapping 메서드에 의해서 members 변수에는 모든 회원을 조회해서 담아두었다. 이것을 thymeleaf 문법인 th:each로 loop를 돈다. members의 첫번째 아이템을 member에 담고 id와 name을 출력한다. id와 name을 가져올 때는 getId(), getName() 메서드를 통해서 가지고 온다.
현재 데이터를 메모리에 저장하고 있기 때문에 스프링을 종료했다가 다시 실행하면 데이터가 다 날아간다. 따라서 데이터를 파일이나 데이터베이스에 저장해야 한다.

손현수

안녕하세요.

이전 포스트

Java Spring-4

다음 포스트

Java Spring-5

회원 웹 기능 - 홈 화면 추가

회원 웹 기능 - 회원 등록 폼 개발

회원 웹 기능 - 조회

Java Spring-4

다트(플러터)

0개의 댓글