8w8u8

5. 회원 관리 예제(웹 MVC 개발) [김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술] 본문

강의/김영한 | 스프링 입문

5. 회원 관리 예제(웹 MVC 개발) [김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술]

jud1th 2023. 3. 6. 23:07

 

 

*김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의를 참조한 글입니다.

 

 

저번 시간에는 멤버 컨트롤러를 만들고, 의존관계 주입을 하였다. 

이번 시간에는 멤버 컨트롤러를 통해 회원을 등록하고, 조회하는 기능을 넣어보자.

 

이번시간의 전체 파일 구성은 다음과 같다. 

 

1. 회원 웹 기능 - 홈 화면 추가

1-1. HomeController.java

'src - main - java - hellospring.hellospring - controller' 패키지에 HomeController 클래스를 생성하고, 아래의 코드를 작성한다.

 

package hellospring.hellospring.controller;

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

@Controller
public class HomeController {

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

}

 

<코드 설명>

@Controller
public class HomeController {
}

우리는 웹 MVC 방식을 통해 기능을 구현할 것이니 컨트롤러가 필요하다.

@Controller를 상단에 써주었다.

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

엇.. 이건 했던 기억이... (기억 안 나면 여기를 클릭)

localhost:8080/ 로 요청될 경우 home(resources/templates/home.html)을 반환하라는 뜻이다.

그러려면 home.html을 만들어줘야겠지??

 

 

1-2. home.html

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

</body>
</html>

 

 

<실행결과> 도메인네임 : localhost:8080

 

 

회원 가입, 회원 목록을 클릭하면 에러페이지가 뜬다. 

아직 해당 페이지들을 안 만들었기 때문이다. 

2. 회원 웹 기능 - 등록

2-1. MemberController.java(1)

이제 회원 가입 페이지를 만들어 연결시켜주자.

MemberController.java에 다음의 코드를 추가한다.

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

또다시 @GetMapping... 바로 위에서 한 것이니 무슨 의미인지 알것이다.

localhost:8080/members/new로 요청될 경우 members/createMemberForm을 반환하라~

 

 

전체 코드는 다음과 같다.

package hellospring.hellospring.controller;

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

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

 

 

 

2-2. 회원 등록 폼 HTML

이제 다음은 뭘 해야할까?? 

반환될 members/createMemberForm를 만들어줘야할 차례이다.

'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 action="/members/new" method="post">

form 태그를 사용하여, 웹 페이지에서 값을 입력받는다.

메서드는 post방식(@PostMapping)을 선택했다.

 

 

 

<실행 결과>

아까와 달리, 이제 '회원 가입'을 누르면 위와 같은 페이지로 이동한다.

이제 회원 가입 페이지의 껍데기만 만든 셈이다.

이름을 등록하려하면 오류가 난다.

 

 

2-3. MemberController.java(2)

2-3-1.

이제 회원 가입 페이지로부터 데이터를 전달받을 폼 객체의 클래스를 만들어볼 것이다.

'src - hellospring.hellospring - controller'패키지에 Memberform.java를 생성한다.

 

다음의 코드를 입력한다.

*window기준 단축키 alt + insert -> getter setter를 통해 코드를 빠르게 불러올 수 있다.

package hellospring.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

 

 

2-3-2.

다음으로, MemberController.java에 다음의 코드를 추가한다.

    @PostMapping("/members/new")
    public String create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName());
        
        memberService.join(member);
        
        return "redirect:/";

 

 

 

<코드 설명>

더보기

*Get방식과 Post방식의 차이

GET 방식 : 어떠한 정보를 가져와서 조회할 때 주로 사용되는 방식
  • URL에 변수를 포함시켜 요청한다. => 보안에 취약하다.
  • 데이터를 header를 포함하여 전송한다.
POST 방식: 데이터를 추가, 수정할 때 주로 사용되는 방식
  • URL에 변수를 노출하지 않고 요청한다. => 기본 보안이 설정되어 있다.
  • 데이터를 Body에 포함시킨다.

즉, 회원 등록을 @GetMapping으로 진행하면 URL에 아이디, 비밀번호, 이름이 노출될 것이다.  대참사다.

그래서 @PostMapping을 통해 데이터를 전달받고 회원 등록을 진행한다.

사용자인 나는 "오즈"라는 이름을 등록했다.

그 후 스프링은 어떤 과정을 통해 입력받은 데이터를 추가할까?

    @PostMapping("/members/new")

Post 방식을 통해 /members/new으로부터 값(오즈)을 받아서

    public String create(MemberForm form) {
        Member member = new Member();

MemberForm을 create해준다.

 <input type="text" id="name" name="name" placeholder="이름을
입력하세요">

createMemverForm.html를 보면 이런 코드가 있다.

name="name"

 

입력받은 이름값(오즈)을 "name"에 넣어준다는 의미이다.

 

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

Memberform.java에 이런 코드가 있다.

name이 private하게 선언되었기 때문에

스프링은 setName을 통해 name에 입력값(오즈)을 넣어준다.

        member.setName(form.getName());

다시 MemberController.java의 코드로 돌아온다.

getName으로 form에서 입력값(오즈)을 가져온다.

        memberService.join(member);

member객체를 memberService.join에 넣음으로써 회원가입 완료!

        return "redirect:/";

회원가입이 끝났으면 home화면으로 돌아간다.

 

 

 

 

지금까지의 MemberController.java의 전체 코드는 다음과 같다.

package hellospring.hellospring.controller;

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

@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 create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
    }
}

 

 

 

 

3. 회원 웹 기능 - 조회

3-1.MemberController.java

이제 등록한 회원 오즈를 조회하는 기능을 추가해보자.

MemberController.java에 다음의 코드를 추가한다.

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

 

 

<코드 설명>

@GetMapping("/members")

localhost:8080/members에서 Get방식으로 값을 받아와서

 List<Member> members = memberService.findMembers();

findMembers()를 사용하여 멤버를 가져오고, 가져온 멤버를 List에 담는다.

 model.addAttribute("members", members);

model.addAttribute("key", "value") : 해당 메서드를 통해 key, value의 쌍으로 view에 데이터를 전달한다.

 return "members/memberList";

members 패키지 하위의 memberList.html을 반환한다.

 

 

3-2. memberList.html

이제 해야할 일은?

반환될 memberList.html을 templates패키지 하위에 만들어주기~

 

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

 

 

 

<실행 결과>

회원 조회 기능을 통해 오즈라는 회원이 잘 등록됐음을 확인할 수 있다.

 

 

 

*오즈는 우리집 강아지다.

이번 시간에는 데이터를 메모리에 저장하는 방식으로 회원 등록과 조회 기능을 구현했다.

그러나 이렇게 할 경우 서버를 내렸다가 다시 켜면 모든 데이터가 사라진다는 문제점이 있는데, 

해결 방법은 다음 시간에 다루도록 하겠다.

Bye..

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'강의 > 김영한 | 스프링 입문' 카테고리의 다른 글

Spring에서 MySQL 연결하기  (0) 2023.08.04
6. 스프링 DB 접근 기술 [김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술]  (1) 2023.03.07
4. 스프링 빈과 의존관계 [김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술]  (0) 2023.02.20
3. 회원 관리 예제(백엔드 개발) [김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술]  (3) 2023.01.29
2. 스프링 웹 개발 기초 [김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술]  (1) 2023.01.28
'강의/김영한 | 스프링 입문' Related Articles more