https://catsbi.oopy.io/32a9458e-f452-4733-b87c-caba75f98e2d
1. 타임리프 - 기본 기능
목차
catsbi.oopy.io
1. 타임리프 소개
특징
•
서버 사이드 HTML 렌더링(SSR)
: 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다.
사용법은 SSR이 다 비슷하기에 학습하기에도 어렵지 않고, 페이지가 어느정도 정적이고 빠른 생산성이 필요한 경우 백엔드 개발자가 개발해야하는 일이 생기는데 이 경우 타임리프는 좋은 선택지이다.
•
네츄럴 템플릿
:타임리프는 순수한 HTML을 최대한 유지하려는 특징이 있다. 이게 JSP와의 큰 차이점으로 타임리프로 작성한 파일은 확장자도 .HTML이고 웹 브라우저에서 직접 파일을 열어도 내용을 확인할 수 있다.
물론, 이 경우 동적인 결과 렌더링은 되지 않지만 HTML 마크업 언어가 어떻게 되는지 확인할 수 있다.
•
스프링 통합 지원
:타임리프는 스프링과 자연스럽게 통합되어 스프링의 다양한 기능을 쉽게 사용할 수 있다.
사용법
타임리프는 문서 최상단에 다음과 같은 코드를 넣어서 사용할 수 있다.
<html xmlns:th="http://www.thymeleaf.org">
HTML
문법 요약
아래에서 더 자세히알아보겠지만 타임리프에서 사용하는 문법은 다음과 같다.
간단한 표현
변수 표현식: ${...}
선택 변수 표현식: *{...}
메세지 표현식: #{...}
링크 URL 표현식: @{...}
조각 표현식: ~{...}
리터럴
텍스트: 'one text', 'Anothr one!', ...
숫자: 0, 34, 3.0, 12.3, ...
불린: true, false
널: null
리터럴 토큰: one, sometext, main, ...
문자 연산
문자 합치기: +
리터럴 대체: | The name is ${name}|
산술 연산
Binary operators: +, -, *, /, %
Minus sign (unary operatior): -
불린 연산
Binary operators: and, or
Boolean negation (unary operator): !, not
비교와 동등
비교: >, <, >=, <= (gt, lt, ge, le)
동등 연산: ==, != (eq, ne)
조건 연산
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
특별한 토큰
No-Operation: _
2. 텍스트 - text, utext
서버에서 Model에 담아준 각종 속성(attribute)들을 서버사이드 템플릿 엔진인 타임리프에서는 여러 방법으로 표현을 할 수 있다. 가장 기본적인 텍스트 출력 문법은 다음과 같다.
1.
th:text
<span th:text="${attributeName}"></span>
HTML
2.
[[...]]
<span>hello [[${attributeName}]]</span>
HTML
예제
기존에 생성한 프로젝트를 이용해 예제코드를 작성해보자.
•
BasicController
@Controller @RequestMapping("/basic") public class BasicController { @GetMapping("text-basic") public String textBasic(Model model) { model.addAttribute("data", "Hello Spring"); return "basic/text-basic"; } }
Java
•
basic/text-basic.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>컨텐츠 데이터 출력하기</h1> <ul> <li>th:text 사용<span th:text="${data}"></span></li> <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li> </ul> </body> </html>
HTML
•
실행 결과
Escape
만약 서버에서 속성으로 추가할 데이터에 html 태그(ex: <b></b>)를 추가해서 타임리프에서 태그효과까지 같이 사용하고 싶다면 어떻게 해야할까? 컨트롤러에서 model.addAttribute("data", "<b>spring!</b>"); 이렇게 작성하면 될까? 다음 화면은 단순히 서버에서 addAttribute에 태그가 포함된 속성을 추가했을때의 결과다.
우리가 의도한대로 나오지 않고 태그까지 다 출력되버렸다. 이를 소스보기를 통해 살펴보면 다음과 같이 나온다.
타임리프가 제공하는 th:text, [[...]] 은 기본적으로 이스케이프(escape)를 제공하기 때문인데, 그 때문에 HTML에서 사용하는 특수 문자(ex: <, >)를 태그의 시작이 아닌 문자로 표현할 수 있도록 <,b> 이런식으로 변경되며 이를 HTML 엔티티라 한다.
그럼 어떻게 의도대로 사용하지? Unescape!
그래서 다시 본론으로 돌아와서 내가 HTML 엔티티로 변경하지 않고 HTML 태그로 사용하고 싶다면 어떻게 해야할까? 다시 말해 escape되지않고 unescape하게 쓰고싶다면 어떻게 해야할까?
타임리프에서는 이를 위해 두 가지 기능을 제공한다
•
th:utext
•
[(...)]
⇒ 사용 예제
<h1>text vs utext</h1> <ul> <li>th:text 사용<span th:text="${data}"></span></li> <li>th:utext 사용<span th:utext="${data}"></span></li> </ul> <h1><span th:inline="none">[[...]] vs [(...)]</span> </h1> <ul> <li><span th:inline="none">[[...]] = </span>[[${data}]] </li> <li><span th:inline="none">[(...)] = </span>[(${data})] </li> </ul>
HTML
•
참고: th:inline은 이 태그안에 있는 내용은 타임리프가 해석하지말라는 의미의 옵션인다.
•
실행 결과
'Spring' 카테고리의 다른 글
| jdbc mysql 연결 시험 코드 (0) | 2023.01.15 |
|---|---|
| MariaDB의 JDBC 연결 (0) | 2023.01.15 |
| JSP MVC 2 mariadb query 관련 (0) | 2022.12.17 |
| jstl formatDate 출력 (0) | 2022.12.15 |
| jsp jstl forEach문 활용(https://mr-cho.tistory.com/212) (0) | 2022.12.14 |