Spring 입문 Chapter 5-3. 회원 관리 예제 웹 MVC 개발 : 회원 웹 기능

Spring Boot/스프링 입문 강의

Spring 입문 Chapter 5-3. 회원 관리 예제 웹 MVC 개발 : 회원 웹 기능 - 조회

HEY__ 2022. 3. 8. 00:40

728x90

이 글은 인프런에 있는 김영한님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 듣고 정리한 필기입니다.

⛅️ MemberController에서 url 매핑하기

이전 시간에는 홈 화면에서 "회원 가입" 버튼을 누른 후, 회원을 등록하는 것까지 진행했다.

이번 시간에는 홈 화면에서 "회원 목록" 버튼을 눌렀을 때, 회원 목록이 뜨도록 해보자.

home.html에서 "회원 목록"을 눌렀을 때, /members로 이동하게 했다.

그러므로 @GetMapping 어노테이션을 통해 매핑을 해주고, 회원 조회를 하는 메서드를 작성해보자.

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

먼저 회원 목록을 출력하는 기능을 가진 함수를 만들 것이므로 /members url과 연결해야 한다.

그러므로 @GetMapping("/members")를 통해 url과 연결한다.

먼저 매개변수로 Model을 받는다.

그리고 memberService의 findMembers 메서드를 통해 받은 값을 List 변수에 담는다.

이후 매개변수로 받은 Model에 addAttribute 메서드를 이용하여 회원들의 정보를 담는다.

이후 "members/memberList"를 반환함으로써, templates/members 패키지에서 memberList.html을 찾도록 한다.

⛅️ memberList.html 작성

이제 templates/members 패키지에 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를 등록해보자. 이후 "회원 목록" 버튼을 누르면 밑과 같이 spring1과 spring2가 있는 것을 확인할 수 있다.

해당 웹 페이지에서 소스보기를 통해 코드를 보자.

<!DOCTYPE HTML>
<html>
<body>
<div class="container">
    <div>
        <table>
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>spring1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>spring2</td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

이렇게 되어있는 것을 볼 수 있는데, <tr>부분을 보면 spring1과 spring2가 있는 것을 알 수 있다.

우리가 memberList.html에서 작성한 코드보다 더 길어진 것을 알 수 있다.

각 아이디마다 블럭이 있음을 확인할 수 있다.

이렇게 된 이유는 template engine인 thymeleaf가 작동하여 렌더링하고 있기 때문이다.

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

눈 여겨 봐야하는 부분은 위 부분이다.

${members}는 Model에 key가 members인 value를 읽어들이라는 뜻이다.

MemberController에서 model에 addAttribute를 통해 회원 정보를 List로 전달했기 때문에, 해당 List가 전달될 것이다.

th:each는 members에 있는 모든 요소들을 방문하게 하는 thymeleaf 문법이다.

Loop를 돌면서 밑의 로직을 실행하게 된다.

우선 첫 번째 객체를 하나 꺼내서 member에 담고, id와 name을 출력하게 된다. 이 때, 이전에 설정한 Getter의 도움을 받아서 값을 받아온다.

이런 식으로 모든 회원을 돌면서 회원의 id와 name을 화면에 렌더링한다.

이렇게 해서 회원 목록을 조회하는 기능까지 구현해보았다.

현재는 메모리를 이용하는 memoryMemberRepository를 이용하고 있다.

하지만 메모리를 이용하기 때문에 서버를 내렸다가 다시 올리게 되면 회원들의 정보가 모두 지워지게 된다.

Java 메모리 안에 저장되기 때문에 자바를 실행 중단하게 되면 데이터들이 모두 사라지게 되는 것이다.

하지만 이것은 우리가 원하는 것이 아니다.

이 회원 데이터들을 파일이나 DB에 저장을 해야 한다.

다음 시간에는 spring data access에 대해서 알아보자.

DB를 설치하고 어떻게 사용할 수 있는지 알아보도록 하자.

728x90