본문 바로가기
스프링 부트3

Thymeleaf를 이용한 스프링 부트 3 템플릿 엔진

by 굿센스굿 2024. 12. 5.
반응형

 

스프링 부트 3는 웹 애플리케이션 개발을 위한 강력한 프레임워크로, Thymeleaf는 이와 함께 가장 널리 사용되는 템플릿 엔진 중 하나입니다. 본 블로그에서는 Thymeleaf가 무엇인지, 이를 어떻게 스프링 부트 3와 통합하여 활용할 수 있는지 상세히 설명합니다. 또한 코드 예제와 실용적인 활용 사례를 통해 이해도를 높이겠습니다.

1. Thymeleaf란 무엇인가?

Thymeleaf는 HTML, XML, JavaScript 등의 마크업 언어를 처리하고 렌더링하는 Java 기반 템플릿 엔진입니다.

주요 특징:

  1. 내추럴 템플릿(Natural Template)
    Thymeleaf로 작성된 HTML 파일은 브라우저에서 바로 열어도 유효한 HTML로 동작합니다.
  2. 서버와 클라이언트 모두에서 동작
    서버에서 데이터를 렌더링하여 클라이언트로 보낼 수 있으며, 클라이언트에서 동적 UI 요소도 지원합니다.
  3. 쉽고 직관적인 문법
    스프링 애플리케이션의 모델 데이터를 쉽게 템플릿에 바인딩할 수 있습니다.

2. Thymeleaf를 스프링 부트 3와 함께 사용하는 이유

스프링 부트와의 통합

스프링 부트 3는 Thymeleaf를 기본적으로 지원하므로, 추가적인 설정 없이 간단히 프로젝트에 적용할 수 있습니다.
장점:

  • 스프링 MVC 모델과 자연스럽게 통합.
  • 간단한 의존성 설정만으로 사용 가능.
  • 확장 가능한 템플릿 기능.

3. Thymeleaf 의존성 추가

먼저, Maven 또는 Gradle을 사용하여 프로젝트에 Thymeleaf를 추가해야 합니다.

Maven

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

Gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

의존성을 추가한 후 프로젝트를 빌드하면 Thymeleaf 템플릿 엔진이 기본적으로 활성화됩니다.

4. 기본적인 Thymeleaf 설정

스프링 부트에서 Thymeleaf를 사용하기 위한 기본 설정은 application.properties 또는 application.yml에 추가합니다.

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false

위 설정은 다음을 의미합니다:

  • 템플릿 파일은 src/main/resources/templates 폴더에 위치.
  • 파일 확장자는 .html.
  • HTML5를 렌더링 모드로 사용.
  • UTF-8 인코딩을 기본으로 사용.
  • 캐싱 비활성화(개발 중 빠른 변경 확인 가능).

5. Thymeleaf 기본 사용법

Thymeleaf 템플릿은 HTML 태그에 속성을 추가하는 방식으로 데이터 바인딩과 조건문, 반복문 등을 지원합니다.
다음은 주요 문법과 기능을 살펴보겠습니다.

(1) 데이터 바인딩

<p th:text="${message}">Default Message</p>
  • th:text는 서버에서 전달된 데이터를 표시.
  • ${message}는 스프링 MVC의 Model 객체에 포함된 데이터를 참조.

Controller 코드 예제

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "안녕하세요, Thymeleaf!");
        return "home";
    }
}

(2) 조건문

<p th:if="${user != null}">로그인된 사용자: <span th:text="${user.name}"></span></p>
<p th:unless="${user != null}">로그인되지 않았습니다.</p>

(3) 반복문

<ul>
    <li th:each="item : ${items}" th:text="${item}">Item</li>
</ul>
  • th:each는 items 컬렉션을 반복하며 각각의 요소를 렌더링.

Controller 예제

@Controller
public class ItemController {
    @GetMapping("/items")
    public String items(Model model) {
        List<String> itemList = Arrays.asList("Item 1", "Item 2", "Item 3");
        model.addAttribute("items", itemList);
        return "item-list";
    }
}

6. 확장 기능 활용

(1) URL 처리

Thymeleaf는 동적으로 URL을 생성할 수 있습니다.

<a th:href="@{/items}">아이템 목록 보기</a>

(2) 템플릿 조각화

코드 재사용성을 높이기 위해 템플릿 조각을 정의하고 포함할 수 있습니다.

header.html

<header>
    <h1 th:text="${title}">기본 제목</h1>
</header>

main.html

<html>
    <body>
        <div th:insert="~{header :: title='메인 페이지'}"></div>
    </body>
</html>

7. 실제 활용 예제 3가지

예제 1: 사용자 프로필 페이지

Controller

@GetMapping("/profile")
public String profile(Model model) {
    model.addAttribute("user", new User("홍길동", "hong@example.com"));
    return "profile";
}

HTML

<div>
    <p th:text="'이름: ' + ${user.name}"></p>
    <p th:text="'이메일: ' + ${user.email}"></p>
</div>

예제 2: 동적 상품 목록

Controller

@GetMapping("/products")
public String products(Model model) {
    List<Product> products = Arrays.asList(
        new Product("노트북", 1200000),
        new Product("스마트폰", 800000)
    );
    model.addAttribute("products", products);
    return "products";
}

HTML

<table>
    <tr th:each="product : ${products}">
        <td th:text="${product.name}"></td>
        <td th:text="${product.price} + '원'"></td>
    </tr>
</table>

예제 3: 로그인 상태에 따른 메시지 표시

Controller

@GetMapping("/login")
public String login(Model model) {
    model.addAttribute("isLoggedIn", true);
    return "login";
}

HTML

<div th:if="${isLoggedIn}">
    <p>환영합니다!</p>
</div>
<div th:unless="${isLoggedIn}">
    <p>로그인이 필요합니다.</p>
</div>

8. 마무리 및 추가 팁

Thymeleaf는 스프링 부트 3에서 쉽게 설정하고 활용할 수 있는 강력한 템플릿 엔진입니다. 직관적인 문법과 다양한 기능 덕분에 빠르게 동적인 웹 페이지를 제작할 수 있습니다. 위의 예제들을 기반으로 더 복잡한 애플리케이션도 쉽게 확장할 수 있습니다.

다음 단계로는 Thymeleaf와 함께 Spring Security를 통합하여 인증/인가 기능을 구현하거나, AJAX와 함께 동적인 UI를 구성해 보세요.

Thymeleaf를 활용한 여러분의 프로젝트 성공을 기원합니다! 🚀

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

'스프링 부트3' 카테고리의 다른 글

Spring Data JPA를 사용한 기본 데이터 쿼리  (0) 2024.12.05
스프링 부트 3와 JSON 데이터 처리  (0) 2024.12.05
스프링 부트 3에서 CRUD 구현하기  (0) 2024.12.05
스프링 부트 3와 Hibernate 기초  (0) 2024.12.05
스프링 부트 3와 MySQL  (0) 2024.12.05

관련글

티스토리툴바