[기초] Spring Boot - thymeleaf ( 템플릿 엔진 )

https://jin2rang.tistory.com/entry/Spring-Boot-View-%EA%B8%B0%EC%B4%88-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95-thymeleaf?category=1071717

Spring Boot - Welcome Page 만들기

 

위에서 한 것처럼 index.html은 도메인에 접속하였을때 단순하게 html파일을 전달해서 보여준 방법이다.

 

여기서 템플릿 엔진을 사용하게 되면, 파일 내부를 양식에 맞게 데이터를 넣어 결과를 보여줄 수 있다.

템플릿 엔진을 사용할 라이브러리는 "thymeleaf" 이다.

 

지금은 동작 방식을 이해하는것이 목적이기 때문에 자세한 내용은 아래 사이트에서 참고하고 사용해보면 된다.

 

https://www.thymeleaf.org/

Thymeleaf

 

 

---

Controller에서 데이터를 전달하기 위해 Controller패키지를 생성하고 , Controller파일을 생성했다.

package com.jin2rang.hello.controller;

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

@Controller
public class HelloController {

	@GetMapping("hello")
	public String hello(Model model) {
		model.addAttribute("data", " Here's jin2rang blog !!");
		return "hello";
	}

}

@GetMapping의미는 HTTP메소드 중 GET으로 요청하는 것을 의미하고, URL요청할 때 컨트롤러의 메서드와 맵핑할때 사용한다.

@GetMapping("hello")라고 작성하면 /hello라고 요청했을 때  public String hello(Model model) {...} 이 부분이 동작한다.
현재 이 서버는 localhost:8080으로 실행되기 때문에 localhost:8080/hello라고 요청하면 해당 결과를 확인 할 수 있다.

 

 

templates폴더에는 hello.html을 생성한다.

<!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}">반갑습니다. Welcome!!</p>
</body>
</html>

 

<p th:text="안녕하세요.'+${data}"> 반갑습니다. Welcome!!</p>  이 부분이 thymeleaf를 적용한 부분이다.

 

${data}는 controller에서 보낸 모델의 데이터값이 동적으로 보여진다.

Controller에서 model.addAttribute("data", " Here's jin2rang blog !!"); 이렇게 코드를 작성했는데

model.addAttribute(attributeName:"data", attributeValue: " Here's jin2rang blog !!") 와 동일한 의미이다.

모델의 key는 'data'이고, 해당 값은 'Here's jin2rang blog !!'가 되는 것이다.

그래서 html화면에서 ${data}부분에 Controller에서 보내는 모델의 key를 작성하면 된다.

 

 

마지막으로, 위의 Controller 소스를 보면 return값이 "hello"이다.

return하는 hello는 templates폴더에 생성했던 hello.html의 이름이다.
(resources/templates/hello.html의 hello이름을 의미한다.)

즉, return값이 hello이니, resources/templates폴더에서 hello라는 파일을 찾고, model의 값으로 화면을 랜더링한다는 것이다. 이것은 Spring Boot가 기본적으로 동작할 수 있게 셋팅을 해놓은 것이다.

 

 

---

웹 브라우저에서 다음과 같이 확인했다!!

---

 

방금 실습해본 것을 정리해보면, 동작구조는 다음과 같다.

출처 : 인프런 - 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의노트

 

1. localhost:8080/hello로 요청

2. helloController에서 @GetMapping("hello")어노테이션이 있는 메서드와 맵핑되어 model에 data라는 key에 값을 넣어 hello와 return을 한다.

3.Spring Boot내부에 viewResolver가 resource/templates폴더에서 화면을 찾아서 처리한다.
Spring Boot 템플릿 엔진은 기본적으로 viewName을 맵핑하여 resources:templates/+{ViewName}+.html와 같이 동작한다. 그래서 hello를 return했을 때 파일을 찾아 화면을 그려주는 것이다.

4. 웹 브라우저에서 확인!

 

 

결론

1) 홈화면은 localhost를 치면 index.html과 자동 매핑된다

2) 나머지 template 안에 있는 html홈페이지들은 Controller에서

@GetMapping("hello")

return "hello"와 같은 방식으로 불러온다

 

 

reference : https://jin2rang.tistory.com/entry/Spring-Boot-thymeleaf-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%97%94%EC%A7%84