ye._.veloper

[ SpringMVC2 ] Thymeleaf 정의 | 기본 기능 본문

Spring

[ SpringMVC2 ] Thymeleaf 정의 | 기본 기능

ye._.veloper 2023. 4. 23. 13:31

☁ 특징

    · 서버 사이드 HTML 렌더링 (SSR; Server Side Rendering)

        - 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용

 

    · Natural Templates

        - 순수 HTML을 최대한 유지하는 특징

 

        - 예를 들어 JSP 파일 자체를 그대로 웹 브라우저에서 열어보면 JSP 소스 코드와 HTML이 뒤죽박죽 섞여 웹 브라우저에서 정상적인 HTML 결과를

          확인할 수 없다.

        ➡ 오직 서버를 통해서 JSP가 렌더링 되고 HTML 응답 결과를 받아야 화면을 확인할 수 있다.

 

        - 반면, 타임리프로 작성된 파일은 해당 파일을 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과 확인 가능

        ➡ 물론 이 경우 동적으로 결과가 렌더링 되지는 않지만, HTML 마크업 결과가 어떻게 되는지 파일만 열어도 바로 확인 가능

 

        💡 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 Natural Templates라 한다. 

 

    · Spring 통합 지원

        - 타임리프는 스프링의 다양한 기능을 편리하게 사용 가능

 

☁ 기본 기능

    ◽ 타임리프 사용 선언

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

 

    ◽ 기본 표현식

• 간단한 표현:
	◦ 변수 표현식: ${...}
	◦ 선택 변수 표현식: *{...}
	◦ 메시지 표현식: #{...}
	◦ 링크 URL 표현식: @{...}
	◦ 조각 표현식: ~{...}

• 리터럴
	◦ 텍스트: 'one text', 'Another one!',…
	◦ 숫자: 0, 34, 3.0, 12.3,…
	◦ 불린: true, false
	◦ 널: null
	◦ 리터럴 토큰: one, sometext, main,…

• 문자 연산:
	◦ 문자 합치기: +
	◦ 리터럴 대체: |The name is ${name}|

• 산술 연산:
	◦ Binary operators: +, -, *, /, %
	◦ Minus sign (unary operator): -

• 불린 연산:
	◦ 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: _

 

    ◽ 텍스트 - text. utext

    · 타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다.

        HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text 를 사용

<span th:text="${data}"></span>

 

    · HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용

[[${data}]]

예시)
<ul>
	<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>

 

    ◽ Escape

    · HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다.

       따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.

 

* 변경 전
"Hello World!"

* 변경 후
"Hello <b>World!</b>"

    · <b> 태그를 사용해서 World! 라는 단어가 진하게 나오도록 해볼 것이다.

웹 브라우저: Hello <b>Spring!</b>

소스보기: Hello &lt;b&gt;Spring!&lt;/b&gt;

    · <b> 태그로 강조되는 것이 아니라 소스에 그대로 출력된다.

 

 

☁ HTML Entity

    · 웹 브라우저는 < 를 HTML 태그의 시작으로 인식한다.

      따라서 < 를 태그의 시작이 아닌 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다.

 

    · 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(Escape)라 한다.

      타임리프가 제공하는 th:text, [[...]] 는 기본적으로 Escape를 제공한다.

표시 문자 엔티티 문자
< &lt;
> &gt;
기타 수많은 HTML 엔티티가 있다.

 

    ◽ Unescape

    · 위의 Escape 기능을 사용하지 않으려면 타임리프가 제공하는 아래 두 가지 기능을 사용하면 된다.

      좌측의 Escape 문법이 아닌 우측의 Unescape 방식으로 작성하면 된다.

Escape Unescape
th:text th:utext
[[...]] [(...)] 
/* th:text ➡ th:utext */
<ul>
     <li>th:text = <span th:text="${data}"></span></li>
     <li>th:utext = <span th:utext="${data}"></span></li>
</ul>


/* [[...]] ➡ [(...)] */
<ul>
	<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
 	<li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>

💡 th:inline="none" : 타임리프는 [[...]]를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다.

                                          이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.

 

 

💭 실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다.

       escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.

 

 

💭 공식 문서 바로 가기 : https://www.thymeleaf.org/

 

Thymeleaf

Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati

www.thymeleaf.org

 

 

Ref. 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 (인프런 - 김영한님 강의)

'Spring' 카테고리의 다른 글

[ SpringMVC2 ] Thymeleaf (타임리프 기본, 유틸리티 객체와 날짜, URL 링크)  (0) 2023.05.02
[ SpringMVC2 ] Thymeleaf (변수 - SpringEL)  (0) 2023.04.25
[ IntelliJ ] Unmapped Spring configuration file : 파일명  (0) 2023.02.14
[ Spring Boot ] 1. 게시판 만들기 - 초기 개발 설정하기  (0) 2023.02.11
[ Error ] nested exception is org.apache.ibatis.exceptions.PersistenceException 오류  (0) 2023.02.05
'Spring' Related Articles more
Comments