💡 Welcome Page 만들기
저번에 빌드를 해서 localhost:8080에 접속을 해보았다. 아직 아무 파일과 코드들이 없었기 때문에 에러페이지만을 보여줬는데, 이번에는 welcome page를 만들어보자.
spring boot는 resources/static/index.html 파일을 넣으면 해당 파일을 welcome page로 만들어준다.
💡 Thymeleaf 템플릿 엔진
위에서 만든 welcome page는 html 파일 그대로를 보여주는 정적 페이지 이다.
Template engine을 사용하면 코드를 가공하여 html의 모양을 변경하는 것이 가능하다. 우리가 쓸 템플릿 엔진은 Thymeleaf 라는 템플릿 엔진이고 처음에 프로젝트 생성할때 spring web과 함께 추가했던것을 기억할 수 있다.
💡 Model & Controller를 이용한 화면
이번에는 있는 그대로의 html 파일이 아닌 Model과 Controller를 사용하여 동작하는 화면을 만들어보자.
- java / hello.hellospring 밑에 controller package를 만들어주고,
HelloController 이라는 클래스를 생성해준다.
(hello.hellospring 경로는 사람마다 상이할 수 있다.)
- HelloController에
@Controller어노테이션을 활용하여 spring이 컨트롤러임을 인식하도록 해준다. hello라는 메서드를 하나 생성하고,@GetMapping("hello")라는 어노테이션을 붙여준다. @GetMapping을 하게 되면 웹 어플리케이션에서 경로에 /hello가 붙게 되면 해당 메서드를 호출한다.
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {- 위에서 매개변수로 전달해준
Model은 MVC 패턴에서의 Model이다.
addAttribute를 이용하여 "data"에 "spring!!"라는 값을 넣어준다고 생각하면된다. 그리고 마지막에 "hello" 라는 문자열을 return 하게 되는데 이렇게 되면 resources/templates의 hello.html 을 찾으라는 의미가 된다.
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "spring!!");
return "hello";
}- 다음으로 resources/templates 경로에 hello.html 파일을 생성해준다. 두번째 줄의 thymeleaf를 스키마로 선언한 것이며, 이를 통해 thymeleaf 문법을 사용할 수 있게 된다. 아래에서
${data}라는 부분을 볼 수 있는데, 여기에 아까 값을 넣어줬던 "spring!!" 이라는 문자열을 보여달라는 의미이다. 즉, model 객체에 있는 data 라는 key 에 해당하는 value 값으로 치환하라는 의미이다.
<!DOCTYPE HTMl>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요, ' + ${data}" > 안녕하세요. 손님</p>
</body>
</html>- 이제 intelliJ로 빌드 후, a태그로 싸인 글을 누르거나 /hello 라는 경로를 붙여주면 아래와 같은 화면을 볼 수 있다.
💡 작동원리
-
웹 브라우저에서 localhost:8080/hello를 요청하면 sprig boot에 tomcat에게 요청 사항을 전달한고, tomcat은 다시 spring에게 hello 요청을 전달한다.
-
spring은 우선 helloController에 @GetMapping("hello")로 되어있는 메서드를 찾아서 실행한다. 해당 메서드에서 Model이 매개변수로 들어오는데, key는 data이고, value는 spring!! 인 attribute를 추가한 후 "hello"를 return 한다.
-
Controller에서 return 값을 문자열로 반환하면, viewResolver가 화면을 찾아준다. 이 때, view mapping 이란것이 이루어지는데, resources/templates/(해당 파일명).html 경로를 찾아주는것이다.
-
Thymeleaf 템플릿 엔진이 viewResolver가 찾아준 html 파일을 렌더링하여 웹 브라우저에 보여준다. 이 때 hello.html에
${data}라는 부분이 helloController에서 addAttribute 해준 부분의 key값이 되고, 변환된 "spring!!" 문자열이 key의 value값이 된어 웹 브라우저 화면에 spring!!으로 렌더링이 되서 보여진다.
