가공한 데이터를 이용하여 화면을 만드는 방법은 무엇이 있을까? 화면을 동적으로 만들려면 템플릿 엔진을 사용해야 한다. 미리 정의된 템플릿(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를 참고하여 작성하였습니다.
