*김영한 | 스프링 입문 - 코드로 배우는 스프링 부트, 웹 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..
'back-end > 김영한 | 스프링 입문' 카테고리의 다른 글
| 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 |
