티스토리 뷰

Thymeleaf

[Thymeleaf] 기본기능

먹태 2024. 1. 24. 19:11

[강의 : 스프링 MVC2편 - 백엔드 웹 개발 황용기술]

 

섹션1. 타임리프 기본기능(19개 강의, 2시간 34분)

 

저번 강의에서는 대략적으로 사용해봤던 타임리프를 좀 더 자세하게 알려줬다.

크게 어려운건 없었고, 익혀두면 확실히 JSP보다 편리할 거 같단 생각이 들었다.

 

 

1. 프로젝트 생성

- 인텔리제이, Gradle, Spring Boot

 

2.타임리프 소개

-  서버 사이드 HTML 렌더링(SSR)

- 네츄럴 템플릿( 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프 특징)

  • 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용 확인 가능하고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
  • JSP는 파일 자체를 그대로 웹 브라우저에서 열면 JSP 소스코드와 HTML이 뒤죽박죽 섞여서 웹 브라우저에서 정상적인 HTML 결과를 확인X. 오직 서버를 통 해서 JSP가 렌더링 되고 HTML 응답 결과를 받아야 화면을 확인가능

- 스프링 통합지원 O

- 타임리프 사용선언 

<html xmlns:th="http://www.thymeleaf.org">

 

 

 

3. 텍스트 - text, utext

(컨트롤러에서 'data'란 이름에 "test" 문자열을 담고 리턴)

 <!--기본-->
 <li>th:text 사용 <span th:text="${data}"></span></li>
 
 <!--HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 [[...]] 사용-->
 <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>

 

 

 

4. 변수 - SpringEL

- 변수 표현식 : ${...}

@GetMapping("/variable")
public String variable(Model model) {
 User userA = new User("userA", 10);
 User userB = new User("userB", 20);
 List<User> list = new ArrayList<>();
 list.add(userA);
 list.add(userB);
 Map<String, User> map = new HashMap<>();
 map.put("userA", userA);
 map.put("userB", userB);
 model.addAttribute("user", userA);
 model.addAttribute("users", list);
 model.addAttribute("userMap", map);
 return "basic/variable";
}
@Data
static class User {
 private String username;
 private int age;
 public User(String username, int age) {
 this.username = username;
 this.age = age;
 }
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>SpringEL 표현식</h1>
<ul>Object
 <li>${user.username} = <span th:text="${user.username}"></span></li>
 <li>${user['username']} = <span th:text="${user['username']}"></span></li>
 <li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></
li>
</ul>
<ul>List
 <li>${users[0].username} = <span th:text="${users[0].username}"></span></
li>
 <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></
span></li>
 <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></
span></li>
</ul>
<ul>Map
 <li>${userMap['userA'].username} = <span th:text="$
{userMap['userA'].username}"></span></li>
 <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']
['username']}"></span></li>
 <li>${userMap['userA'].getUsername()} = <span th:text="$
{userMap['userA'].getUsername()}"></span></li>

 

 

5. 기본 객체들

 

6. 유틸리티 객체와 날짜

필요할 때 참고해서 사용 Tutorial: Using Thymeleaf

 

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

 

 

 

7. URL 링크

- URL을 생성할 때는 @{...}

@GetMapping("/link")
public String link(Model model) {
 model.addAttribute("param1", "data1");
 model.addAttribute("param2", "data2");
 return "basic/link";
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>URL 링크</h1>
<ul>
 <li><a th:href="@{/hello}">basic url</a></li>
 <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query 
param</a></li>
 <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=$
{param2})}">path variable</a></li>
 <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path 
variable + query parameter</a></li>
</ul>
</body>
</html>

 

 

 

8. 리터럴( Literals )

- 리터럴은 소스 코드상에 고정된 값.  ex) "Hello" 는 문자 리터럴, 10 , 20 는 숫자 리터럴

- 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.

<!--오류-->
<span th:text="hello world!"></span>

<!--수정-->
<span th:text="'hello world!'"></span>

 

 

 

9. 연산

자바와 비슷, HTML 엔티티를 사용하는 부분만 주의

더보기

>(gt),

< (lt),

>= (ge),

<= (le),

! (not),

== (eq),

!= (neq, ne)

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<ul>
 <li>산술 연산
 <ul>
 <li>10 + 2 = <span th:text="10 + 2"></span></li>
 <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
 </ul>
 </li>
 <li>비교 연산
 <ul>
 <li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
 <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
 <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
 <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
 <li>1 == 10 = <span th:text="1 == 10"></span></li>
 <li>1 != 10 = <span th:text="1 != 10"></span></li>
 </ul>
 </li>
 <li>조건식
 <ul>
 <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝
수':'홀수'"></span></li>
 </ul>
 </li>
 <li>Elvis 연산자
 <ul>
 <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습
니다.'"></span></li>
 <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: '데
이터가 없습니다.'"></span></li>
 </ul>
 </li>
 <li>No-Operation
 <ul>
 <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></
li>
 <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니
다.</span></li>
 </ul>
 </li>
</ul>
</body>
</html>

 

 

 

10. 속성 값 설정

- checked 처리가 아주 편리하다

- 속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가한다.

th:attrprepend : 속성 값의 앞에 값을 추가한다.

th:classappend : class 속성에 자연스럽게 추가한다.

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>속성 설정</h1>
<input type="text" name="mock" th:name="userA" />
<h1>속성 추가</h1>
- th:attrappend = <input type="text" class="text" th:attrappend="class=' 
large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large 
'" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/
>
<h1>checked 처리</h1>
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>
- checked=false <input type="checkbox" name="active" checked="false" /><br/>
</body>
</html>

 

 

 

11. 반복

- th:each 를 사용

@GetMapping("/each")
public String each(Model model) {
 addUsers(model);
 return "basic/each";
}

private void addUsers(Model model) {
 List<User> list = new ArrayList<>();
 list.add(new User("userA", 10));
 list.add(new User("userB", 20));
 list.add(new User("userC", 30));
 model.addAttribute("users", list);
}

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>기본 테이블</h1>
<table border="1">
 <tr>
 <th>username</th>
 <th>age</th>
 </tr>
 <tr th:each="user : ${users}">
 <td th:text="${user.username}">username</td>
 <td th:text="${user.age}">0</td>
 </tr>
</table>
<h1>반복 상태 유지</h1>
<table border="1">
 <tr>
 <th>count</th>
 <th>username</th>
 <th>age</th>
 <th>etc</th>
 </tr>
 <tr th:each="user, userStat : ${users}">
 <td th:text="${userStat.count}">username</td>
 <td th:text="${user.username}">username</td>
 <td th:text="${user.age}">0</td>
 <td>
 index = <span th:text="${userStat.index}"></span>
 count = <span th:text="${userStat.count}"></span>
 size = <span th:text="${userStat.size}"></span>
 even? = <span th:text="${userStat.even}"></span>
 odd? = <span th:text="${userStat.odd}"></span>
 first? = <span th:text="${userStat.first}"></span>
 last? = <span th:text="${userStat.last}"></span>
 current = <span th:text="${userStat.current}"></span>
 </td>
 </tr>
</table>
</body>
</html>

 

- 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 가능

- 두번째 파라미터는 생략 가능, 생략하면 지정한 변수명( user ) + Stat

  해당 소스에서는 user + Stat = userStat

 

 

 

12. 조건부 평가

- if , unless ( if 의 반대)

<!-- 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
만약 다음 조건이 false 인 경우 <span>...<span> 부분 자체가 렌더링 되지 않고 사라진다-->
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>

 

 

@GetMapping("/condition")
public String condition(Model model) {
 addUsers(model);
 return "basic/condition";
}
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>if, unless</h1>
<table border="1">
 <tr>
 <th>count</th>
 <th>username</th>
 <th>age</th>
 </tr>
 <tr th:each="user, userStat : ${users}">
 <td th:text="${userStat.count}">1</td>
 <td th:text="${user.username}">username</td>
 <td>
 <span th:text="${user.age}">0</span>
 <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
 <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
 </td>
 </tr>
</table>
<h1>switch</h1>
<table border="1">
 <tr>
 <th>count</th>
 <th>username</th>
 <th>age</th>
 </tr>
 <tr th:each="user, userStat : ${users}">
 <td th:text="${userStat.count}">1</td>
 <td th:text="${user.username}">username</td>
 <td th:switch="${user.age}">
 <span th:case="10">10살</span>
 <span th:case="20">20살</span>
 <span th:case="*">기타</span>
 </td>
 </tr>
</table>
</body>
</html>

 

 

 

13. 주석

 

 

14. 블록

<th:block> 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다

 

 

 

15. 자바스크립트 인라인

선언

<script th:inline="javascript">

 

 

인라인 기능도 너무 괜찮다

@GetMapping("/javascript")
public String javascript(Model model) {
 model.addAttribute("user", new User("userA", 10));
 addUsers(model);
 return "basic/javascript";
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>

<body>
<!-- 자바스크립트 인라인 사용 전 -->
<script>
 var username = [[${user.username}]];
 var age = [[${user.age}]];
 //자바스크립트 내추럴 템플릿
 var username2 = /*[[${user.username}]]*/ "test username";
 //객체
 var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
 var username = [[${user.username}]];
 var age = [[${user.age}]];
 
 //자바스크립트 내추럴 템플릿
 var username2 = /*[[${user.username}]]*/ "test username";
 //객체
 var user = [[${user}]];
</script>
</body>
</html> ```
자바스크립트 인라인 사용 전 - 결과 ```html
<script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>

 

var username = [[${user.username}]];
<!--
인라인 사용 전 var username = userA;
인라인 사용 후 var username = "userA";
-->

 

인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다. 

타임리프 입장에서는 정확하게 렌더링 한 것이지만 아마 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것이다. 

결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생
인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 " 를 포함해준다. 

추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) " \"

 

 

자바스크립트 내추럴 템플릿

var username2 = /*[[${user.username}]]*/ "test username";
인라인 사용 전 var username2 = /*userA*/ "test username";
인라인 사용 후 var username2 = "userA";

 

인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다. 따라서 내추럴 템플릿 기능이 동작하지
않고, 심지어 렌더링 내용이 주석처리 되어 버린다.
인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

 

 

 

var user = [[${user}]];
<!--
인라인 사용 전 var user = BasicController.User(username=userA, age=10);
인라인 사용 후 var user = {"username":"userA","age":10};
-->

- 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환

인라인 사용 전은 객체의 toString()이 호출된 값, 인라인 사용 후는 객체를 JSON으로 변환

 

 

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
 [# th:each="user, stat : ${users}"]
 var user[[${stat.count}]] = [[${user}]];
 [/]
</script>

 

자바스크립트 인라인 each 결과 

<script>
var user1 = {"username":"userA","age":10};
var user2 = {"username":"userB","age":20};
var user3 = {"username":"userC","age":30};
</script>

 

 

 

16. 템플릿 조각

예를 들어 웹페이지의 상단, 하단 영역 등과 같이 여러 페이지에서 함께 사용하는 영역들이 있다.

이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므 로 상당히 비효율 적이다.

타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

@Controller
@RequestMapping("/template")
public class TemplateController {
 @GetMapping("/fragment")
 public String template() {
 return "template/fragment/fragmentMain";
 }
}

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
 푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
 <p>파라미터 자리 입니다.</p>
 <p th:text="${param1}"></p>
 <p th:text="${param2}"></p>
</footer>
</body>
</html>

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></
div>
</body>
</html>

 

template/fragment/footer :: copy : template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미

 

 

 

17. 템플릿 레이아웃1

<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
 <title th:replace="${title}">레이아웃 타이틀</title>
 <!-- 공통 -->
 <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/
awesomeapp.css}">
 <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
 <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
 <!-- 추가 -->
 <th:block th:replace="${links}" />
</head>

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
 <title>메인 타이틀</title>
 <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
 <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>

 

 

결과

<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
메인 컨텐츠
</body>
</html>

 

common_header(~{::title},~{::link}) 이 부분이 핵심이다.

::title 은 현재 페이지의 title 태그들을 전달한다.

::link 는 현재 페이지의 link 태그들을 전달한다. 결과를 보자.

 

메인 타이틀이 전달한 부분으로 교체되었다. 공통 부분은 그대로 유지되고, 추가 부분에 전달한 들이 포함된 것을 확인할 수 있다. 이 방식은 사실 앞서 배운 코드 조각을 조금 더 적극적으로 사용하는 방식이다. 쉽게 이야기해서 레이아웃 개념을 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것으로 이해하면 된다.

 

 

18. 템플릿 렛이아웃2

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
 <title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
 <p>레이아웃 컨텐츠</p>
</div>
<footer>
 레이아웃 푸터
</footer>
</body>
</html>

 

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, 
~{::section})}"
 xmlns:th="http://www.thymeleaf.org">
<head>
 <title>메인 페이지 타이틀</title>
</head>
<body>
<section>
 <p>메인 페이지 컨텐츠</p>
 <div>메인 페이지 포함 내용</div>
</section>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
<footer>
레이아웃 푸터
</footer>
</body>
</html>

 

layoutFile.html 을 보면 기본 레이아웃을 가지고 있는데, 에 th:fragment 속성이 정의되어 있다.

이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다. layoutExtendMain.html 는 현재 페이지인데, 자체를 th:replace 를 사용해서 변경하는 것을 확인 할 수 있다. 결국 layoutFile.html 에 필요한 내용을 전달하면서 자체를 layoutFile.html 로 변경 한다

 

 

 

19. 정리

타임리프 쪼아

저작자표시

'Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 스프링 통합과 폼  (0) 2024.01.25
댓글
최근에 올라온 글
최근에 달린 댓글
링크
Total
Today
Yesterday