2022. 8. 7. 21:42ㆍWeb/Spring
타임리프란?
- SSR - 서버 사이드 렌더링
JSP / Servlet 등과 같이 서버사이드 렌더링 기술이다. SSR을 사용 시 데이터가 매핑이 된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 이는 기존의 프런트엔드의 React 혹은 다른 기술을 사용해서 보여줄 수 있지만 그렇게 하면서 개발을 하기에는 다시 프런트의 기술에 대해 세세하게 공부를 해야 한다. 우리가 필요한 것은 백엔드를 개발하면서 우리가 필요한 부분을 간략하게 보여주는 것을 원한다. 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 해주는 용도로 사용이 된다.
- 내추럴 템플릿
순수 HTML을 유지하는 특성을 가지고 있다. 타임리프를 활용하여 작성된 파일은 HTML을 유지하기에 스프링으로 서버를 실행하지 않아도 웹 파일로 확인이 가능하며 서버를 통하면 동적으로 각 결괏값을 확인 가능하다.
- 스프링 통합지원
타임리프와 스프링은 처음에는 별개로 개발이 되었지만 시간이 지나면서 자연스럽게 통합이 되었다. 그렇게 되면서 스프링의 다양한 기능을 편리하게 사용할 수 있게 되었다. 바로 이점이 타임리프의 사용법을 공부하려는 목적이 되었다.
- 타임리프에서 지원하는 공식 문서이다.
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
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
Tutorial: Thymeleaf + Spring
Preface This tutorial explains how Thymeleaf can be integrated with the Spring Framework, especially (but not only) Spring MVC. Note that Thymeleaf has integrations for both versions 3.x and 4.x of the Spring Framework, provided by two separate libraries c
www.thymeleaf.org
타임리프 사용방법
타임리프를 사용하기위해서는 2가지를 알아둬야 한다.
- build.gradle 파일에 타임리프 지정
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
- 타임리프 사용선언
<html xmlns:th="http://www.thymeleaf.org">
Text - text / utext
정보는 문자와, 시각적 자료를 통해 전달이 된다. 정보 및 사용자에 요청에 맞는 요청사항의 전달에 있어서 텍스트는 아주 기본적인 사항이다. 타임리프는 텍스트를 두 가지의 경우로 전달을 한다. 먼저 표현식을 보면 각각의 경우 표현식은 이러하다.
- text [[...]]
- utext [(...)]
이렇게 두 개의 경우로 나눠진다. 그럼 이 두 가지의 차이점에 대해 알아보자. 이 두 가지는 바로 Escape의 차이점이다.
기존 HTML의 경우 <,> 이러한 특수 문자를 기반으로 정해진 약속에 따라 화면에 출력한다. 그렇다면 이러한 특수문자가 전달하고자 하는 데이터 안에 들어가 있으면 어떻게 될까? 혹은 우리가 특수문자를 그대로 출력하고자 하는데 이 특수문자가 HTML의 요소로 판정이 되어 원하는 대로 출력이 안되면 어떻게 될까? 이때 HTML에서 사용하는 특수문자를 그대로 출력하게 해주는 것이 바로 이스케이프(escape)다.
# 기존에 전달하고자 하는 데이터
"friend"
# 전달하고자 하는 데이터 안에 특수문자가 들어간 경우
"<b>friends</b>"
# 전달하고자 하는 데이터안에 있는 글자를 좀 더 굵게 출력을 하고자 HTML의 <b> 태그를 사용하였다
이를 보면 차이점이 보일 것이다. 기존의 text의 경우 < , >의 특수문자가 다른 문자로 대체된 것이 보인다. 이러한 점은 기존에 문자를 강조하고자 하는 <b> 태그의 역할이 소용이 없게 되지만 utext의 경우 해당 태그가 잘 표현이 된 것으로 보인다.
우리는 이러한 특수문자의 활용 및 표현을 위해 text와 utext를 잘 구분해서 사용해야 한다.
변수 - SpringEL
타임리프에서는 변수를 사용할 때 변수 표현식을 사용한다.
- 변수 표현식 - ${....}
그리고 이러한 변수 표현식에서 Spring EL이라는 스프링이 지원하는 표현식을 사용 가능하다.
@Data
static class User {
private String username;
private int age;
public User(String username, int age) {
this.username = username;
this.age = age;
}공부할 때 사용되었던 예제 코드와 값을 넣는 과정이다.
@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);
model.addAttribute("user", userA);
model.addAttribute("users", list);
return "basic/variable";보면 각각 user 객체 / list에 저장이 된 객체로 저장이 된 객체를 가져와서 예시를 들었다.
<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>
variable 메서드를 보면 마지막에 model.addAttribute를 통해 model에 값을 전달하였다. 그리고 이러한 과정을 통해 전달이 된 각각의 객체와 리스트들은 타임리프에서 표현이 되고 출력이 되었다. 해당 타임리프 템플릿에서는 3가지 방법으로 각각에 모델에서 저장된 프로퍼티에 접근 및 호출을 하였다.
지역변수
타임리프 템플릿에서도 지역변수를 사용할 수 있다.
지역변수는 다른 언어에서와 같이 선언된 태그 안에서만 사용할 수 있다. th:with을 사용해서 사용 가능하다.
<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>
'Web > Spring' 카테고리의 다른 글
| [Error] java: package org.springframework.boot does not exist (0) | 2022.10.01 |
|---|---|
| [Spring] @NoArgsConstructor, @AllArgsConstructor, @RequiredArgsConstructor 생성자 어노테이션 개념 (0) | 2022.08.09 |
| [Spring] MVC 패턴이란? (0) | 2022.08.04 |
| [Spring] 레이어드 아키텍쳐(Layered Architecture) (0) | 2022.07.25 |
| [Spring] Spring boot와 Mysql 연동 (Gradle) (5) | 2022.06.13 |