Spring 입문 Chapter 5-2. 회원 관리 예제 웹 MVC 개발 : 회원 웹 기능

Spring Boot/스프링 입문 강의

Spring 입문 Chapter 5-2. 회원 관리 예제 웹 MVC 개발 : 회원 웹 기능 - 등록

HEY__ 2022. 3. 4. 15:56

728x90

이 글은 인프런에 있는 김영한님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 듣고 정리한 필기입니다.

⛅️ MemberController를 통해 html 연결하기

이전 시간에는 홈 화면을 만들고, "회원 가입" 버튼과 "회원 목록" 버튼을 만들었다.

이번 시간에는 "회원 가입" 버튼을 눌렀을 때, 회원 가입 폼(Form)이 나오고 아이디를 적으면 회원 가입이 되는 것까지 해보자.

이전에 home.html에서 "회원 가입" 버튼을 누르면 /members/new로 연결되게끔 했다.

MemberController에서 GetMapping을 통해 해당 url을 연결하는 메서드 createForm을 작성하자.

이 메서드에서는 별 다른 기능은 하지 않고, 바로 createMemberForm.html로 연결만 한다.

여기서 하나 눈 여겨볼 것은 반환값으로 members/createMemberForm인 것을 볼 수 있다.

기본적으로 반환된 string의 이름을 가지고 있는 html 파일을 template 패키지에서 찾는데, 이런식으로 작성하면

경로로 인식한다.

즉, templates - members 패키지에 있는 createMemberForm.html을 찾게 되는 것이다.

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

그럼 이제 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>

html 코드이므로 수업 자료에서 복사해서 사용하자.

이 페이지에서는 밑과 같은 창이 생겨 '회원 가입' 시 필요한 정보를 적고, 등록 버튼을 눌러 회원 가입을 한다.

여기서 눈 여겨 볼 것은 <form action="/members/new" method="post">과 <input type="text" id="name" name="name" placeholder="이름을 입력하세요"> 이다.

우선 전자는 /members/new를 post 방식으로 전달한다는 것을 의미하고,
후자는 key는 name이고 value는 입력받은 string으로 받는다는 뜻이다.

하지만 아직 /members/new를 post 방식으로 받는 메서드를 작성하지 않았기 때문에, 등록을 눌러도 페이지 에러가 뜰 것이다.

⛅️ MemberForm 클래스 생성

createMemberForm.html에서 key는 name, value는 입력받은 값으로 pair로 묶어서 전달한다고 했다.

이러한 값을 저장할 수 있는 클래스를 하나 생성하자.

바로 MemberForm인데, 이 클래스에서는 받은 값을 변수에 저장한다.

회원 가입 시 필요한 정보가 문자열이므로 String 변수 name을 선언하고, Getter와 Setter도 추가한다.

package Practice1.practicespring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

createMemberForm.html에서의 "name"과 MemberForm의 name 변수가 서로 매칭이 되면서 값을 받아올 것이다.

⛅️ 입력 받은 데이터를 통해 회원 가입

이제 웹에서 입력받은 데이터를 통해서 회원 가입하는 코드를 작성해보자.

위의 createMemberForm.html에서 <form action="/members/new" method="post">를 통해 post 방식으로 전달한다는 것을 확인했다.

전달받은 값을 MemberController에서 @PostMapping을 통해 연결하자.

@PostMapping("/members/new")
public String create(MemberForm form){
    // 멤버 객체 생성
    Member member = new Member();
    member.setName(form.getName());

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

매개변수 MemberForm을 통해 createMemberForm.html에서 name(아이디)의 정보를 받는다.

그리고 Member 객체를 생성하고 setName을 통해 아이디로 설정한다.

이 member 객체를 memberService를 통해 join. 즉, 회원 가입을 진행한다.

이후에 "redirect:/"를 리턴함으로써 홈 화면으로 돌아아게 한다.

코드 원리를 한번 쭉 훑어보자.

1. 홈 화면(home.html)에서 "회원 가입" 버튼을 누르면 /members/new 링크로 연결된다.

2. MemberController에서 GetMapping을 통해 매핑을 해놨기 때문에, createForm() 메서드가 실행되고,
templates - members - createMemberForm.html이 template engine을 통해 렌더링된다.

3. 해당 페이지에서 '아이디'를 적고 '등록' 버튼을 누르면 <form action="/members/new" method="post"> 코드에서

/members/new로 post 방식으로 전달한다.

4. MemberController에서 @PostMapping가 있기 때문에, 해당 어노테이션이 붙은 메서드를 실행한다.

PostMapping은 보통 데이터를 Form 같은 곳에 넣어서 전달할 때 사용하고, GetMapping는 조회할 때 주로 사용한다.

5. PostMappig으로 연결된 create 메서드가 호출이 되는데, 매개 변수로 전달된 MemberForm에 name(아이디)가
전달이 되고, 그것이 다시 create 메서드에 전달이 된다. 이 이름을 이용해 Member 객체에 이름을 설정하고, join을

진행한다.

728x90