티스토리 뷰

Skill/html js css

thymeleaf

진열사랑 2025. 8. 19. 21:48

🔹 Thymeleaf (타임리프)

1. 개요

Thymeleaf는 서버 사이드 자바 템플릿 엔진으로, HTML, XML, JavaScript, CSS, 텍스트 등을 템플릿으로 사용할 수 있습니다.
주로 Spring MVC / Spring Boot와 함께 사용되며, JSP를 대체하는 목적으로 많이 선택됩니다.

2. 핵심 철학

🟢 Natural Template

순수 HTML 파일이 브라우저에서 열려도 정상적으로 보입니다.
예를 들어, JSP는 <%= %> 같은 코드 때문에 디자이너가 HTML을 직접 열어보면 깨지지만, Thymeleaf는 th:text, th:if 같은 속성만 추가되므로 여전히 HTML로 렌더링이 가능합니다.
→ 즉, 개발자 + 디자이너 협업에 적합합니다.

3. 주요 기능

(1) 표현식(Expressions)

변수 표현: ${...}
선택 표현: *{...} (현재 객체를 기준으로 접근)
URL 링크 표현: @{...}

예:

<p th:text="${user.name}">홍길동</p>
<a th:href="@{/user/{id}(id=${user.id})}">상세보기</a>

(2) 조건 처리

<p th:if="${user.active}">활성 사용자입니다.</p>
<p th:unless="${user.active}">비활성 사용자입니다.</p>

(3) 반복 처리

<ul>
  <li th:each="item : ${items}" th:text="${item}">아이템</li>
</ul>

(4) 속성 치환

HTML 태그 속성도 동적으로 바꿀 수 있습니다.

<img th:src="@{${user.profileImage}}" alt="프로필"/>

(5) Fragment (공통 레이아웃 관리)

헤더/푸터 같은 공통 UI를 따로 정의하고 재사용할 수 있습니다.

<!-- header.html -->
<div th:fragment="header">
  <h1>사이트 헤더</h1>
</div>

<!-- main.html -->
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:replace="header :: header"></div>
    <p>메인 페이지 내용</p>
  </body>
</html>

사이트 헤더

메인 페이지 내용

4. Spring Boot와의 통합

spring-boot-starter-thymeleaf 의존성 추가:

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

기본적으로 src/main/resources/templates 폴더에 있는 .html 파일을 View로 사용합니다.

Controller 예시:

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("name", "홍길동");
        return "hello"; // → templates/hello.html 렌더링
    }
}

5. 장점과 단점

✅ 장점

자연스러운 HTML → 협업 효율성 ↑
Spring과 강력한 통합 → Model 데이터 바로 렌더링
JSP 대비 러닝커브 낮음
다양한 템플릿 기능 (반복, 조건, 레이아웃 등)

❌ 단점

서버 사이드 렌더링(SSR)이므로, SPA(React/Vue)와 같은 동적인 클라이언트 렌더링에 비해 유연성은 떨어짐
화면이 많은 대형 서비스에서는 템플릿 관리가 복잡해질 수 있음

6. 요약

Thymeleaf는 서버에서 HTML을 만들어 보내는 SSR 템플릿 엔진
JSP보다 자연스럽고 협업에 좋음
Spring Boot와 결합 시 Model → HTML 템플릿 렌더링 구조로 동작
중소 규모의 관리자 페이지, 기업 내부 시스템, 전통적인 웹 서비스에서 많이 사용됨

저작자표시 비영리 (새창열림)

'Skill > html js css' 카테고리의 다른 글

Invariant Violation: Expected drag drop context (0)	2025.07.19
클라이언트가 저장한 쿠키를 읽으려면 (1)	2025.07.17
web worker (2)	2025.07.14
React.memo와 useMemo (0)	2025.06.24
react] typescript: field as keyof typeof updated[number] (1)	2025.06.23

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/01 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

exhibitlove

티스토리 뷰

thymeleaf

🔹 Thymeleaf (타임리프)

1. 개요

2. 핵심 철학

🟢 Natural Template

3. 주요 기능

(1) 표현식(Expressions)

(2) 조건 처리

(3) 반복 처리

(4) 속성 치환

(5) Fragment (공통 레이아웃 관리)

사이트 헤더

4. Spring Boot와의 통합

5. 장점과 단점

✅ 장점

❌ 단점

6. 요약

'Skill > html js css' 카테고리의 다른 글

티스토리툴바