타임리프(Thymeleaf)
- View Template(뷰 템플릿): 컨트롤러가 전달하는 데이터를 이용하여 동적 화면 구성
- *.html 확장자 사용
- HTML 문법으로 JAVA 데이터를 처리
- html태그를 기반으로 th:속성을 이용하여 동적인 View를 제공
- 타임 리프에서는 JSP의 스크립트릿은 사용할 수 없고, 대신 같은 기능을 하는 ${}과 같은 표현식을 사용 가능
Thymeleaf 디펜던시 추가
Maven(pom.xml)
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>Gradle(build.gradle)
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' }
Thymeleaf 설정 / prefix, suffix 정의
application.properties
# 정적 리소스 변화 시 바로 반영
# Whether to enable a livereload.com-compatible server.
spring.devtools.livereload.enabled=true
# thymeleaf 참조 경로 (reference path)
# Prefix that gets prepended to view names when building a URL.
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
# 캐시 설정, thymeleaf에 대한 캐시를 남기지 않음, 수정사항 바로 반영, cache=false 설정(운영시는 true),
# Whether to enable template caching.
spring.thymeleaf.cache=false
# templates 디렉토리에 파일이 있는지 없는지 체크, 없으면 에러를 발생
# 템플릿 존재 여부 확인
# Whether to check that the templates location exists.
spring.thymeleaf.check-template-location=true타임리프 템플릿 파일 위치 기본값 : /src/main/resources/templates (prefix로 수정 가능)
타임리프 설정 문서
https://docs.spring.io/spring-boot/docs/current/reference/html/application-properties.html
Common Application Properties
docs.spring.io
레이아웃 정의
- src/main/resources의 templates 패키지 안에 view 파일을 생성
- static 폴더에는 js, css등과 같이 변하지 않는 파일들을 관리
- templates 폴더 아래, layout 패키지 생성 후, 그 안에 default_layour.html 파일 생성
- 레이아웃은 head, header, content, footer로 구현
- html 태그에 xmlns 속성으로 타임리프 적용해서 타임리프 문법 사용 가능
resources/templates/layout/default_layout.html
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!--/* 여기에 각 view가 위치 */-->
<th:block layout:fragment="head"></th:block>
<div>
<div layout:fragment="header"></div>
<div layout:fragment="content"></div>
<div layout:fragment="footer"></div>
</div>
</html>
공통 레이아웃(header, footer)
resources/templates/common/header.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div class="footer"> <h2>Footer</h2> </div>
</html>resources/templates/common/footer.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div class="footer"> <h2>Footer</h2> </div>
</html>resources/templates/common/home.html
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<th:block layout:fragment="head">
<title>Spring Boot</title>
<!--/* css */-->
<link th:href="@{/css/common.css}" rel="stylesheet" />
</th:block>
<body>
<th:block layout:common="header" th:include="@{/common/header}"></th:block>
<div layout:common="content" class="content">
<h2>This is Content</h2>
</div>
<th:block layout:common="footer" th:include="@{/common/footer}"></th:block>
</body>
</html>
head, header, content, footer 요소 명 <th:block layout:디렉토리="요소 명"></th:block>
controller 파일을 추가
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@RequestMapping("/") //localhost
@Controller
public class MainController {
@RequestMapping("/index") // localhost/index 로 요청이 들어오면
public String index() {
return "index"; // 실제 호출될 파일 이름
}
}
Thymeleaf 기본사용
1) 변수식 방식 ${}
2) 메세지 방식 #{}
3) 객체변수식 *{}
4) 링크 방식 @{}
'JAVA > spring' 카테고리의 다른 글
| @Valid 비밀번호 유효성 검사 (0) | 2022.06.03 |
|---|---|
| javax.validation 패키지 | spring-boot-starter-validation (0) | 2022.04.16 |
| lombok(롬복) 설치 및 적용 (0) | 2022.03.24 |
| Spring directory 구조 (0) | 2022.03.12 |
| 스프링 프로젝트 생성 (이클립스) (0) | 2021.12.24 |