본문 바로가기
[inflearn] 스프링 입문

10. 회원 관리 예제 - 웹 MVC 개발

by 슬픈 야옹이 2023. 4. 16.

지금까지 작성한 MemverService와 MemberRepository를 이용해 Controller를 작성한다.

 

Controller 작성까지 완료되면 온전히 동작하는 하나의 애플리케이션이 완성된다.

 

 

홈 화면 추가

패키지 하위 Controller 폴더에 Homecontroller 클래스를 하나 생성해 다음과 같이 작성한다.

 

Homecontroller.java

package hdxian.hdxianspring.controller;

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

@Controller
public class HomeController {

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

}

 

Controller는 관련된 기능끼리 따로 모아 관리하는 것이 수월할 듯 싶다.

 

@GetMapping("/")이 붙은 메서드는 서버에 처음 접속할 때 동작한다.

 

브라우저 주소창에 url을 입력해 들어오는 요청은 기본적으로 get 요청이기 때문에,

처음 서버에 접속하면 @GetMapping("/")이 붙은 메서드가 동작한다.

 

+)

해당 요청에 대해 동작하는 Controller 메서드가 정의되어있지 않으면, resources/static 폴더에서 요청과 같은 이름의 html 파일로 연결된다.

 

Controller 메서드에서 return "home" 형태로 리턴하였으므로

resources/templates 하위에 home.html을 작성한다.

 

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>

[회원 가입] 버튼을 누르면 /members/new 요청이,

[회원 목록] 버튼을 누르면 /members 요청이 get으로 전달된다.

 

 

서버를 시작해서 localhost:8080으로 접속해보면 home.html이 나타난다.

 

 

과정을 정리해보면 다음과 같다.

1. 웹 브라우저에 localhost:8080이라 입력해 접속하면, 내가 개발한 스프링 서버에 "/" 경로로 get 요청이 전달된다.

 

2. 서버의 HomeController에 @GetMapping("/")가 붙어있는 메서드 home()이 정의되어 있으므로 home()이 실행된다.

 

3. home()은 "home"을 리턴하므로 resources/templates의 home.html이 브라우저에 전달된다.

이 때 템플릿 엔진 등을 통해 html 페이지가 어느정도 가공될 수는 있지만 여기서는 특별한 가공 없이 그대로 전달되었다.

 

4. home.html을 전달받은 브라우저는 페이지를 화면에 띄운다.

 

 

 

 

 

회원 가입 기능

회원 가입 기능을 구현한다.

 

home.html에서 [회원 가입] 버튼을 누르면 /members/new 요청이 전달되도록 하였다.

 

서버 측에서 해당 요청에 대한 Controller 메서드를 작성한다.

앞서 말했듯, 주소 입력 방식으로 직접 전달되는 요청은 기본적으로 get 방식이다.

 

회원 가입 요청이 들어오면 회원 정보를 입력하는 페이지를 띄우고,

정보 입력 페이지를 통해 입력받은 정보를 바탕으로 새로운 회원 정보를 추가하는 방식으로 작성한다.

 

resources/templates 하위에 members 폴더를 생성한 뒤 createMemberForm 페이지를 작성한다.

관련된 파일들을 같은 폴더에서 관리하려는 목적으로 members 폴더를 생성하였다.

 

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>

<form> 태그 내용 : /members/new 경로로 post 메서드로 요청을 보낸다.

<input> 태그 내용 : 이름을 입력받은 칸을 생성하고 "name"이라는 이름으로 입력된 정보를 서버에 전달한다.

 

 

 

createMemberForm에서 보낸 데이터를 전달받을 MemberForm 클래스를 Controller 폴더에 생성한다.

 

 

MemberForm.java

package hdxian.hdxianspring.controller;

public class MemberForm {

    private String name;

    public String getName() {
        return name;
    }

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

}

createMemberForm에서 "name" 이름으로 데이터를 전달하면, MemberForm 클래스의 name 멤버에 해당 값이 전달된다.

name 멤버는 기본적으로 private로 지정하고,

name에 대한 setter를 정의해두면 스프링에서 자동으로 setter를 이용해 전달받은 데이터를 매핑해준다.

 

 

 

MemberController 클래스에 createForm() 메서드를 작성한다.

 

MemberController.java

package hdxian.hdxianspring.controller;

import hdxian.hdxianspring.domain.Member;
import hdxian.hdxianspring.repository.MemoryMemberRepository;
import hdxian.hdxianspring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@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";
    }

}

members/new 요청이 들어오면 아까 작성해둔 createMemberForm 페이지가 전달된다.

 

 

createMemberForm 페이지는 작성한 데이터를 post 메서드로 전달하게 작성하였다.

MemberController에 해당 요청을 처리하는 createMember() 메서드를 @PostMapping으로 작성한다.

 

MemberController.java

package hdxian.hdxianspring.controller;

import hdxian.hdxianspring.domain.Member;
import hdxian.hdxianspring.repository.MemoryMemberRepository;
import hdxian.hdxianspring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@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 createMember(MemberForm memberForm) {
        Member newMember = new Member();
        newMember.setName(memberForm.getName());

        memberService.join(newMember);
        return "redirect:/";
    }

}

return "redirect:/" 형태로 리턴하면 처음 화면(/)으로 돌아간다.

 

 

 

서버를 시작해 회원가입을 해보자.

 

[회원 가입] 버튼을 누른다.

정보 입력 칸에 이름을 입력한 뒤 [등록]을 누른다.

처음 화면으로 돌아가면 정상 동작한 것이다.

 

 

 

회원 등록 기능의 동작 과정을 정리하면 다음과 같다.

1. 처음 페이지에서 [회원 가입] 버튼을 누르면 /members/new 경로로 get 요청이 전달된다.

 

2. MemberController의 @GetMapping("members/new") createForm() 메서드가 동작해 createMemberForm 페이지를 전달한다.

 

3. 브라우저에서 createMemberForm 페이지를 띄우고, 해당 페이지에 입력한 정보를 다시 /members/new 경로로 post 요청으로 보낸다.

 

4. MemberController의 @PostMapping("members/new") createMember() 메서드가 동작해 입력받은 정보를 토대로 새로운 회원을 생성하고 저장한 뒤 처음 페이지로 되돌아간다. (redirect:/)

이 때 입력받은 정보는 memberForm에 저장되어 있다.

 

 

 

 

 

 

회원 조회 기능

등록된 회원 정보를 조회하는 기능을 추가한다.

 

회원 정보를 창에 띄워줄 memberList 페이지를 작성한다.

 

 

resources/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>

${member.id} : member 객체에서 getter를 이용해 데이터를 가져온다. 즉 member 클래스에 getter가 정의되어 있어야 한다.

 

 

hello.html에서 [회원 목록] 버튼을 누르면 /members 요청이 전달되도록 작성했었다.

MemberController에 해당 요청을 처리할 메서드를 작성한다.

 

MemberController.java

package hdxian.hdxianspring.controller;

import hdxian.hdxianspring.domain.Member;
import hdxian.hdxianspring.repository.MemoryMemberRepository;
import hdxian.hdxianspring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@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 createMember(MemberForm memberForm) {
        Member newMember = new Member();
        newMember.setName(memberForm.getName());

        memberService.join(newMember);
        return "redirect:/";
    }

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

        return "members/memberList";
    }


}

memberService에 작성해둔 findMembers()를 이용한다.

 

 

 

서버를 시작해 회원 정보를 등록하고 조회해보면 등록된 회원 정보가 나타난다.

 

 

 

 

회원 조회 기능의 동작 과정을 정리하면 다음과 같다.

1. [회원 목록] 버튼을 누르면 /members 경로로 get 요청이 전달된다.

 

2. MemberController의 @GetMapping("/members") getMemberList() 메서드가 동작한다.

 

3. 스프링의 View Resolver가 동작해 model의 데이터를 바탕으로 html 페이지를 생성한다.

 

4. 생성된 페이지가 브라우저에 전달되어 회원 목록이 창에 나타난다.

 

'[inflearn] 스프링 입문' 카테고리의 다른 글

12. 순수 JDBC  (0) 2023.04.29
11. H2 데이터베이스 설치  (0) 2023.04.29
9. 스프링 빈과 의존관계 - 스프링 빈 수동 등록  (0) 2023.04.16
스프링 입문) 8. 스프링 빈과 의존관계 - 컴포넌트 스캔  (0) 2023.04.10
스프링 입문) 7. 회원 관리 예제 - 백엔드 개발(2)  (0) 2023.04.03

관련글

티스토리툴바