Web/Thymeleaf

[Thymeleaf] 01. Hello Thymeleaf

이번 포스트에서는 Thymeleaf의 특성과 기본적인 개발 환경설정에 대해 알아보자.

Thymeleaf란?

Good Bye JSP~

그동안 자바 진영에서 Dynamic Web Application을 만들 때에는 MVC 디자인 패턴에서 Controller를 Servlet이 담당하고 View를 JSP가 담당하는 구조가 상당히 장기간 유지 되었다. Servlet의 위치는 여전히 확고하지만 JSP의 위치는 예전만 못하다.

대부분 웹 애플리케이션이 가뜩이나 CSR 기반의 SpringBoot 앱으로 개발되는 과정에서 그렇잖아도 SSR용 템플릿 엔진의 사용이 줄어드는 추세인데 JSP가 SpringBoot의 추천 템플릿 엔진에서 제외되면서 이젠 쓰면 안되나보다 하는 인식이 점점 강해지게 되었다.

JSP는 안되고 Thymeleaf는 되는 이유

JSP가 퇴출되는 가장 큰 이유 중 하나는 디자이너와의 협업의 어려움에 있다. JSP는 결국 서버 단에서 servlet으로 변경된 후 동작하게 된다. 즉 JSP가 동작하기 위해서는 서버까지 잘 구성된 개발 환경이 필요하다는 이야기이다. 단순히 "Hello가 빨간색으로 출력되는 페이지"를 디자인 해야 하는 상황에서 테스트를 위해 서버까지 구동시켜야 한다면 상당히 번거러운일이다.

예를 들어 다음과 같은 코드를 생각해보자. 당연히 이 파일은 XX.jsp의 일부이다.

<h1>Hello JSP</h1>

이 내용은 평범한 HTML이지만 실제 동작시켜보기 위해서는 확장자가 jsp이므로 서버를 통해서 servlet으로 변경한 후에나 가능하다.

반면 Thymeleaf는 그냥 일반 HTML에 사용자 정의 속성을 이용해서 부가적인 내용을 작성한다. 이 사용자 정의 속성은 HTML의 표준이 아니고 브라우저는 비표준의 속성들은 가볍게 무시하기 때문에 브라우저가 실행할 때는 아무런 영향을 주지 않는다. 다만 서버에서 실행된다면 사용자 정의 속성의 내용이 html 내용을 대체하게 된다.

예를 들어 다음과 같은 코드를 생각해 보자. 여기서 th:text는 사용자 정의 속성이다.

<h1 th:text="${msg}">여기에 메시지가 출력됨</h1>

이 코드를 서버의 개입 없이 그냥 탐색기에서 실행했을 때는 th:text는 모르는 내용이기 때문에 단순히 <h1>여기에 메시지가 출력됨</h1>이 출력된다. 이 것만으로도 디자이너가 작업하기에는 충분하다.

하지만 서버에서 동작한다면 ${msg}의 내용이 h1태그의 내용으로 대체되어 <h1>서버 메시지</h1>형태로 출력된다.

이처럼 디자인 작업과 서버 작업이 분리될 수 있다는 점은 JSP와 비교되는 Thymeleaf의 아주 매력적인 장점이다.

여기 다른 템플릿 엔진들도 있어요~~

물론 JSP의 대안이 Thymeleaf만 있는 것은 아니다. mustache나 Freemarker 등이 있는데 각각의 장단점들을 비교한 글들을 읽어보는 것도 도움이 될 수 있다.

https://springhow.com/spring-boot-template-engines-comparison/

FreeMarker vs Groovy vs Mustache vs Thymeleaf

In this post, we will try to compare FreeMarker vs Groovy vs Mustache vs Thymeleaf with examples. Spring Boot supports FreeMarker, Groovy, Mustache and

springhow.com

다들 장단점이 있지만 전반적으로 Thymeleaf가 유용하다는게 위 정리 내용의 골자이다. 그래서 우리는 Thymeleaf를 공부해보자.

Thymeleaf의 첫 걸음

플러그인 설치

자동 설정을 통해 Thymeleaf를 위한 code assist를 받고 싶다면 다음의 플러그인을 [Eclipse Marketplace]에서 검색해서 설치해주자.

프로젝트 구성

SpringBoot 애플리케이션을 구성하면서 Template Engine으로 Thymeleaf를 선택해주면 기본적인 프로젝트 구성은 완료된다.

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

설정

Thymeleaf는 SpringBoot에서 공식으로 지원하는 Template Engine이므로 자동 설정을 사용하면 거의 손볼 내용이 없다. 다음은 기본으로 적용되는 속성의 내용 들이다.

spring:
  thymeleaf:
    prefix: classpath:/templates   # default
    suffix: .html                  # default
    cache: false

prefix와 suffix는 default를 그대로 사용하면 된다. 따라서 파일은 src/main/resources/templates하위 경로에 .html 형태로 작성한다. cache 속성은 기본이 true이다. 개발 과정에서는 cache를 사용하지 않는 것이 유리하므로 false로 설정 후 사용하자.

HelloThymeleaf

이제 간단히 thymeleaf 파일을 생성하고 설정을 확인해보자. templates에 welcome file인 index.html 을 작성하고 애플리케이션을 실행해보자.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
  <h1 th:text="'이게 보이면 Thymeleaf'">이게 보이면 그냥 HTML</h1>
</body>
</html>

thymeleaf 파일을 만들려면 html 태그에 xmlns:th="http://www.thymeleaf.org">를 추가해준다. 그리고 내용을 출력할 태그에 th:XX에 해당하는 custom tag를 이용해서 값을 주면 된다. 만약 위와 같이 작성하고 앱을 실행했을 때 [이게 보이면 그냥 HTML]이 출력되면 설정 실패, 그렇지 않고 [이게 보이면 Thymeleaf]가 출력되면 설정 성공이다.

저작자표시 비영리 변경금지

'Web > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 06. inline style (1)	2024.01.14
[Thymeleaf] 05.레이아웃 재사용 (0)	2024.01.14
[Thymeleaf] 04. 레이아웃 (0)	2023.12.14
[Thymeleaf] 03. 제어문 (0)	2023.12.14
[Thymeleaf] 02. 표준 표현식 (0)	2023.12.10

Contents

새소식