TIL - JAVA spring DAY 12

jihan kong·2022년 1월 19일
0

JAVA spring 입문

목록 보기
14/20
post-thumbnail

드디어 회원 웹 기능을 구현하는 과정의 마지막 단계에 도달했다.
오늘은 웹 기능 중 회원 조회를 하는 기능을 구현해보았다.

회원 웹 기능 - 조회

지난 시간에 POST 방식을 통해 form을 전달해서 회원을 등록할 수 있도록 회원 가입 기능을 만들었다. 이제 회원 가입이 완료된 회원들의 목록을 보여주는 회원 목록 기능을 구현해볼 것이다. 일단 단순히 조회의 기능을 구현할 것이므로 Get방식을 사용해야 할 것이다.

MemberController 에 조회를 위한 다음 메소드를 추가한다.

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

그리고 나면 templates를 먼저 불러오기 때문에 항상 해오던 것처럼 템플릿 파일을 먼저 생성해야한다. templates 디렉토리밑에 html 파일을 생성하고 memberList.html 로 네이밍한다.

/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>
    </form>
</div>

</body>
</html>

이제 실행시켜보자.

다음과 같이 홈 화면에서 회원가입을 누르고

spring1과 spring2를 각각 등록버튼을 눌러 등록해보았다. 그 후, 홈 화면에서 회원 목록을 눌러보면 다음과 같이 우리가 등록했던 spring1과 spring2가 등록된 것을 볼 수 있다.

페이지 소스 보기를 통해 코드를 더 자세히 살펴보면 다음과 같이 spring1과 spring2가 렌더링 되어 있는 것을 알 수 있다.

자, 그렇다면 작동원리는 무엇일까? 우선 memberList.html 에서 ${members}를 주목해보자. ${ }는 모델 안의 값을 꺼낼 때 사용했었다. MemberController 에서 model을 우리가 어떻게 구현했었냐면 model.addAttribute("members", members); 와 같이 구현했었다. 그리고 members 안에는 모든 회원을 list로 담아놓게 했다. 그런 후에,


        <tr th:each="member : ${members}">	// 객체 꺼냄
            <td th:text="${member.id}"></td>	// 꺼낸 객체의 id 출력
            <td th:text="${member.name}"></td>	// 꺼낸 객체의 name 출력

th (loop를 돌게 하는 thymeleaf 문법) 를 통해 loop를 돌면서 로직을 실행시킬 때, 첫 번째 객체를 꺼내서 멤버에 담고 객체의 id를 출력하고, name을 출력하면서 종료된다. 여기서 id는 getter, setter 접근 방식 (다른 말로는 접근자 프로퍼티, access property) 으로 Member class의 getId, getName에 접근해서 값을 가져오게 된다.


MVC is done!

지금까지의 과정을 통해 회원 웹 기능을 모두 구현하고 마무리했다. 화면상 (View) 으로 사용자들에게 입력을 받고 입력받은 데이터를 컨트롤러 (Controller) 를 통해 모델 (Model) 에 업데이트 시키고, 모델은 업데이트 된 내용을 사용자들에게 다시 보여준다 (View). 이 모든 일련의 과정들이 우리가 지금까지 구현한 MVC 패턴 구조이다.

                           (출처:XESCHOOL)

그렇다면 이렇게 해서 백 엔드 서버 구현은 끝난 것일까? NOPE
우리가 만든 server를 셧다운했다가 다시 부팅하게 되면

이렇게 우리가 등록했던 회원들이 온데간데 없이 사라져 있는 것을 볼 수있다....

왜 그럴까? 우리가 저장했던 회원 목록은 메모리에 저장한 것이기 때문이다. 예전 컴퓨터구조? 시간에 배웠던 RAM/ROM 개념과 똑같다. RAM은 컴퓨터를 재부팅하게 되면 사라지게 되는 휘발성이 강한 임시 메모리인데 그런 곳에 저장한다면 남아있을리가 없다.

그래서 우리는 ROM. 즉, 데이터베이스(DB) 에 이를 저장해서 반영구적으로 사용해야할 것이다. 다음 시간부터는 스프링이 DB에 접근하는 방법과 기술들, 개념 등을 학습할 계획이다.

profile
학습하며 도전하는 것을 즐기는 개발자

0개의 댓글