3. View 환경설정
1) thymeleaf 템플릿 엔진
- 공식 사이트 : Thymeleaf
- 예시
<table>
<thead>
<tr>
<th th:text="#{msgs.headers.name}">Name</th>
<th th:text="#{msgs.headers.price}">Price</th>
</tr>
</thead>
<tbody>
<tr th:each="prod: ${allProducts}">
<td th:text="${prod.name}">Oranges</td>
<td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
</tr>
</tbody>
</table>- 특징
- 서버 사이드 HTML 랜더링
- 백엔드 서버에서 HTML를 동적으로 렌더링하는 용도로 사용됨
- Natural Template
- 순수한 HTML을 최대한 유지하려는 특징이 있음
- 확장자도
.HTML이고 웹 브라우저에서 직접 파일을 열어도 내용을 확인할 수 있음
- 스프링 통합 지원
- 타임리프는 스프링과 자연스럽게 통합되어 스프링의 다양한 기능을 쉽게 사용할 수 있음
- 서버 사이드 HTML 랜더링
- 단점
- tag를 정확하게 매칭을 안하면 에러가 발생함
- 사용방법
- 문서 최상단에 아래와 같은 코드를 넣어서 사용
<html xmlns:th="http://www.thymeleaf.org">2) thymeleaf 실행 테스트(Template Engine)
- 스프링 부트 thymeleaf viewName 매핑
resources:templates/ +{ViewName}+ .html
- HelloController
package jpabook.jpashop;
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", "hello!");
return "hello"; // view 이름
}
}- 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}" >안녕하세요. 손님</p>
</body>
</html>- 실행확인
3) 렌더링 없이 순수 HTML 실행
- static/index.html
- 렌더링 없이 순수한 HTML을 뿌리고 싶은 경우 직접 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>
Hello
<a href="/hello">hello</a>
</body>
</html>4) 서버 재시작 없이 View 파일 변경
spring-boot-devtools라이브러리를 추가- html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경 가능해짐
implementation 'org.springframework.boot:spring-boot-devtools'- 서버 재시작 시 아래와 같이
restartedMain이라고 뜨면 제대로 설정이 된 것임
- intelliJ 컴파일 방법 : 메뉴
build>Recompile- 서버를 재시작하지 않고 새로고침만 해도 아래와 같이 View 파일이 변경되어 있음
- 서버를 재시작하지 않고 새로고침만 해도 아래와 같이 View 파일이 변경되어 있음
Backend development