본문 바로가기
TIL

2023-10-28-TIL

by raphael3 2023. 10. 31.
반응형

회원 관리 예제 - 웹 MVC 개발

홈 화면

간단히 회원 정보를 등록하기 위한 링크를 가진 웹 사이트를 만들어보자.

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

// src/main/java/hello/hellospring/controller/HomeController.java
@Controller
public class HomeController {
    @GetMapping("/")
    public String home() {
        return "home";
    }
}

사이트에 접속하자마자(@GetMapping("/")) 호출될 메서드를 만든다. 이 메서드는 곧바로 return “home”을 하기 때문에, 이를 viewResolver에게 위임하고 viewResolver는 template으로 만든 정적 페이지를 찾아내어 Thymeleaf 프레임워크가 랜더링하게 한다. 스프링은 정적 페이지의 요청에 대해 컨트롤러에서 먼저 처리 로직을 찾는다 하였는데, 위 코드는 컨트롤러이고, 이 컨트롤러는 곧바로 static template으로 연결시켜 주고 있다.

<!-- src/main/resources/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>

 

 

 

정적 페이치 처리 로직의 우선순위

왜 사이트에 접속하자마자 index.html이 아니라 home.html로 연결될까? 우선순위가 있다.

스프링은 정적 컨텐츠가 요청되면, 컨트롤러에서 먼저 처리 로직을 찾고, 없으면 static 파일을 찾게 되어 있다. 즉, 위 예제는 컨트롤러에서 찾은 처리 로직에 따라 home.html로 연결한 것이다. 만약 컨트롤러에서 home.html로의 연결이 없다면 index.html로 연결될 것이다.

회원 가입 화면

기존의 memberController 코드를 이용한다.

package hello.hellospring.controller;

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

// src/main/java/hello/hellospring/controller/MemberController.java
@Controller
public class MemberController {
    private MemberService memberService;

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

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

/members/new 페이지 접근이 요청되면, members/createMemberForm 템플릿으로 이동시킨다.

<!--/Users/dohk/Dropbox/Spring/hello-spring/src/main/resources/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>

위 페이지에서 입력한 이름을 받을 수 있게 해야 한다. 새로운 클래스를 만들어 작업한다.

package hello.hellospring.controller;

///Users/dohk/Dropbox/Spring/hello-spring/src/main/java/hello/hellospring/controller/MemberForm.java
public class MemberForm { 
    private String name;

    public String getName() {
        return name;
    }

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

// 멤버 변수와 Getter, Setter만 있는 것을 보니, 얘는 도메인 객체구나! 라고 생각했지만 Controller였다..

name 멤버 변수에 html에서 input에 의해 넘어온 name이 담기게 될 예정이다.

이제 컨트롤러에서 요청에 대한 post 처리를 수행할 로직을 작성한다.

@PostMapping

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.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;

// src/main/java/hello/hellospring/controller/MemberController.java
@Controller
public class MemberController {
    private 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:/**";
    }
}

페이지에서 입력받은 name을 member 객체를 생성하여 등록하고, Service에 넘겨서 회원 가입 비즈니스 로직을 처리할 수 있게 한다. 마지막으로 홈 화면으로 redirect 시켜주게 한다.

PostMapping이 작동할 수 있는 이유는 html 코드에 method로 명시되어 있기 때문이다.

<!--/Users/dohk/Dropbox/Spring/hello-spring/src/main/resources/templates/members/createMemberForm.html-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <form action="/members/new" method="post">
        ...
    </form>
</div> <!-- /container -->
</body>
</html>
 

 

회원 목록 조회

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
...

import java.util.List;

// src/main/java/hello/hellospring/controller/MemberController.java
@Controller
public class MemberController {
    private MemberService memberService;
		
		...

    @GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members); // members를 받아서 model에 넘긴다.
        return "members/memberList";
    }
}

전체 회원을 조회하는 기능을 만들기 위해 members 페이지로의 요청이 GetMapping되면, memberService로부터 전체 멤버를 조회하고(findMembers()), model에 이 전체 멤버 리스트를 그대로 넘겨준다. 그 다음엔 memberList 템플릿(뷰)에 데이터를 넘긴다. (Controller → View로의 데이터 이동)

<!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>

일단 실행시켜보면,

위와 같이 뜨고, 페이지 소스를 보면,

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

위와 같이 되어있다. 즉, 원본 템플릿 코드와는 다르게 tr 태그를 이용해서 내용이 늘어나 있다.

Thymeleaf가 이를 처리해주기 때문에 가능하다.

템플릿 코드를 다시 보면,

 

 

<!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>

${members} 부분에서, Thymeleaf는 Model로부터 값을 꺼내는데, 각각의 값에 대해(each) 이를 처리한다.

또한, ${member.id} 와 ${member.name} 를 보면, member 객체의 private한 멤버 변수인데도 접근이 되고 있다. 이들은 실은, getId()와 getName()을 통해 접근하고 있는 것이다.

인메모리 데이터베이스이기 때문에, 서버를 껐다가 다시 키면 기존의 회원 정보들은 조회할 수 없다. 따라서 인메모리 데이터베이스 방식 대신 파일이나 DB에 데이터를 저장해야 한다.

반응형
저작자표시 비영리 변경금지

'TIL' 카테고리의 다른 글

2023-10-31-TIL  (1) 2023.11.01
2023-10-30-TIL  (2) 2023.10.31
2023-10-27-TIL  (1) 2023.10.27
2023-10-26-TIL  (0) 2023.10.27
2023-10-24-TIL  (0) 2023.10.24

관련글

티스토리툴바