Welcome Page
스프링 부트가 제공하는 기능 중에 Welcome Page가 있습니다.
resources - static - index.html 파일을 만들면 이 파일은 Welcome page 기능을 하게 됩니다.
즉, 이 파일은 localhost:8080에 들어가면 나오는 첫 화면이 되는 것입니다.
정적 컨텐츠
웹 브라우저에서 localhost:8080 요청이 들어오면 스프링 컨테이너에서 먼저 찾고, 없으면 그 다음에 resources: static(정적 컨텐츠) 에서 찾습니다.
HelloController에 매핑된 부분이 없다면 resources: static에서 index.html 파일을 찾게 되겠지만, HelloController에 매핑된 부분이 있다면 resources: static는 찾지 않습니다.
찾는 순서가 첫 번째는 스프링 컨테이너, 두 번째가 resource: static (정적 컨텐츠)이기 때문입니다.
즉, 컨트롤러가 정적 파일보다 우선순위가 높습니다!
홈 화면
< HomeController >
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}위의 코드를 보면 요청이 들어왔을 때 가장 먼저 찾는 HelloController에 매핑 된 부분이 있으니 이것이 호출되고, 정적 resources에 있는 것들은 무시가 됩니다. 따라서 return 의 home.html이 보여질 것입니다.
등록
< MemberController >
@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:/";
}url 을 localhost:8080/members/new로 들어오면 @GetMapping에 매핑이 됩니다. 따라서 return이 템플릿에서 members 디렉토리에 있는 createMemberForm.html로 가는 것을 알 수 있습니다.
< createMemberForm.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>input 태그를 자세히 뜯어보면, type="text"는 text를 입력할 수 있는 박스를 만든 것이고 name="name"은 서버로 넘어올 때의 key가 됩니다. 따라서 등록 버튼을 누르면 form 태그에 있는 "/members/new" 로 post 형식으로 보내집니다.
따라서 위의 MemberController에서 @PostMapping에 매핑이 되어 해당 메소드가 호출됩니다. @PostMapping 부분을 보면 데이터를 전달 받는 객체가 MemberForm 으로 받고 있습니다. 이는 MemberForm 객체를 따로 생성하여 이 객체를 통해 데이터를 받는 것입니다.
< MemberForm >
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}조회
< MemberController >
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}< 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라는 템플릿 엔진이 동작을 하는데 컨트롤러에서 model 로 넘어온 "members" 안에는 모든 회원이 리스트로 담겨있습니다. 따라서 th:each="member : ${members}" 를 통해 모든 회원이 반복을 돌면서 th:text를 통해 id와 name을 출력하는 것입니다.
이렇게 간단한 예시로 웹 MVC 인 Model, View, Controller에 대해 공부해보았습니다.
