인프런 - 김영한 님의 스프링 입문을 보고 공부한 것을 정리한 글입니다.
지금까지 진행 한 회원관리 예제를 웹 MVC로 개발하는 과정이다.
- 홈화면추가
- 등록
- 조회
1. 홈화면추가
- 홈 컨트롤러 추가
/controller/HomeController.java 추가
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}/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으로 접속하면 위 home.html이 뜸
근데 여기서 궁금한 점, welcomepage인 index.html은 그럼 어디감?
바로 설명 => 우선 순위가 있음. 스프링이 요청이 오면 스프링 컨테이너안에 관련 컨트롤러를 먼저 찾고 없으면 static파일을 찾도록 되어 있음.
welcomepage도 마찬가지인데, 요청이 오면 먼저 관련 controller를 찾음. 이러한 이유 때문
2. 등록
이제 회원 등록을 눌러서 양식에 맞추어 값을 입력하고 버튼을 눌러 서버로 전송해서 그 데이터를 join()하는 것을 해볼 것이다.
기존 MemberController.java에
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}생성해서 회원가입 누르면 href로 url에 /members/new가 get방식으로 들어오고
그러면 이제 다시 controller에서 연결해서 createMemberForm.html 로 연결
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>
</body>
</html>여기까지, 컨트롤러를 이용해 홈화면을 추가하고, 홈화면에서 회원등록과 회원조회를 만들어 각 href를 연결.
회원등록에 연결된 url은 또 다시 컨트롤러를 이용해서 회원등록을 위한 html과 연결했다.
이제 입력받은 양식을 이용해보자.
controller/MemberForm.java
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}여기서 name은 아까 input태그에 있는 name="name"과 연결돼서 값이 들어온다. (private이라 setName()을 통해서)
이제 또 다시 MemberController에
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/"; // 홈화면으로 돌아가도록
}이렇게 하면 /members/new 에서 Post방식으로 들어오는 값을 받아서 create 메소드가 실행된다.
여기서 매개변수 MemberForm form은 위에서 말했듯이 input태그의 name과 연결되어 저장된다.
그 name을 이용해서 회원등록한다.
http의 Get방식과 Post 방식과 form태그는 다시 공부 !
3. 회원 조회
자 그럼 위에 한것을 바탕으로 회원 조회를 위한 코드를 어떻게 짜야할까 생각해보자.
우선 /members 에 대한 컨트롤러를 만들고, 그 컨트롤러는 회원들을 보기 위한 html로 연결시키고(빠트렸는데 이때 회원정보들도 넘겨준다.),
회원들을 화면에 띄우는 html을 만들면 된다.
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";<!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>
</body>
</html>여기서 중요한 것은 렌더링 과정이다.
위에 @GetMapping("/members")로 list()가 실행되서 model에 (members:members)가 담겨져서 members/memberList.html로 넘어온다. memberList.html에서는 받은 List형 model을 th(thymeleaf):each로서 각각 가져와서 (java의 for-each) 그 객체의 id와 name을 띄운다.
참고로 현재 데이터 저장소가 Memory로 했기때문에 서버를 내렸다가 다시 열었을 경우 저장된 데이터가 모두 날라간다.
