2021년 7월 4일 4 min read Spring

<Spring> 스프링으로 만드는 회원 관리 예제 - 웹 MVC 개발

해당 글은 김영한님의 <스프링 입문> 강좌를 기반으로 작성되었습니다.

회원 웹 기능 - 홈 화면 추가

localhost:8080으로 접속했을 때 바로 나오는 화면 설계입니다.
controller 패키지에 homeController 클래스를 생성합니다.

package hello.hellospring.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")//GET요청 없는 경우의 화면
    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>

해당 URL로 접속하면 브라우져가 아래의 화면을 띄웁니다.

회원 웹 기능 - 회원 가입(등록하기)

이제 위의 홈 화면에서 회원가입 버튼을 클릭했을 때, 넘어가는 화면을 구현하겠습니다.
Controller 패키지에 MemberController클래스를 생성합니다.
해당 클래스는 홈화면에서 들어오는 GET요청 처리 및 해당 페이지에서 POST요청을 처리하는 역할을 합니다.

@Controller // annotation 역할 :  spring bean으로 만들고 해당 클래스를 spring-container에서 관리
public class MemberController {

    private final MemberService memberService;

    @Autowired//Controller 와 Service 간의 연결 수행하는 어노테이션
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

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

    //submit 클릭 시 POST 요청 발생하며, 홈 화면으로 리다이렉트
    @PostMapping("members/new")
    public String create(MemberForm memberForm) {
        Member member = new Member();
        member.setName(memberForm.getName());

        memberService.join(member);

        return "redirect:/";
    }
}

멤버등록을 위한 MemberForm 클래스도 생성합니다.

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

이후 createMemberForm.html을 members 디렉토리 내에 생성하고 구현합니다.

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

해당 페이지는 URL을 통해 GET요청이 들어오면, 브라우져에 HTML파일을 그려주고 이후 submit를 통해 POST요청이 들어오면 멤버를 등록하고 홈 화면으로 리다렉트해주는 방식으로 동작한다.

회원 웹 기능 - 회원 조회(회원 목록) 구현하기

MemberController에 아래의 메서드를 추가합니다.
Service를 통해 모든 멤버를 찾고 해당 리스트를 모델에 담아서 HTML로 보내는 동작을 하는 메서드입니다.

@GetMapping("/members")
    public String list(Model model){
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        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>

타임리프의 th:each 문법은 일반적인 for-each문과 동일하게 해당 객체(model 객체에 담긴 List)를 순차검색하면서 화면에 값을 출력하는 동작을 수행합니다.
해당 동작들이 정상적으로 구현되면 아래와 같은 간단한 웹페이지가 동작합니다.

회원 웹 기능 - 홈 화면 추가

회원 웹 기능 - 회원 가입(등록하기)

회원 웹 기능 - 회원 조회(회원 목록) 구현하기

You might also like...

<Spring> AOP 발전과정 살펴보기 1

<Spring> Spring MVC의 DispatcherServlet 핵심로직 들여다보기

<Spring> 우리는 왜 MVC를 사용할까?

<Spring> 서블릿 사용해보기

<Spring> 스프링 배우기 전 알아두면 좋은 개념