본문 바로가기

Spring

Spring Boot에서 Thymeleaf로 동적인 웹 페이지 만들기 - 시작부터 활용까지

728x90
반응형

1. Thymeleaf란 무엇인가?

Thymeleaf는 Java 기반의 서버 사이드 템플릿 엔진(Template Engine)입니다. 템플릿 엔진은 HTML, XML, JavaScript, CSS와 같은 파일들에 동적으로 데이터를 삽입하여 웹 페이지를 생성하는 도구로, Thymeleaf는 이러한 작업을 매우 직관적이고 효율적으로 처리할 수 있게 해줍니다. 특히 Spring Framework와의 강력한 통합 덕분에, Spring Boot 프로젝트에서 가장 많이 사용되는 템플릿 엔진 중 하나입니다.

Thymeleaf는 기존의 HTML 파일을 그대로 사용할 수 있도록 설계되었으며, HTML5 표준을 준수합니다. 이를 통해 서버 사이드에서 데이터를 동적으로 처리하고 삽입할 수 있으며, 동적 콘텐츠를 제공할 때 매우 유용합니다.

2. Thymeleaf를 언제 사용하면 좋을까?

  • 서버 사이드 렌더링 (SSR) 필요 시: Thymeleaf는 서버에서 데이터를 처리한 후, 이를 HTML에 포함해 렌더링하는 경우에 적합합니다. 예를 들어, 데이터베이스에서 가져온 정보를 사용자가 보는 웹 페이지에 표시해야 할 때 사용할 수 있습니다.
  • 단일 페이지 애플리케이션이 필요 없는 경우: Thymeleaf는 서버에서 매번 HTML을 생성하여 사용자에게 전달하는 방식입니다. 따라서, Vue.js나 React.js 같은 클라이언트 사이드 렌더링이 필요 없는 웹 사이트나 애플리케이션에서 더 적합합니다.
  • Spring Boot와의 강력한 통합: Thymeleaf는 Spring Boot와 자연스럽게 연동되어, 최소한의 설정으로 바로 사용할 수 있습니다. Spring의 모델 데이터를 Thymeleaf 템플릿에 쉽게 전달하고, 이를 기반으로 동적인 웹 페이지를 만들 수 있습니다.
반응형

3. Thymeleaf 활용 방법

Thymeleaf는 HTML 코드 안에 특별한 속성을 삽입하여 동적으로 서버 데이터를 렌더링할 수 있습니다. 예를 들어, HTML 페이지에서 변수 값을 삽입하거나, 조건부 렌더링, 반복문 등을 사용하여 동적으로 컨텐츠를 구성할 수 있습니다.

다음은 Thymeleaf의 주요 기능들입니다:

  • 변수 출력: th:text 속성을 사용하여 서버에서 전달된 데이터를 HTML 요소에 출력할 수 있습니다.
  • 조건부 렌더링: th:if, th:unless 속성을 사용하여 조건에 따라 HTML 요소를 렌더링할 수 있습니다.
  • 반복문 처리: th:each 속성을 통해 서버에서 전달된 리스트 데이터를 반복적으로 렌더링할 수 있습니다.

4. 간단한 Gradle 기반 Thymeleaf 프로젝트 예시

Thymeleaf를 활용한 간단한 Spring Boot 프로젝트를 만들어보겠습니다. 먼저, Gradle 기반의 프로젝트 설정부터 시작해 보겠습니다.

프로젝트 구조

src
└── main
    ├── java
    │   └── com.example.demo
    │       └── DemoApplication.java
    ├── resources
    │   ├── templates
    │   │   └── index.html
    └── build.gradle

Step 1: build.gradle 설정

Gradle 프로젝트에서는 필요한 Thymeleaf 의존성을 추가해야 합니다.

plugins {
    id 'org.springframework.boot' version '3.1.2'
    id 'io.spring.dependency-management' version '1.1.0'
    id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
    useJUnitPlatform()
}

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' 의존성을 추가하여 Thymeleaf를 사용할 수 있도록 설정합니다.

Step 2: Spring Boot 애플리케이션 설정

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class DemoApplication {

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "안녕하세요, Spring Boot와 Thymeleaf로 웹 페이지를 구성해보세요!");
        return "index";
    }
}

이 컨트롤러는 루트 경로(/)로 GET 요청이 들어왔을 때 index.html 템플릿을 반환하며, message라는 변수를 모델에 추가하여 템플릿에 데이터를 전달합니다.

Step 3: Thymeleaf 템플릿 (index.html)

src/main/resources/templates/index.html 파일을 작성합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf 예제</title>
</head>
<body>
    <h1 th:text="${message}">기본 메시지</h1>
</body>
</html>

이 템플릿 파일에서는 th:text 속성을 사용하여 서버에서 전달된 message 변수를 출력합니다. 만약 message 변수가 없다면 기본적으로 "기본 메시지"가 출력됩니다.

728x90

Thymeleaf는 Spring Boot 애플리케이션에서 서버 사이드 렌더링을 위해 매우 직관적이고 효율적인 솔루션을 제공합니다. 특히, 별도의 복잡한 설정 없이 Spring과 쉽게 통합되어, 빠르게 동적인 웹 페이지를 개발할 수 있습니다. 앞으로 좀 더 복잡한 페이지를 만들거나, 다양한 기능을 추가하고 싶을 때도 Thymeleaf는 충분히 유용하게 사용할 수 있습니다.

728x90
반응형