여씨의 개발이야기

[Thymeleaf 입문] Thymeleaf란? 본문

🐾 Programming Lang/🍃 Thymeleaf

[Thymeleaf 입문] Thymeleaf란?

yeossi 2022. 6. 8. 13:45

이번 프로젝트에서 JSP가 아닌 Thymeleaf를 도입할 예정이라는 소식을 듣고 레퍼런스를 열심히 읽어보고 있다. 문서에 나와있는 내용들을 간단히 정리해보고자 한다.

1. Thymeleaf란?

Thymeleaf란 자바 라이브러리이다. 이것은 XML/XHTML/HTML5 템플릿 엔진이며 애플리케이션에서 생성된 데이터 또는 텍스트를 표시하기 위해 템플릿 파일에 변환된 것을 적용할 수 있다.

Thymeleaf의 주 목표는 템플릿을 만들 때 엘레강스하고 잘 구성된 방법을 우리들에게 제공하는 것이다. 이를 달성하기 위해서는 템플릿 내부 코드로 해당 로직을 명시적으로 작성하지 않고 DOM(Document Object Model)에서 사전 정의된 로직의 실행을 정의하는 XML 태그 및 속성을 기반으로 한다.

이 아키텍처는 실행 중에 가능한 최소한의 I/O 작업을 사용하기 위해 구문 분석된 파일의 지능적인 캐싱에 의존하여 템플릿의 빠른 처리를 허용한다.

마지막으로 Thymeleaf는 처음부터 XML 및 웹 표준을 염두에 두고 설계되었으므로 필요한 경우 완전한 유효성 검사 템플릿을 생성할 수 있다.

https://www.thymeleaf.org/

 

Thymeleaf

Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati

www.thymeleaf.org

 

2. Thymeleaf 특징

  • 서버 사이드 HTML 렌더링(SSR) : 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다. 
  • 네츄럴 템플릿 : 타임리프는 순수한 HTML을 최대한 유지하려는 특징이 있으며, 이러한 특징이 JSP와 가장 큰 차이점으로 볼 수 있다. 타임리프로 작성한 파일은 확장자가 .HTML이며 브라우저에서 파일을 직접 열어도 내용이 확인 가능하다. 당연히 이렇게 열어볼 경우 동적인 결과 렌더링은 되지 않는다.
  • 스프링 통합 지원 : 타임리프는 스프링과 자연스럽게 통합되어있어 스프링의 다양한 기능을 쉽게 사용할 수 있다. 

 

3. 사용법

타임리프는 문서 제일 상단에 아래와 같은 코드를 넣어서 사용할 수 있다. 

<html xmlns:th="http://www.thymeleaf.org">

 

4. 문법


- 간단한 표현
변수 표현식: ${...}
선택 변수 표현식: *{...}
메세지 표현식: #{...}
링크 URL 표현식: @{...}
조각 표현식: ~{...}


- 리터럴
텍스트: 'one text', 'Anothr one!', ...
숫자: 0, 34, 3.0, 12.3, ...
불린: true, false
널: null
리터럴 토큰: one, sometext, main, ...

- 문자 연산
문자 합치기: +
리터럴 대체: | The name is ${name}|

- 산술 연산
Binary operators: +, -, *, /, %
Minus sign (unary operatior): -

- 불린 연산
Binary operators: and, or
Boolean negation (unary operator): !, not

- 비교와 동등
비교: >, <, >=, <= (gt, lt, ge, le)
동등 연산: ==, != (eq, ne)

- 조건 연산
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

- 그 외
No-Operation: _

Comments