티스토리 뷰

WEB/Template Engine

[Thymeleaf] Thymeleaf란

MAENCO 2021. 9. 1. 16:58
반응형

(참고: Spring Boot를 기준으로 작성된 글입니다)

백엔드 서버에서 HTML을 동적으로 렌더링(SSR)할 때 사용하는 Thymeleaf(타임리프)가 뭔지 살펴보고자 한다

 

Thymeleaf란

타임리프는 뷰 템플릿 엔진으로 JSP, Freemarker와 같이 백엔드 쪽에서 클라이언트에게 응답할 브라우저 화면을 만들어 주는 역할은 한다 하지만 타임리프는 기존의 템플릿 엔진과 아래와 같은 차별점이 있다

 

• 서버상에서 동작하지 않아도 된다

• 순수 HTML구조를 유지한다

 

이게 중요한 이유는 기존의 템플릿으로는 항상 서버를 구동시켜 결과물을 확인해야 하지만 타임리프의 경우 static 파일을 사용하듯 해당 내용을 브라우저에서 바로 확인할 수 있다는 장점이 있다, 이것이 가능한 이유는 타임리프가 HTML의 속성(Attribute)을 기반으로 작성되기 때문에 기존의 HTML구조를 건드리지 않기 때문이다

 

Natural Template (내추럴 템플릿)

서버를 구동하지 않으면 순수 HTML을, 서버를 구동하면 동적으로 HTML이 생성된다

이렇게 타임리프는 순수 HTML을 유지하기 때문에 내추럴 템플릿으로도 불린다

타임리프는 th:xxx와 같이 값을 치환해주는 방식을 사용하기 때문에 내추럴 템플릿이 가능하다, 예시와 같이 살펴보자

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<span th:text="${data}">문자 출력</span> //th:text를 통하여 문자 출력 -> data값으로 치환

</body>
</html>

HTML의 <span> 태그를 유지한 채 th:text를 사용하여 기존의 "문자 출력"이라는 값을 서버에서 넘어온 data값으로 치환해주는 것이다

 

Thymeleaf with Spring

또한 Spring에서도 공식적으로 Thymeleaf 사용을 권장하고 있기 때문에

타임리프를 통하여 스프링 프레임워크의 다양한 기능을 편리하게 사용할 수 있도록 지원한다

 

핵심정리

타임리프는 기존 템플릿 엔진과 다르게 순수 HTML을 유지하는 내추럴 템플릿으로서

서버를 구동하지 않고 직접 파일을 열어도 내용을 확인할 수 있고 서버를 통해 뷰 템플릿을 거치면 동적으로 HTML을 생성한다

또한 스프링 프레임워크의 다양한 기능을 편리하게 사용할 수 있도록 지원하기 때문에 스프링과 함께 사용하기 편리하다

 

 

더보기

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

https://krespo.net/152

 

 

반응형
저작자표시

'WEB > Template Engine' 카테고리의 다른 글

[Thymeleaf] Utilities (유틸리티)  (0) 2021.09.01
[Thymeleaf] Basic Objects & Convenience Objects (기본객체 & 편의객체)  (0) 2021.09.01
[Thymeleaf] Variable Expression (변수 표현식)  (0) 2021.09.01
[Thymeleaf] Text & Escape (텍스트 표현 & 이스케이프)  (0) 2021.09.01
[TEMPLATE-JSP] JSP (Java Server Page)의 이해  (0) 2021.08.03
댓글