7. Spring(MVC 구현)

박종현·2024년 2월 1일

스프링 프로젝트

목록 보기

7/14

-정영한님의 '스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술'로 공부중입니다.

✅MVC구현

앞서 MVC(Model, View, Controller)에 대한 설명을 했고, 회원 가입 및 조회에 관련된 MVC를 구현하려고 한다.

1. 🏠홈 기능 구현

이전에 공부한 것처럼 index.html을 이용해 홈 화면을 지정해 줄 수 있지만, 원하는 기능을 구현하고 홈화면을 이동하는 과정에서는 "/"하나만 리턴해주어도 가능하도록 쉽게 만들 수 있게 된다. 이를 위해서 홈 화면에 해당하는 html과 컨트롤러를 이용하여 홈 화면을 보여주는 기능을 구현하는 과정이다.

html 생성

우선, 이동할 template폴더에 home.html을 만들어준다.

<!DOCTYPE html>

<html xmlns="http://www.thymeleaf.org"> 
    <head>
        <title>welcome!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
        <p th:text="'안녕하세요. '+ ${name}">안녕하세요. 손님</p>
    </body>
</html>

home 컨트롤러 생성

컨트롤러 폴더에 homeController.java를 만들어주어서 홈 화면 호출에 대한 관리를 해준다.

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

@GetMapping은 url를 지정해 지정한 url가 나온다면 해당 메소드를 실행한다.

작동 방식은 "/" 경로가 호출된다면 컨트롤러에서 특정한 메소드를 작동시키게 된다. 그리고 home이라는 문자열을 반환하는 게 맞지만, 스프링에서 template에서 home.html을 찾아서 반환하게 해주는 기능이 있어서 home.html을 반환하는 과정을 거친다.

실행하게 된다면, 전의 index.html이 아닌 home.html이 나타난다.

2. 🙍‍♂️회원 가입 구현

회원 이름을 기입하고, 회원 가입을 누르게 되면, 중복을 검사한 후 저장하는 기능을 구현했었다. 이러한 기능들을 실제 html과 컨트롤러를 생성해 구현 할 것이다.

html 생성

우선, 이동할 template/members폴더에 createMemberForm.html을 만들어준다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>createMemberForm</title>
</head>
<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 형식을 이용해 이름을 기입하고 post 형식으로 호출하는 html을 생성했다.

회원가입 컨트롤러

먼저, memberForm.java를 만들어 html의 name과 매칭시켜 줄 것이다.

public class MemberForm {
    private String name;

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

    public String getName() {
        return name;
    }
}

간단한 클래스에 name 변수를 생성하고 getter, setter를 지정해 준 것이 전부이다.

컨트롤러 폴더에 이미 만들었던 MemberController.java를 활용해 회원 가입에 대한 관리를 해준다.

@Controller
public class MemberController {
    
    private final MemberService memberService;

    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:/";
    }  
}

@PostMapping는 지정한 url에서 post요청이 오면 메서드를 실행한다.

html에서 form 형식에 버튼을 submit 버튼을 클릭하면, post요청이 되고, post요청을 컨트롤러에서 받아서 넘어온 form 데이터를 처리하는 방식이다.
member 객체를 만들고, form 데이터의 이름을 member 객체의 이름으로 지정해주고, member를 저장한 다음 "/"로 이동한다.

회원 가입을 누르면 members/new로 이동하고, 등록을 누르면 메인페이지로 이동하게 된다.

3. 📚회원 조회 구현

회원 조회를 누르면 회원들에 대한 데이터를 확인 할 수 있는 메소드를 만들었고, html과 컨트롤러를 생성해 구현 할 것이다.

html 생성

이동할 template/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>

thymeleaf에서 each="member : ${members}"는 members로 들어오는 변수들을 하나씩 member로 저장해 다음 줄을 실행한다. for each구문과 같다.

회원조회 컨트롤러

MemberController.java를 활용해 회원 조회에 대한 관리를 해준다.

@Controller
public class MemberController {
    
    private final MemberService memberService;

    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:/";
    }
	//회원 조회 구현
    @GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }
    
}