Thymeleaf 이해하기

[ParkYK]

HTML : compile 없이 클라이언트 쪽 브라우저에서 해석(파싱)해 바로 출력해 준다.
자바스크립트 : 브라우저 위에서 구동하므로 서버 템플릿 엔진의 손을 벗어나 제어할 수 없다.

** Template engine이란 프로그램 로직을 표현하는 계층과 서비스를 사용하는 유저가 보는 데이터 출력을 위한 프리젠테이션 계층을 분리하기 위한 수단으로, Controller에서 View로 데이터를 보내면 데이터를 View에서 볼 수 있게 도와준다.

mustache, thymeleaf 등이 spring을 개발하는 프로그래머들이 선호하는 template로 알려져 있다.

클라이언트 Template Engine (CSR: Client Side Rendering) : 

React, Vue, AngulerJS와 같이 서버에서 데이터를 전달받고 이를 통해 웹 화면을 꾸며주는 라이브러리 (혹은 프레임워크)다. SPA(Single Page Application) 환경으로 웹 서비스를 개발하는 사례가 늘어나며 많이 사용되고 있다.
   
서버 지원 Template Engine : 
   - 프로그램 로직과 프레젠테이션 계층을 분리하기 위한 수단
   - 프레젠테이션 계층에서 로직을 쉽게 표현하고, 개발의 유연성을 향상 시키며 유지보수의 효율 또한 향상된다.
   - 서버 템플릿 엔진 (SSR : Server Side Rendering) : 서블릿(서버)에서 동작하는 템플릿
   - 템플릿 양식과 데이터를 이용해 html을 생성하여 브라우저에 전달한다.
   - 정해진 템플릿 양식과 데이터가 매핑하여 html 문서를 만들어주는 SW로 그 종류는 다양하다.

JSP vs Mustache vs Thymeleaf vs FreeMarker

JSP	서버 지원 템플릿 엔진으로 서버에서 구동한다. 서버에서 Java 코드로 출력자료를 만든 뒤 이 문자열을 html 형식으로 변환해 브라우저로 전달한다.  스프링부트에서는 WAS에 종속적인 JSP를 더 이상 권장하지 않고 있다.
Mustache	스프링부트에서 공식으로 지원하는 템플릿 엔진으로 Java는 물론, 현존하는 대부분의 언어를 지원한다.   - JSP와 같이 html을 만들어주는 템플릿 엔진   - 로직 코드를 사용할 수 없어 View 역할과 서버의 역할을 명확히 분리한다.   - Mustache.js와 Mustache.java를 사용해 하나의 문법으로 클라이언트/서버 템플릿으로 모두 사용 가능하다.
Thymeleaf	스프링부트에서 공식으로 지원하는 템플릿 엔진.    - 스프링 진영에서 적극적으로 지원.
FreeMarker	스프링부트에서 공식으로 지원하는 템플릿 엔진. 대부분의 경우 HTML을 생성하는 데 필요한 모든 필수 기능을 갖추고 있으며 배우기가 더 쉽다. 그러나 템플릿에 사용자 지정 기능을 추가하려는 경우 Thymeleaf를 사용하는 것이 효과적으로 알려져 있다.

각 템플릿 엔진의 빌드 크기

애플리케이션 배포와 관련하여 크기가 중요하다. 작은 빌드는 CI 플랫폼 간에 프로덕션 서버로 이전하기가 더 편하다. 환경에 차이가 있을 수 있으나 일반적으로 빌드된 jar 파일 크기를 비교해 본 결과는 다음과 같다.

보다시피 Mustache가 약 16MB의 용량을 가진 확실한 승자이며 Thymeleaf가 그 뒤를 잇고 있다. FreeMarker는 Thymeleaf보다 뒤처지지 않았지만 Groovy는 21.4MB 크기로 훨씬 뒤쳐졌다.

애플리케이션 부팅 시간

이 그래프는 스프링 부트 애플리케이션의 각 변형에 대한 시작 시간을 보여준다. 서로 다른 템플릿 엔진 간의 간격은 약 1초에 불과하지만 실제 차이는 훨씬 더 클 것이다.

참조 : https://springhow.com/spring-boot-template-engines-comparison/

"Thymeleaf(타임리프)와 JSP의 차이점"​
JSP는 서비스 처리 시 먼저 Servlet으로 변환되어 실행이 된다. 즉, JSP 코드 내에서 자바 코드를 사용할 수 있게 된다. 이에 반해 Thymeleaf는 스프링부트에서 주로 사용되는 템플릿 엔진이며 Serverside 자바 템플릿 엔진의 한 종류이며, HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리 할 수 있는 웹 및 독립형 환경에서 사용할 수 있는 Java 템플릿 엔진이다. Thymeleaf는 html 파일을 가져와서 파싱하여 분석 후 정해진 위치에 데이터를 치환해서 웹 페이지를 생성한다.
JSP와의 가장 큰 차이점은 Servlet Code로 변환되지 않다는 점이다. 따라서 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있다.

Thymeleaf와 달리 JSP는 스프링부트가 자동 설정을 지원하지 않으며 권장하지 않는다. 이유는  JSP를 사용하면 JAR 패키징을 할 수 없어 WAR 패키징을 해야 한다. 물론 WAR 패키징으로도 임베디드 톰캣으로 실행할 수 있고 배포도 가능하다. 하지만 Undertow(Springboot 공식 지원 내장 서버)라는 최근에 만들어진 서블릿 엔진이 JSP를 지원하지 않는 등 제약사항이 있다. 또한 JSP에 대한 의존성을 넣으면 의존성 문제가 생기는 경우도 있다.

Thymeleaf 라이브러리 지원 설정 - springboot에서는 프로젝트 초기에 선택할 수 있다.

--- Maven에서 Thymeleaf 의존성 추가 : 

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

--- Gradle Dependencies
dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

참고 : 기본적으로 모든 View는 project의 src - templates 디렉토리로 설정되어 있다.

참고 : application.properties 파일에 개발 시 옵션 지정하기 종류 ---
👉 spring.thymeleaf.cache=true / false
  : false로 해놓았을 때 타임리프를 수정하고 서버를 재시작할 필요 없이 새로 고침만으로 반영이 된다. 서버 재시작을 안 해도 되어 매우 편리하다. 개발할 때는 false로 두고 반영 시에는 true로 설정해놓는 게 좋다.
👉 spring.thymeleaf.prefix=classpath:/templates/
   : 경로를 잡아준다. 예를 들어 'classpath:/templates/'로 설정한 것이 기본 값이다. resources 폴더 밑 templates 폴더가 있고 그 안에 html 파일을 넣어 준다.
👉 spring.thymeleaf.suffix=.html
  : html을 사용한다면 '.html'로 설정해 준다. 기본값임. 만일 jsp를 사용한다면 '. jsp'를 입력해주면 된다.
👉 spring.thymeleaf.enabled=true / false
  : 타임리프를 사용하겠다는 뜻이다. true로 설정해둔다.
👉 spring.thymeleaf.encoding=UTF-8
  : template 인코딩
👉 spring.thymeleaf.mode=HTML 
  : 기본 template 모드, TemplateMode에 정의 (HTML, XML, TEXT, JAVASCRIPT 등)
👉 spring.thymeleaf.check-template=true
  : 렌더링 전에 template 존재 여부 확인 
👉 spring.thymeleaf.check-template-location=true
  : template 위치 존재 여부 확인

참고 페이지

https://www.thymeleaf.org/  

https://dev-gorany.tistory.com/302    

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-htmlxml-comments

[Thymeleaf] URL 표현하기 (th:href)
■ Absolute URL : Absolute URL을 사용하면 특정 url로 직접 이동이 가능하다. 가장 기본적인 a태그 사용법으로 방법은 아래와 같다.
<a th:href="@{http://www.thymeleaf/abc.html}">

■ Context-relative URL : 가장 많이 사용되는 유형으로 서버 내 특정 위치로 이동이 가능하도록 하는 URL이다.
사용방법은 아래와 같다. 예는 서버 내 리소스 /order/list를 호출한다.
<a th:href="@{/order/list}">

■ Adding Parameter URL : 파라미터를 추가하는 방식의 URL이며, https://www.korea.do/order/details?id=1 
<a th:href="@{/order/details(id=1)}">

그리고 파라미터를 여러 개 사용하기 위해서는 아래와 같이 쉼표로 구분한다.
<a th:href="@{/order/details(id=1, name='tom')}">

■ 서버에서 받아온 값을 바로 파라미터로 주는 방법도 있다. 보통 서버의 파라미터 값을 화면에 보여주기 위해서는 아래와 같이 사용한다. th:text="${orderInfo.seq}"
이와 같은 방법으로 사용하면 서버의 값을 이용하여 동적으로 URL을 만들 수 있다.
<a th:href="@{/order/details(id=${orderInfo.seq})}">

Thymeleaf를 편리하게 사용하기 위한 Eclipse 플러그인 
 1) Help -> Install New software에서 Work with에 http://www.thymeleaf.org/eclipse-plugin-update-site/ 를 입력한 뒤 엔터키를 눌러 설치한다.
 2) Thymeleaf 사용하기 위해 th 네임스페이스 추가 ==> xmlns:th="http://www.thymeleaf.org"

Controller에서 Model로 받아온 name 사용
 html 태그에 타임리프 "th" 속성을 쓰겠다는 의사 표시로 "xmlns:th"를 적어 주면 된다.

사용 예 )

--- index.html ---

<body>
<h2>thymeleaf test</h2>
<a href="thleaf/ex">test 1</a>
</body>

--- ItemDto.java ---

package pack.aa.controller;
import java.time.LocalTime;

public class ItemDto {
  private String id, name;
  private int price;
  private LocalTime regTime;
  getter, setter 설정 (롬복을 사용해도 됨) ...
}

--- TestController.java ---

package pack.aa.controller;
import java.time.LocalTime;
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 = "thleaf")
public class TestController {
  @GetMapping("/ex")
  public String abc(Model model) {
    ItemDto dto = new ItemDto();
    dto.setId("ks1");
    dto.setName("마우스");
    dto.setPrice(5000);
    dto.setRegTime(LocalTime.now());

    model.addAttribute("dto", dto);
    return "thleafex";
  }
}

--- thleafex.html ---

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>상품 자료 출력</h2>
<table>
  <tr><td>아이디</td> <td><span th:text="${dto.id}"></span></td></tr>
  <tr><td>상품명</td> <td><span th:text="${dto.name}"></span></td></tr>
  <tr><td>가 격</td> <td><span th:text="${dto.price}"></span></td></tr>
  <tr><td>등록일</td> <td><span th:text="${dto.regTime}"></span></td></tr>
</table>
</body>
</html>

* Spring Boot 웹 애플리케이션에서 뷰로 jsp와 Thymeleaf를 같이 사용하도록 설정

https://offbyone.tistory.com/409