2024. 4. 4. 14:13ㆍ개발공부
Thymeleaf란?
JSP, Freemarker 와 같은 '템플릿 엔진'의 일종이며, html 태그에 속성을 추가해 백엔드 서버에서 페이지에 동적으로 값을 추가하거나 처리할 수 있다.
타임리프를 통해 속성을 대체할 수 있는데, 아래 예제를 살펴보자.
<input type="text"
value="test"
th:value="${item}"> <!--th:value 타임리프의 문법을 이용해 value 설정-->
input 태그는 th:value를 통해 item이라는 변수에 값이 존재하면 해당 값을 세팅해준다.
만약 item이 존재하지 않으면 value="test"를 통해 "test"라는 문자열을 세팅해준다.
(= th:xxx가 붙은 부분은 서버 사이드에서 렌더링 되어 기존 것을 대체하고, th:xxx이 없으면 xxx 속성이 그대로 사용)
타임리프를 통해 렌더링 된 html 페이지를 열어도 웹 브라우저는 th: 속성을 알지 못한다.
🔻 템플릿 엔진이란?
: 지정된 템플릿 양식과 데이터가 합쳐져 html 문서를 출력하는 소프트웨어.
크게 서버 템플릿 엔진과 클라이언트 템플릿 엔진으로 나뉘는데, 타임리프는 전자에 해당하니 이에 대해서만 간단히 설명하겠다.
서버에서 DB 또는 API 등을 통해 가져온 데이터를 미리 정의된 템플릿에 넣어 html을 그려내 클라이언트에 전달해준다. 즉, html 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작할 수 있게 해준다.
템플릿 엔진의 장점
- 코드 양 ↓
- 재사용성 ↑
- 유지보수에 용이
여러 서버 템플릿 엔진의 특징
- JSP: 스프링 부트에서 비권장
- Velocity: 스프링 부트에서 비권장
- Freemarker: 템플릿 엔진으로서 기능이 너무 다양함. 숙련도 낮은 경우 비즈니스 로직이 추가됨.
- Thymeleaf: 스프링에서 권장. 문법이 어려움.
- Mustache: 심플하고 서버, 클라 모두 사용 가능.
Thymeleaf 사용하기
thymeleaf 뷰 템플릿을 사용하기 위해서는 ThymeleafViewResolver를 등록해야 한다.
아래 라이브러리를 추가하면 Spring이 위 작업을 자동화 해준다.
Gradle - build.gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
Maven - pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
위 설정을 추가 후 빌드하면 application.properties에 아래 코드가 자동으로 추가된다.
디폴트 설정을 원하지 않는다면 직접 수정해도 된다.
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
타임리프를 사용할 html 파일에 다음과 같이 태그를 수정해준다.
<html xmlns:th="http://www.thymeleaf.org">
타임리프를 사용할 준비가 끝났다.
이제 타임리프의 문법을 간단히 살펴보자.
Thymeleaf 문법
대부분의 html 속성을 th:xxx 로 변경할 수 있다.
ex: th:text="${변수명}"
또는,
HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용하면 된다.
| 표현 | 설명 | 예제 |
| @{ ... } | URL 링크 표현식 | th:href="@{/css/bootstrap.min.css}" th:href="@{/{itemId}/edit(itemId=${item.id})}" |
| | ... | | 리터럴 대체 | th:text="|Hi ${user.name}!|" (= th:text="'Hi '+${user.name}+'!'" |
| ${ ... } | 변수 | th:text=${user.name} |
| th:each | 반복 출력 | <tr th:each="item: ${items}"> <td th:text="${item.price}">100</td> </tr> |
| *{ ... } | 선택 변수 | <tr th:object="${items}"> <td th:text="*{price}">100</td> </tr> |
| #{ ... } | 메시지. properties 같은 외부 자원에서 코드에 해당하는 문자열 get. | th:text="#{member.register}" |
참고 자료
https://yeonyeon.tistory.com/153
[Thymeleaf] 타임리프란? (+기본적인 사용법)
간단한 CRUD를 구현하다가 org.thymeleaf.exceptions.TemplateProcessingException 에러를 너무 많이 겪어서 타임리프에 대해 잠깐 공부하기로 했다. (위 에러는 타임리프 문법을 잘못 쓰는 등의 이유로 특정 url
yeonyeon.tistory.com
템플릿 엔진(Template Engine) 이란?
템플릿 엔진이란 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(또는 소프트웨어 컴포넌트)를 말합니다. * Template : 공통적인 프레임을 미리 제
usefultoknow.tistory.com
https://jongminlee0.github.io/2020/03/12/thymeleaf/
[SpringBoot] 타임리프(Thymeleaf) - Jongmin's Blog
1. 템플릿 엔진(Template Engine)
JongMinLee0.github.io
Thymeleaf(타임리프)란 ? 타임리프의 기본 기능알아보기
Thymeleaf(타임리프)란 ? 타임리프는 JSP, Freemarker와 같은 템플릿 엔진의 일종으로 다음과 같은 특징을 갖고 있습니다. 서버 사이드 HTML 렌더링 (SSR) 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용
hstory0208.tistory.com
'개발공부' 카테고리의 다른 글
| Intelli J - 라이센스 등록 및 변경 (0) | 2024.04.12 |
|---|---|
| [Spring Boot][오류해결] Parameter 0 of constructor in ~~ required a bean of type ~~ that could not be found. (0) | 2024.04.08 |
| JDBC (0) | 2024.04.04 |
| JSP & PHP & ASP (0) | 2024.04.04 |
| Static[JAVA] (0) | 2024.04.02 |