[Spring Framework - Thymeleaf] Thymeleaf 란?

🌿Spring/Spring Framework

[Spring Framework - Thymeleaf] Thymeleaf 란?

Boom's 2024. 1. 18. 12:50

Thymeleaf 란?

Thymeleaf는 서버 측 자바 웹 템플릿 엔진
HTML, XML, JavaScript, CSS를 처리할 수 있는 자바 템플릿 엔진
주로 웹 애플리케이션의 사용자 인터페이스를 생성 하기 위해 사용

Thymeleaf의 목표

유지 관리가 쉬운 템플릿 생성 방법을 제공

실제로 템플릿에 영향을 주지 않는
(HTML의 구조를 깨지 않고, 기존 HTML 코드를 변경하지 않고 덧붙이는 코드) 방식을 사용

Natural Templates 개념을 기반
이를 통한 디자인 팀과 개발 팀간의 갈등과 격차 해소를 기대

Thymeleaf 주요 특징

자연스러운 문법: Thymeleaf는 HTML 문서에 자연스럽게 통합되는 문법을 제공.
- 이는 HTML을 그대로 유지하면서 템플릿 엔진을 사용할 수 있도록 한다.
템플릿 재사용: 템플릿의 재사용이 간단, 프레그먼트(fragment)를 사용하여 일부 구성 요소를 분리하고 재사용할 수 있다.
다양한 컨텍스트 지원: Thymeleaf는 웹 애플리케이션의 다양한 컨텍스트에서 사용될 수 있다.
- 예를 들어, 웹 서버, 스프링 프레임워크, 스프링 부트와 같은 다양한 환경에서 사용할 수 있습니다.
서버 측 렌더링: Thymeleaf는 서버 측에서 렌더링되므로, 클라이언트 측에서 자바스크립트를 사용하지 않고도 완전한 페이지를 생성
통합 용이성: Thymeleaf는 다양한 자바 웹 프레임워크와의 통합이 잘 되어 있다.
- 특히 스프링과의 통합이 강력하며, 스프링 부트에서는 기본 템플릿 엔진으로 사용

Thymeleaf 설정

의존성 (Denpendency) 설정 - build.grad

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

Thymeleaf 기본 틀

의존성 (Denpendency) 설정 - build.grad

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="${message}">Hello, World!</h1>
</body>
</html>

XML 네임스페스의 선언 ➡️ <html xmlns:th="http://www.thymeleaf.org">

Dialect - Standard Dialect

Thymeleaf의 핵심 라이브러리는 Standard Dialect라는 dialect를 제공

프로세스가 없고, 전체적으로 다른 종류의 아티팩드들로 구성 될 수 있지만, 프로세서는 확실히 가장 일반적인 사용 사례

Standard Dialect의 대부분으 프로세서는 'Attribute Processor'이다.

이를 통해 브라우저는 단순히 추가 속성을 무시하기 때문에 처리되기 전에도 HTML 템플릿 파일을 올바르게 표시

# JSP

<input type="text" name="userName" value="${user.name}">

# Thymeleaf Standard Dialect

<input type="text" name="userName" value="Gorany" th:value="${user.name}">

Template Engine의 구성

Spring을 사용했었다면 XML또는 Java Config로 ViewResolver를 다뤄보았던 경험이 있을 것이다.

근데 스프링 부트로 넘어와서 Thymeleaf를 쓸 때, ViewResolver를 설정한 적이 없는데 resources/template 밑에 HTML 파일을 넣어두면 Controller에서 포워딩을 해준다.

Template Engine을 멤버로 갖는 어플리케이션이 초기화(생성)될 때, ServletContextTemplateResolver 객체가 생성되며, 이 templateResolver에 prefix(접두사)와 suffix(접미사)를 설정하고, Template Engine 객체를 생성해 엔진에 템플릿 리졸버를 꽂아주는 식이다.

코드를 들여다보면 대충 다음과 같다. (WEB-INF == resources)

public class GTVGApplication {
  
    
    ...
    private final TemplateEngine templateEngine;
    ...
    
    
    public GTVGApplication(final ServletContext servletContext) {

        super();

        ServletContextTemplateResolver templateResolver = 
                new ServletContextTemplateResolver(servletContext);
        
        // HTML is the default mode, but we set it anyway for better understanding of code
        templateResolver.setTemplateMode(TemplateMode.HTML);
        // This will convert "home" to "/WEB-INF/templates/home.html"
        templateResolver.setPrefix("/WEB-INF/templates/");
        templateResolver.setSuffix(".html");
        // Template cache TTL=1h. If not set, entries would be cached until expelled
        templateResolver.setCacheTTLMs(Long.valueOf(3600000L));
        
        // Cache is set to true by default. Set to false if you want templates to
        // be automatically updated when modified.
        templateResolver.setCacheable(true);
        
        this.templateEngine = new TemplateEngine();
        this.templateEngine.setTemplateResolver(templateResolver);
        
        ...

    }

}