소개
Thymeleaf는 자바 웹 및 독립형 환경에서 HTML, XML, JavaScript, CSS 및 텍스트를 처리하는 데 사용되는 서버 측 Java 템플릿 엔진입니다. 다음은 Thymeleaf의 장점입니다.
템플릿 엔진이란?
템플릿 엔진은 서버 측에서 동적으로 HTML, XML, JSON 등의 문서를 생성하는 소프트웨어입니다. 템플릿 엔진을 사용하면 페이지에 동적으로 데이터를 추가하거나 UI를 동적으로 수정할 수 있습니다.
- 간단한 구문
- 다양한 태그 속성 지원 및 확장 가능성
- 다국어 처리가 용이함
Thymeleaf 사용하기
Thymeleaf는 다양한 방법으로 사용할 수 있습니다. 가장 일반적인 방법은 Spring Framework와의 통합입니다. Spring Boot 프로젝트에서는 Starter 종속성을 추가하면 간단하게 Thymeleaf를 사용할 수 있습니다. 다음은 Spring Boot에서 Thymeleaf를 사용하는 예입니다.
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head>
<meta charset="UTF-8" />
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${title}">Page Title</h1>
<p th:text="${message}">Page Message</p>
</body>
</html>Thymeleaf 확장
Thymeleaf는 다양한 확장 기능을 제공합니다. 다음은 Thymeleaf 확장의 예시입니다.
1) Layout Dialect : 레이아웃 작업을 간소화하는 데 사용됩니다.
Layout Dialect는 Thymeleaf에서 제공하는 확장 기능 중 하나로, 레이아웃 작업을 간소화하는 데 사용됩니다.
다음은 Layout Dialect를 사용한 예시입니다.
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>"
xmlns:layout="<http://www.ultraq.net.nz/thymeleaf/layout>">
<head>
<meta charset="UTF-8" />
<title>Thymeleaf Example</title>
<link rel="stylesheet" th:href="@{/css/style.css}" />
<script th:src="@{/js/script.js}"></script>
</head>
<body>
<header layout:fragment="header">
<h1>Header</h1>
</header>
<div layout:fragment="content">
<p>Content</p>
</div>
<footer layout:fragment="footer">
<p>Footer</p>
</footer>
</body>
</html>위 예시에서는 layout:fragment 속성을 사용하여 레이아웃을 구성하고 있습니다. layout:fragment 속성은 레이아웃의 각 부분을 나타내며, 레이아웃을 구성하는 페이지에서는 layout:include 속성을 사용하여 layout:fragment를 포함시킵니다. 다음은 layout:include를 사용한 예시입니다.
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>"
xmlns:layout="<http://www.ultraq.net.nz/thymeleaf/layout>">
<head>
<meta charset="UTF-8" />
<title>Thymeleaf Example</title>
<link rel="stylesheet" th:href="@{/css/style.css}" />
<script th:src="@{/js/script.js}"></script>
</head>
<body>
<header layout:fragment="header">
<h1>Header</h1>
</header>
<div layout:fragment="content">
<p>Content</p>
</div>
<footer layout:fragment="footer">
<p>Footer</p>
</footer>
<div layout:include="~{layout :: content}" />
</body>
</html>위 예시에서는 layout:include 속성을 사용하여 layout :: content를 포함시켰습니다. layout :: content는 Layout Dialect에서 정의한 레이아웃의 일부분을 의미합니다. ~{} 구문은 Thymeleaf에서 제공하는 URL 템플릿 구문으로, layout :: content는 layout.html 파일에서 정의된 content 블록을 의미합니다.
2) Spring Security Dialect : Spring Security와 통합하여 보안 태그를 제공합니다.
Spring Security Dialect는 Spring Security와 통합하여 보안 태그를 제공하는 Thymeleaf 확장 기능 중 하나입니다. 다음은 Spring Security Dialect를 사용한 예시입니다.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>"
xmlns:sec="<http://www.thymeleaf.org/extras/spring-security>">
<body>
<nav>
<ul>
<li sec:authorize="isAuthenticated()">
<a href="/profile" th:href="@{/profile}">Profile</a>
</li>
<li sec:authorize="!isAuthenticated()">
<a href="/login" th:href="@{/login}">Login</a>
</li>
<li sec:authorize="isAuthenticated()">
<form th:action="@{/logout}" method="post">
<input type="submit" value="Logout" />
</form>
</li>
</ul>
</nav>
</body>
</html>위 예시에서는 sec:authorize 속성을 사용하여 인증된 사용자만이 접근 가능한 메뉴를 제공하고 있습니다. isAuthenticated() 함수는 Spring Security에서 제공하는 함수로, 인증된 사용자인지 여부를 판별합니다.
3) Data Attribute Dialect : data-* 속성을 사용하여 데이터를 처리하는 데 사용됩니다.
Data Attribute Dialect는 Thymeleaf 템플릿 엔진에서 제공하는 확장 기능 중 하나로, data-* 속성을 사용하여 데이터를 처리할 수 있습니다. 다음은 Data Attribute Dialect를 사용한 예시입니다.
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>"
xmlns:data-th="<http://www.thymeleaf.org/extras/dataattribute>">
<head>
<meta charset="UTF-8" />
<title>Thymeleaf Example</title>
</head>
<body>
<input type="text" data-th-field="*{firstName}" />
<input type="text" data-th-field="*{lastName}" />
</body>
</html>
위 예시에서는 data-th-field 속성을 사용하여 폼 데이터를 처리하고 있습니다. *{firstName}과 *{lastName}는 Thymeleaf의 폼 바인딩 기능을 사용하여 처리됩니다.
4) 다국어처리 용이성
Thymeleaf는 국제화를 지원하며, th:text 대신 th:text="#{message.key}"와 같이 메시지 키를 사용하여 다국어 처리를 할 수 있습니다. 메시지 파일은 messages.properties 또는 messages_{언어코드}.properties와 같은 형식으로 작성할 수 있습니다. 다음은 예시입니다.
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head>
<meta charset="UTF-8" />
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="#{page.title}">Page Title</h1>
<p th:text="#{page.message}">Page Message</p>
</body>
</html>messages.properties 파일에는 다음과 같이 메시지를 작성할 수 있습니다.
page.title=페이지 제목
page.message=페이지 메시지예시에서는 #{page.title}과 #{page.message}를 사용하여 다국어 처리를 하고 있습니다.
Thymeleaf는 간단한 구문, 다양한 확장 기능, 다국어 처리, Spring Framework와의 완벽한 통합 등 많은 장점을 가지고 있습니다. 이러한 장점들로 인해 Thymeleaf는 현재 많은 개발자들에게 인기 있는 서버 측 Java 템플릿 엔진 중 하나입니다.
'Backend > Thymeleaf' 카테고리의 다른 글
| Thymeleaf로 Ajax요청보내기 (0) | 2023.11.02 |
|---|---|
| 쉽게 알아보는 Spring Thymeleaf란? (1) | 2023.11.01 |
| [Thymeleaf]게시판 Table에서 Paging 적용하기(SpringBoot) (2) | 2020.08.04 |
| [Thymeleaf]ajax 사용법 및 예제(SpringBoot) (7) | 2020.07.23 |
| [Thymeleaf]Layout을 이용해 화면 구성하기(SpringBoot) (0) | 2020.07.22 |
