Thymeleaf 소개

8200 단어 Spring bootThymeleafSpring boot

가공한 데이터를 이용하여 화면을 만드는 방법은 무엇이 있을까? 화면을 동적으로 만들려면 템플릿 엔진을 사용해야 한다. 미리 정의된 템플릿(Template)을 만들고 동적으로 HTML 페이지를 만들어서 클라이언트에 전달하는 방식이다. 요청이 올 때마다 서버에서 새로운 HTML 페이지를 만들어 주기 때문에 서버 사이드 렌더링 방식이라고 한다.

서버 사이드 템플릿 엔진으로는 Thymeleaf, JSP, Freemaker, Groovy, Mustache 등이 있다. 어떤 것을 사용해도 만들 수 있지만 스프링에서는 Thymeleaf를 권장하고 있다. Thymeleaf의 가장 큰 장점은 'natural templates'이다. JSP를 사용해 본 사람들은 알겠지만 JSP 파일의 확장자면은 '.JSP' 이다. 웹 브라우저에 파일을 띄우면 JSP 문법이 화면에 나타나는 것을 볼 수 있다. 즉, 서버 사이드 렌더링을 하지 않으면 정상적인 화면 출력 결과를 볼 수 없다. Thymeleaf를 사용할 때 Thymeleaf 문법을 포함하고 있는 html 파일을 서버 사이드 렌더링을 하지 않고 브라우저에 띄워도 정상적인 화면을 볼 수 있다. Thymeleaf의 확장자명은 '.html'이며, Thymeleaf의 문법은 html 태그 안쪽에 속성으로 사용된다. 예제코드로 살펴보도록 하자.

메모장이나 기타 다른 에디터를 이용해 thymeleafEx01.html 이라는 파일을 만들어서 저장하고 웹 브라우저로 열어보도록 하겠다.

<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org/)">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${data}">Hello Thymeleaf!!</p>
</body>
</html>

웹 브라우저를 이용해서 thymeleafEx01.html 파일을 열면

태그 내부에 작성한 "Hello Thymeleaf!!"가 정상적으로 출력되는 것을 볼 수 있다.

태그 안에 "th:text="${data}"라는 Thymeleaf 문법이 들어갔지만 html 파일이 깨지지 않고 정상적으로 출력되는 것을 확인할 수 있다.

이번에는 애플리케이션을 실행시킨 후 서버 사이드 렌더링을 통해 해당 페이지에 접근해보겠다. 애플리케이션이 위치한 패키지 아래 controller 패키지를 하나 만든 후 Thymeleaf 예제용 컨트롤러 클래스를 하나 생성해보겠다.

package com.shop.controller;

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

@Controller
@RequestMapping(value = "/thymeleaf")
public class ThymeleafExController {
    @GetMapping(value = "/ex01")
    public String thymeleafExample01(Model model) {
        model.addAttribute("data", "타임리프 예제 입니다.");
        return "thymeleafEx/thymeleafEx01";
    }
}

@RequestMapping 어노테이션은 클라이언트의 요청에 대해서 어떤 컨트롤러가 처리할지 매핑하는 역할을 한다. url에 "/thymeleaf" 경로로 오는 요청을 ThymeleafExController가 처리하도록 한다.

Model 객체를 이용하면 model.addAttribute("key", "value");와 같이 뷰에 전달한 데이터를 key, value 구조로 넣어줄 수 있다.

마지막으로 resources/templates 경로를 기준으로 뷰의 위치와 이름을 반환(thymeleafEx/thymeleafEx01)한다.

resources/templates 아래에 thymeleafEx 폴더를 만든 후 해당 폴더에 "thymeleafEx01.html" 파일을 생성한다. 내용은 위에서 작성한 html 파일과 같다.

<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org/)">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${data}">Hello Thymeleaf!!</p>
</body>
</html>

<html xmlns:th="http://www.thymeleaf.org"> 을 태그 이전에 작성해줌으로써 Thymeleaf의 문법을 사용할 수 있게 된다.

ThymeleafExController에서 사용했던 model의 data라는 key 값에 담아준 값("타임리프 예제 입니다.")이 출력된다. 이때 사용하는 Thymeleaf의 문법이 "th:text"이다.

애플리케이션 실행 후 해당 url(localhost/thymeleaf/ex01)로 접근 시 "Hello Thymeleaf!!" 대신 "타임리프 예제 입니다."라는 문구가 나타나는 것을 볼 수 있다.

이게 바로 Thymeleaf가 지향하는 'natural templates'이다. 디자이너 또는 퍼블리셔는 자신이 작업한 내용을 html 파일로 바로 열어서 확인할 수 있으며, 개발자는 디자이너 또는 퍼블리셔로부터 html 파일을 받아서 html 태그 안에 Thymeleaf 문법을 추가하는 것만으로 동적인 html 파일을 생성할 수 있다. 기존에 JSP를 사용해본 사람들은 알겠지만 html 파일을 다시 JSP 파일로 변경하는 작업은 실수할 확률도 높고 많은 시간이 걸린다.

Thymeleaf를 조금 더 자세히 공부하고 싶다면 https://www.thymeleaf.org 사이트를 참고하면 된다.
해당 게시글은 변구훈, 『스프링 부트 쇼핑몰 프로젝트 with JPA』, 로드북, 2021를 참고하여 작성하였습니다.

Flex DataGrid 위조 병합 셀 구현 사고방식
Java 프로그램의 정규 표현식 탐욕 패턴 일치 실례 해석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage