01. Thymeleaf 소개 — 실전 스프링부트 3

Thymeleaf란?

서버 사이드 자바 템플릿 엔진
Natural Templates: HTML 파일 그대로 브라우저에서 열기 가능
Spring Boot 공식 지원 템플릿 엔진

JSP vs Thymeleaf

구분	JSP	Thymeleaf
확장자	.jsp	.html
문법	`<%= %>`, `<c:forEach>`	`th:text`, `th:each`
미리보기	서버 필요	HTML로 바로 가능
위치	/WEB-INF/views	/templates

기본 설정 확인 (선택사항)

Thymeleaf는 Spring Boot가 자동으로 설정해줍니다.

자동 설정 내용:

템플릿 위치: src/main/resources/templates/
파일 확장자: .html
캐시: DevTools 사용 시 자동으로 false

명시적 설정 (선택사항):

별도로 설정을 변경하고 싶을 때만 application.yml에 추가합니다.

# application.yml (이미 설정되어 있음)spring:  thymeleaf:    prefix: classpath:/templates/    # 기본값 (생략 가능)    suffix: .html                    # 기본값 (생략 가능)    cache: false                     # 개발 시 캐시 비활성화 (이미 설정됨)

참고: 1장에서 이미 cache: false 설정을 추가했으므로, 추가 설정이 필요 없습니다.

첫 번째 템플릿

1단계: HomeController 생성

1장에서 만든 ApiController는 REST API용(@RestController)이었습니다. 이번에는 HTML 뷰를 반환하는 일반 컨트롤러(@Controller)를 새로 만듭니다.

ApiController vs HomeController 비교

구분	ApiController (1장)	HomeController (2장)
어노테이션	@RestController	@Controller
클래스 매핑	@RequestMapping("/api")	없음
반환 타입	데이터 (문자열, JSON)	뷰 이름 (String)
반환 처리	직접 응답 본문으로	Thymeleaf 템플릿 렌더링
경로	/api/hello	/ (루트)
사용 목적	REST API	HTML 페이지 렌더링

새로운 컨트롤러 생성:

src/main/java/com/example/board 폴더에서 우클릭
새로 만들기(New) → Java 클래스(Java Class)
클래스명: HomeController 입력

// 새 파일: src/main/java/com/example/board/HomeController.javapackage com.example.board;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;@Controllerpublic class HomeController {    @GetMapping("/")    public String home(Model model) {        model.addAttribute("message", "Hello, Thymeleaf!");        return "home";  // templates/home.html을 찾아 렌더링    }}

@Controller 동작 방식:

브라우저에서 http://localhost:8080/ 접속
home() 메서드 실행
Model에 데이터 추가: message = "Hello, Thymeleaf!"
"home" 문자열 반환 → templates/home.html 파일 찾기
Thymeleaf가 템플릿 렌더링 후 HTML 응답

2단계: home.html 템플릿 생성

src/main/resources/templates 폴더에서 우클릭
새로 만들기(New) → 파일(File)
파일명: home.html 입력

<!-- 새 파일: src/main/resources/templates/home.html --><!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8">    <title>Home</title></head><body>    <h1 th:text="${message}">기본 메시지</h1></body></html>

템플릿 설명:

xmlns:th="http://www.thymeleaf.org": Thymeleaf 네임스페이스 선언
th:text="${message}": Model의 message 값으로 대체
기본 메시지: Thymeleaf 처리 전 기본값 (브라우저에서 직접 열 때 표시)

3단계: 실행 및 확인

애플리케이션 실행 (이미 실행 중이면 자동 재시작됨)
브라우저에서 접속: http://localhost:8080/
"Hello, Thymeleaf!" 메시지가 표시되면 성공

두 컨트롤러 동시 동작 확인:

http://localhost:8080/api/hello → "Hello World" (REST API)
http://localhost:8080/ → "Hello, Thymeleaf!" (HTML 페이지)

역할 구분:

ApiController: /api/* 경로로 REST API 제공
HomeController: 루트(/) 경로로 웹 페이지 제공