Thymeleaf란
Java 기반의 서버 사이드 템플릿 엔진으로, Spring Boot에서 주로 사용되는 템플릿 엔진이며, HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리할 수 있는 웹 및 독립형 환경에서 사용할 수 있다. Thymeleaf는 HTML 파일을 가져와서 파싱하여 분석 후 정해진 위치에 데이터를 치환해서 웹 페이지를 생성한다.
HTML : compile 없이 클라이언트 쪽 브라우저에서 해석(파싱)해 바로 출력해 준다.
JavaScript : 브라우저 위에서 구동하므로 서버 템플릿 엔진의 손을 벗어나 제어할 수 없다.
Template Engine 이란? : 프로그램 로직을 표현하는 계층과 서비스를 사용하는 유저가 보는 데이터 출력을 위한 프레젠테이션 계층을 분리하기 위한 수단으로, Controller에서 View로 데이터를 보내면 데이터를 View에서 볼 수 있게 도와준다. mustache, thymeleaf 등이 spring을 개발하는 프로그래머들이 선호하는 template으로 알려져 있다.
클라이언트 Template Engine (CSR : Client Side Rendering) : React, Vue, AngularJS와 같이 서버에서 데이터를 전달받고 이를 통해 웹 화면을 꾸며주는 라이브러리 (혹은 프레임워크) 다. SPA(Single Page Application) 환경으로 웹 서비스를 개발하는 사례가 늘어나며 많이 사용되고 있다.
서버 지원 Template Engine :
- 프로그램 로직과 프레젠테이션 계층을 분리하기 위한 수단
- 프레젠테이션 계층에서 로직을 쉽게 표현하고, 개발의 유연성을 향상시키며 유지보수의 효율 또한 향상된다.
- 서버 템플릿 엔진 (SSR : Server Side Rendering) : 서블릿(서버)에서 동작하는 템플릿
- 템플릿 양식과 데이터를 이용해 html을 생성하여 브라우저에 전달한다.
- 정해진 템플릿 양식과 데이터가 매핑하여 html 문서를 만들어주는 SW로 그 종류는 다양하다.
JSP vs Mustache vs Thymeleaf vs FreeMarker
- JSP : 서버 지원 템플릿 엔진으로 서버에서 구동한다. 서버에서 Java 코드로 출력자료를 만든 뒤 이 문자열을 html 형식으로 변환해 브라우저로 전달한다. Spring Boot에서는 WAS에 종속적인 JSP를 더 이상 권장하지 않고 있다.
- Mustache : Spring Boot에서 공식으로 지원하는 템플릿 엔진으로 Java는 물론, 현존하는 대부분의 언어를 지원한다. JSP와 같이 html을 만들어준다. 로직코드를 사용할 수 없어 View의 역할과 서버의 역할을 명확히 분리한다. Mustache.js와 Mustache.java를 사용해 하나의 문법으로 클라이언트/서버 템플릿으로 모두 사용 가능하다.
- Thymeleaf : Spring Boot 에서 공식적으로 지원하는 템플릿 엔진이다. 스프링 진영에서 적극적으로 지원하고 있다.
- FreeMarker : Spring Boot에서 공식적으로 지원하는 템플릿 엔진이다. 대부분의 경우 HTML을 생성하는 데 필요한 모든 필수 기능을 갖추고 있으며 배우기가 더 쉽다. 그러나 템플릿에 사용자 지정 기능을 추가하려는 경우 Thymeleaf를 사용하는 것이 효과적으로 알려져있다.
Thymeleaf와 JSP의 차이점
- JSP는 서비스 처리 시 먼저 Servlet으로 변환되어 실행이 된다. 즉, JSP 코드 내에서 자바 코드를 사용할 수 있게 된다.
- JSP 와 Thymeleaf의 가장 큰 차이점은 Servlet Code로 변환되지 않는다는 점이다. 따라서 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있다.
- Thymeleaf 와 달리 JSP는 SpringBoot가 자동 설정을 지원하지 않으며 권장하지 않는다. 이유는 JSP를 사용하면 JAR 패키징을 할 수 없어 WAR 패키징을 해야한다. 물론 WAR 패키징으로도 임베디드 톰캣으로 실행할 수 있고 배포도 가능하다. 하지만 Undertow라는 최근에 만들어진 서블릿 엔진이 JSP를 지원하지 않는 등 제약사항이 있다. 또한 JSP에 대한 의존성을 넣으면 의존성 문제가 생기는 경우도 있다.
프로젝트에서 Thymeleaf 설정
1. Eclipse 에서 Spring Starter Project 로 Gradle 프로젝트를 생성하고 버전에 맞춰 환경을 설정해준다.
2. Next를 누른 후 Depedencies를 선택할 때에 Thymeleaf도 포함하여 선택해준다.
3. application.properties 파일에서 spring thymeleaf 캐시를 설정해준다.
spring.thymeleaf.cache=false
4. Thymeleaf를 사용할 HTML 파일의 상단 html에 아래 코드를 작성해야 한다.
<html xmlns:th="http://www.thymeleaf.org">
'BackEnd > Spring' 카테고리의 다른 글
| Entity 와 DTO의 개념과 차이점 (9) | 2024.11.03 |
|---|---|
| [Thymeleaf] 3. 사용 예시 (기본, 레이아웃) (7) | 2024.11.01 |
| [Thymeleaf] 2. Thymeleaf 문법 (4) | 2024.10.30 |
| Spring Annotaion 알아보기 (6) | 2024.10.23 |
| Ant, Maven, Gradle 의 차이 (5) | 2024.10.20 |