Spring Boot - Thymeleaf

article logo

 

Spring Web Application 구현시 JSP를 이용해서 View를 구성하고 data 표현을 위해 HTML 태그에 <% %> 로 자바 언어를 사용했습니다. JSP를 사용하면 Web Application 배포시 WAR(Web Archive) 파일로 생성되는데, WAR는 Web Application 압축타입으로 Servlet(JSP) 해석과 관련된 모든 패키지들을 포함시키면서 복잡하고 무거운 구조였습니다.

그리고, JSP 자체가 서버 측 언어로 그 사용빈도가 줄고 있습니다.

 

JSP 의 잇점인 '스크립틀릿(scriptlet)'이라는 기능이 있어서 자바코드를 직접 태그안에 작성할 수 있습니다. 이런 이점이 있지만, 뷰 부분에 코드가 섞여서 로직을 분리하기 어려워 지기 때문에 JSP에 의존하는 개발은 피해야 하는 추세입니다.

 

순수하게 Java Application(jar)로만 웹 구현과 기동이 가능한 Template Enginee이라는 HTML과 Data를 하나로 결합시켜 처리하는 도구를 이용하는 개념이 도입됩니다.

 

Spring Boot에서는 Thymeleaf(타임리프)라는 Template Enginee이 주로 사용되고 있습니다.

 

1. pom.xml에 dependency 추가

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

gradle 인 경우는 build.gradle에 아래내용을 추가

dependencies {
    //thymeleaf 
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
    ...
}

 

2. application.properties에서 thymeleaf 설정 추가

spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=/WEB-INF/views/
spring.thymeleaf.suffix=.html

spring.thymeleaf.enabled → thymeleaf의 사용을 enable.

spring.thymeleaf.encoding → thymeleaf의 인코딩을 UTF-8로 기본 설정.

spring.thymeleaf.prefix → thymeleaf의 기본 경로인 templates를 원하는 임의의 경로로 변경 가능.

spring.thymeleaf.suffix → thymeleaf가 읽어들이는 파일의 확장자를 설정한다. 예를 들어 위와 같이 .html 으로 설정했다면 Controller 코드의 method에서 return "index"; 로 처리할 경우, 자동적으로 index.html을 읽어 옴.

 

- Thymeleaf의 기본 폴더 경로

Thymeleaf에서는 기본적으로 resources 폴더의 templates폴더에 html 파일들이 위치한다.

이 외의 css, js 등의 정적 파일들은 static 폴더에 위치하게 된다.

 

- Trouble Shooting

1. ERROR - org.thymeleaf.exceptions.TemplateInputException: Error resolving template “index”, template might not exist or might not be accessible by any of the configured Template Resolvers

→ templates 폴더에 "index.html"파일이 없어서 발생하는 문제입니다. 이 외에도 해당 경로에 대상 view가 없으면 이와 같은 에러가 발생합니다.

2. 기존에 JSP를 사용하고 있다면, jstl과 jasper 관련 설정을 pom.xml에서 주석 처리 해주어야 합니다.

참조 : https://www.thymeleaf.org/documentation.html

Documentation - Thymeleaf

---

Thymeleaf 표현법

th 네임스페이스를 이용  ex) th:text="......."

 

1. 변수식

"${ }"

 

2. 유틸리티 객체

"${#겍체.   }"

자바 클래스 중 자주 사용하는 클래스를 '#이름'이라는 상수로 정의해서 변수식 안에 직접 작성가능합니다.

th:text="${#dates.format(new java.util.Date(), 'dd/MMM/yyyy HH:mm')}"

>> 06/2월/2022 11:23

th:text="${#number.formatInteger(1234,7)}"

>> 0001234

th:text="${#strings.toUpperCase('Welcone to Spring')}"

>> WELCOME TO SPRING

 

3. 매개변수에 접근하기

"${param.매개변수}"

'/index?id=123&id=456' 접속시 123, 456 이라는 값을 처리에 이용할 수 있습니다.

th:text="'parameter is '+${param.id[0]}+', '+${param.id[1]}"

다수의 리터럴을 연결할 때에는 큰 따옴표 내에 작은 따옴표로 리터럴을 사용해야 합니다.

 

4. 메시지식

"#{ }"

messages.properties 라는 파일을 resources 폴더 내에 생성합니다.

th:text="#{content.title}"

content.title=message sample page.
content.message=this is sample message.

 

5. 링크식과 href

<a th:href="@{주소}">

<a th:href="@{'/home/' + ${param.id[0]}}">Link</a>

 

6. 선택객체의 변수식

<th:object="${객체}">

  <th:text="*{프러퍼티}">

ModelAndView modelAndView = new ModelAndView();
Person person = new Person(12, "Lee");
modelAndView.addObject("myPerson", person);

<table th:object="${myPerson}">
<tr><th>Name</th><td th:text="*{name}"></td></tr>
<tr><th>Age</th><td th:text="*{age}"></td></tr>
</table>

7. 리터럴 치환

변수식 내에서 몇 개의 값을 조합해서 출력하는 경우 "'A'+'B'"와 같이 큰 따옴표 내에서 다시 텍스트 리터럴을 연결했습니다. 이보다 더 간단한 '리터럴 치환'이라는 작성법이 있습니다.

"| 텍스트 내용 |"

<div th:object="${myPerson}">
	<p th:text="|My name is *{name}, age is *{age}.|" </p>
</div>

 

8. HTML 코드 출력

th:utext

 

9. 조건식

${check} ? ${trueVal} : ${falseVal}

 

10. 조건분기

th:if="조건"

th:unless="조건"

th:switch / th:case

<p th:if="${check}" th:text="${trueVal}"></p>

<p th:unless="${check}" th:text="${falseVal}"></p>

<div th:switch="${check}">

  <p th:case="0" th:text="| value is 0 |"></p>

 

11. 반복문

th:each

<th:each="변수" : ${컬렉션}>

    ...${변수}를 사용한 구문

"value:${list}"

 

 

12. 인라인 처리

<!-- th:text 대신 인라인 처리 [[${변수}]] -->

인라인처리는 태그에 th:inline="text"라고 작성하면 해당 태그 내부에서만 인라인 처리가 가능해집니다.

<td th:text="${obj}"></td>
<td> [[${obj}]]</td>    //<-------- 위 th:text는 td 태그와 같이 표현되지만, 인라인 처리는 다름에 유의!

 

 

<index.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<p th:text="${#dates.format(new java.util.Date(), 'dd/MMM/yyyy HH:mm')}"> </p>
<p th:text="#{content.title}"> Hello title </p>
<p th:text="#{content.message}"> message </p>
<p><a th:href="@{'/home/'}">Link</a></p><br>
<table th:object="${myPerson}">
	<tr><th>Name</th><td th:text="*{name}"></td></tr>
	<tr><th>Age</th><td th:text="*{age}"></td></tr>	
</table>
<div th:object="${myPerson}">
	<p th:text="|My name is *{name}, age is *{age}.|" </p>
</div>

<table th:inline="text">
<tr>
	<th>Name</th>
	<th>Email</th>
</tr>
<tr th:each="obj : ${myData}">
	<td th:text="${obj[0]}"></td>
	<td>[[${obj[1]}]]</td>
</tr>
</table>

</body>
</html>

 

 

Source : https://github.com/kakarooJ/SpringBoot_Thymeleaf

GitHub - kakarooJ/SpringBoot_Thymeleaf