티스토리 뷰

개발

[Web] Thymeleaf

koreatech 2024. 7. 3. 11:53

 

Thymeleaf 특징

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

  SSR, CSR 관련 정리했던 사항들

  https://wary-option-4de.notion.site/4-1-1-61c1ed72dad44cb5a93f0b62713c62e4?pvs=4

 

4.1 서버 사이드 랜더링이란? (1) | Notion

SSR vs CSR( ≒ SPA; 다른 개념이지만 현재 책에선 비슷한 개념으로 작성 ) SSR(Server-Side Rendering) 렌더링과 라우팅에 필요한 대부분의 기능을 서버에 의존하는 방식 ex) Amazon, eBay, Naver, .. CSR(Client-Side Ren

wary-option-4de.notion.site

2. Natural Template

  순수 HTML을 유지하면서 View Template도 사용 가능

  *View Template

  : 템플릿 엔진이 아직 해석하지 않은 HTML 파일

  : 문서 내에 Thymeleaf, JSP, .. 등의 구문이 포함되어 있어도 그 자체로 동적 HTML을 만들어내지는 않음

 

  *(Web) Template Engine
  : 지정된 템플릿 양식과 데이터가 합쳐져서 HTML 문서를 출력하는 소프트웨어

  : 동적 웹 페이지를 만들기 위해 사용하는 코드뭉치


  (Web) Template Engine 종류

  1) Servlet(서블릿)

  2) JSP(Java Server Pages)

  3) Thymeleaf(타임리프)

  ...

  

3. 스프링 통합 지원

  Thymeleaf는 Spring에서 권장하는 Template Engine이며 HTML 기반의 Template을 작성하여 동적인 데이터를 렌더링함

  HTML을 기반으로 작성되기에 렌더링 없이도 마크업된 Template을 확인할 수 있고 조건/반복 등의 문법도 지원함 

 

4. 자바코드를 사용할 수 없고 커스텀 태그 기능을 지원하지 않는다.

  JSP와의 차이점. Thymeleaf는 html파일(뷰 템플릿)을 가져와서 정해진 위치에 있는 데이터를 치환해 웹페이지를 생성한다. 페이지를 생성하는데 필요한 정보를 태그의 속성으로 넣고, remove 속성을 이용해서 실제 생성될 페이지에서는 제거될 태그를 넣을 수 있어서 페이지의 프로토타입을 제공할 수 있다

 

  JSP, Thymeleaf는 둘 다 MVC 패턴에서 주로 사용되며 View 역할을 담당한다.

 Thymeleaf 기본 표현식

더보기 
<!DOCTYPE HTML>
<!-- 타임리프 사용을 위해 추가 -->
<html xmlns:th="http://www.thymeleaf.org">

<!-- 1. 변수표현식 ${...} 
스프링 EL(Expression Language)
JSP : <%= 변수명 %>		<% session.getAttribute("userId") %>
EL :${ 변수명 }			${userId} 
th:text와 함께 사용, HTML 콘텐츠의 내용을 바꾸는데 주로 사용된다.



Object
- ${board.boardname} = 변수 값
- ${board['boardname']} = 변수 값
- ${board.getBoardName()} = 변수 값 
 . . .
--> 

<ul>Object
    <li>${board.boardname} = <span th:text="${board.boardname}"></span></li>
    <li>${board['boardname']} = <span th:text="${board['boardname']}"></span></li>
    <li>${board.getBoardName()} = <span th:text="${board.getBoardName()}"></span></li>
</ul>
<ul>List
    <li>${board[0].boardname} = <span th:text="${board.boardname}"></span></li>
    <li>${board[0]['boardname']} = <span th:text="${board['boardname']}"></span></li>
    <li>${board[0].getBoardName()} = <span th:text="${board.getBoardName()}"></span></li>
</ul>
<ul>Object
    <li>${board['변수 값'].boardname} = <span th:text="${board.boardname}"></span></li>
    <li>${board['변수 값']['boardname']} = <span th:text="${board['boardname']}"></span></li>
    <li>${board['변수 값'].getBoardName()} = <span th:text="${board.getBoardName()}"></span></li>
</ul>


<!-- 2. URL 링크 @{/...}
th:href와 함께 사용 -->

<!-- 단순 URL 
렌더링 시, "/index"로 이동-->
<a th:href="@{/index}"</a>

<!-- 쿼리 파라미터
렌더링 시, "/index?id=사용자Id&name=사용자이름" 로 이동 
@{ /index(쿼리 파라미터 표현식 작성) } -->
<a th:href="@{/index(id=${userId}, name=${userName})}"></a>

<!-- 경로 변수
렌더링 시, "/index/사용자Id/게시판Id"로 이동
@{ /index/{경로변수}( 표현식 작성) } -->
<a th:href="@{/index/{id}/{board}(id=${userId}, board=${boardId})}"></a>


<!-- 쿼리 파라미터 + 경로 변수
렌더링 시, /index/사용자Id?board=게시판Id 로 이동-->
<a th:href="@{/index/id(id=${userId}, board=${boardId})}"></a>


<!-- 3. 자바8 형식 날짜 LocalDate, LocalDateTime 
추가 라이브러리('thymeleaf-extras-java8time') 필요
관련 유틸리티 객체: #temporals

${localDateTime} = LocalDateTime.now() 라고 가정

- localDateTime(default) = 2024-07-03T14:08:271312
- localDateTime(yyyy-MM-dd HH:mm:ss) = 2024-07-03 14:08:27  -->
<li>localDateTime(default) = <span th:text="${localDateTime}"></span></li>
<li>localDateTime(yyyy-MM-dd HH:mm:ss) = <span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span></li>


<!-- 4. 리터럴(literals) '...', |...|
리터럴 == "값"; 코드 내에 정적인 상태로 고정되어 그 자체로 변하지 않는 의미를 지니는 값 
ex) "Java"는 문자 리터럴, 1 2 3 ... 는 숫자 리터럴 
Thymelief Literals
- 표현방식1 : 저장된값
- 표현방식2 : 저장된값-->

<span th:text="'Thymelief Literals'"></span>
<li><span th:text="'표현방식1 : ' + ${i}"></span></li>
<li><span th:text="|표현방식2 : ${i}|"></span></li>


<!-- 5. 연산자
자바와 동일하게 사용된다.
다만 HTML 내부에서 사용하는 것이므로 HTML 엔티티를 사용하는 부분은 주의가 필요
ex) 비교연산자( >, <, >=, <=, !, ==. !=, ...)의 경우는 CDATA 형식으로 작성한다. 
- 1 + 2 = 3
- 1 > 2 = 2  -->
<li>10 + 2 = <span th:text="1 + 2"></span></li>
<li>1 > 10 = <span th:text="1 &gt; 2"></span></li> -->

<!-- 6. 조건식 A ? B : C
≒ 삼항 연산자
- 짝수 -->
<li><span th:text="(10 % 2 == 0)? '짝수' : '홀수'"></span></li>

<!-- 7. Elvis(엘비스) 연산자 ?:
- ${data}에 저장된 데이터 출력
- 데이터가 없습니다. -->
<li><span th:text="${data}?: '데이터가 없습니다'"></span></li>
<li><span th:text="${nullData}?: '데이터가 없습니다'"></span></li>

<!-- 8. No-Operation _
_ 인 경우, 타임리프가 실행되지 않은 것처럼 HTML 원문의 내용을 그대로 사용
- ${data}에 저장된 데이터 출력
- 데이터가 없습니다. -->
<li><span th:text="${data}?: _">데이터가 없습니다.</span></li>
<li><span th:text="${nullData}?: _">데이터가 없습니다.</span></li>

<!-- 9. 유틸리티 객체
문자, 숫자, 날짜, URI 등을 편하게 다루기 위해 사용된다
- #message : 메시지, 국제화 처리. ( ≒ #{...} )
- #uris : URL/URI 이스케이프 지원
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원 ( ≒ #dates )
- #temporals : 자바8 날짜 서식 지원 
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #bools : boolean 관련 기능 제공
- #arrays : 배열 관련 기능 제공
- #lists , #sets , #maps : 컬렉션(리스트, 집합, 맵, ...) 관련 기능 제공
- #ids : (주로 반복될 수 있는)아이디 처리 관련 기능 제공 -->

</html>

 

유틸리티 객체( https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax)

Thymeleaf 태그

기본적으로 HTML 태그 속성의 기능을 정의해서 동작

더보기 
<!DOCTYPE HTML>
<HTML>
<!-- 1. th:text, [[...]]] (변수) -->

<!-- 2. th:utext, [( ... )] (escape) -->

<!-- 3. th:with (지역변수) -->

<!-- 4. th:href (링크)-->

<!-- 5. 속성 값 설정 (th:name, th:attrappend, th:attrprepend, th:classappend,
th:checked, ...) -->

<!-- 6. th:each (반복) 
- index: 0부터 시작하는 값
- count: 1부터 시작하는 값
- size: 전체 사이즈
- even, odd: 홀수, 짝수 여부 (return값 boolean type)
- first, last: 처음, 마지막 여부 (return값 boolean type)
- current: 현재 객체 -->

<!-- th:if, th:unless, th:switch (조건문) -->

<!-- 8. th:block ( 블록 ) -->
</HTML>

Spring에서의 Thymeleaf 환경세팅

더보기

1. Dependency 추가

# gradle | build.gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

# maven | pom.xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 

2. resources/application.properties 에 ViewResolver 관련 설정 추가

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

 

3. 태그 라이브러리 선언

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

 

4. 태그를 사용하여 동적 데이터를 바인딩

// Spring Boot Code
// testView라는 이름의 View 파일에 결과 전달
@GetMapping("/testView")
public String testView(Model model) {
	model.addAttribute("test", "테스트 뷰");
    return "testView";
}
// HTML Code
// Thymeleaf의 ${test} 결과를 전달하여 출력
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <p th:text="${test}"></p>
</body>
</html>

 

 

출처

https://imgzon.tistory.com/143

 

[Thymeleaf] Thymeleaf(타임리프)의 특징과 기본 표현식, 태그 속성

1. 개요 이번 게시물에서는 Thymeleaf의 특징, 기본 표현식, 태그 속성들에 대해 정리해볼 것이다. 해당 게시물에서는 타임리프만의 특징들에 대해서 정리해볼 예정이며, 다음 게시물에서는 spring과

imgzon.tistory.com

 

https://velog.io/@doridam1116/SpringMVC-View-Template%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%ED%95%B4%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95

 

SpringMVC 🌱 View Template에 대한 이해와 사용법

Spring View, template Engine에 대해 알아본다.

velog.io

 

https://catsbi.oopy.io/32a9458e-f452-4733-b87c-caba75f98e2d

 

1. 타임리프 - 기본 기능

목차

catsbi.oopy.io

 

 

https://code-lab1.tistory.com/211

 

[Web] 템플릿 엔진, JSP, Thymeleaf란? 서버 사이드 템플릿 엔진 vs 클라이언트 사이드 템플릿 엔진

템플릿 엔진이란? 템플릿 엔진은 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트를 말한다. 특히, 웹 템플릿 엔진은

code-lab1.tistory.com

 

 

https://snepbnt.tistory.com/118

 

[JAVA SPRING] : EL 과 JSTL

EL(Expression Language) JSP의 출력 문법을 대체하는 표현 언어 JSP에서의 값 표기법이며, i는 변수 ${ i } EL에서의 값 표기법이며, i는 이름 JSP 2.0에서 새로 추가된 스크립트 언어로서, 기존의 표현식(Expre

snepbnt.tistory.com

 

 

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax

 

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

 

https://www.inflearn.com/questions/837879/%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%97%94%EC%A7%84%EA%B3%BC-%EB%B7%B0-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A7%88%EB%AC%B8

 

템플릿 엔진과 뷰 템플릿에 대한 질문 - 인프런

안녕하세요. 멋진 강의 잘 수강하고 있습니다!강의를 듣다보니 용어에 대한 궁금함이 생겨 질문합니다.템플릿 엔진은 HTML 문서에 동적으로 생성하는 JSP나 타임리프와 같은 소프트웨어를 지칭하

www.inflearn.com

 

'개발' 카테고리의 다른 글

[ Oracle Cloud ] MySQL 서버 세팅  (0) 2024.07.13
ONOS 설치 이슈 7899  (0) 2024.07.03
[Markup] CDATA 관련  (0) 2024.07.03
[Web] JSP vs Servlet  (0) 2024.07.02
[Protocol] SNMP  (0) 2024.06.14
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함