쌩로그

스프링 MVC 2편 - Ch01. 타임리프 - 기본기능 본문

Spring/Spring & Spring Boot

스프링 MVC 2편 - Ch01. 타임리프 - 기본기능

.쌩수. 2024. 5. 1. 14:07
반응형

목록

  1. 포스팅 개요
  2. 본론
      2-1. 타임리프 소개
      2-2. 텍스트 - text.utext
      2-3. 변수 - SpringEL
      2-4. 기본 객체들
      2-5. 유틸리티 객체와 날짜
      2-6. URL 링크
      2-7. 리터럴
      2-8. 연산
      2-9. 속성 값 설정
      2-10. 반복
      2-11. 조건부 평가
      2-12. 주석
      2-13. 블록
      2-14. 자바스크립트 인라인
      2-15. 템플릿 조각
      2-16. 템플릿 레이아웃1
      2-17. 템플릿 레이아웃2
  3. 요약

1. 포스팅 개요

인프런에서 영한님의 스프링 MVC 2편 Section 01 타임리프 - 기본기능을 학습하며 정리한 포스팅이다.

참고로 프로젝트 생성 부분은 생략하고, build.gradle 만 다음과 같이 올린다.
그리고 인텔리제이의 lombok 설정, build방식을 각자의 스프링 부트 버전에 맞게 설정하면 된다.

참고로 3.x부터는 인텔리제이가 아닌 gradle로 빌드하면된다.
그리고 나는 자바 21을 사용한다.

plugins {  
    id 'java'  
    id 'org.springframework.boot' version '3.2.5'  
    id 'io.spring.dependency-management' version '1.1.4'  
}  

group = 'hello'  
version = '0.0.1-SNAPSHOT'  

java {  
    sourceCompatibility = '21'  
}  

configurations {  
    compileOnly {  
        extendsFrom annotationProcessor  
    }  
}  

repositories {  
    mavenCentral()  
}  

dependencies {  
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'  
    implementation 'org.springframework.boot:spring-boot-starter-web'  
    compileOnly 'org.projectlombok:lombok'  
    annotationProcessor 'org.projectlombok:lombok'  
    testImplementation 'org.springframework.boot:spring-boot-starter-test'  
}  

tasks.named('test') {  
    useJUnitPlatform()  
}

프로젝트의 resrouces/static에 index.html을 생성해서 다음과 같이 넣어준다.

<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<ul>  
    <li>텍스트  
        <ul>  
            <li><a href="/basic/text-basic">텍스트 출력 기본</a></li>  
            <li><a href="/basic/text-unescaped">텍스트 text, utext</a></li>  
        </ul>    </li>    <li>표준 표현식 구문  
        <ul>  
            <li><a href="/basic/variable">변수 - SpringEL</a></li>  
            <li><a href="/basic/basic-objects?paramData=HelloParam">기본 객체들</  
                a></li>  
            <li><a href="/basic/date">유틸리티 객체와 날짜</a></li>  
            <li><a href="/basic/link">링크 URL</a></li>  
            <li><a href="/basic/literal">리터럴</a></li>  
            <li><a href="/basic/operation">연산</a></li>  
        </ul>    </li>    <li>속성 값 설정  
        <ul>  
            <li><a href="/basic/attribute">속성 값 설정</a></li>  
        </ul>    </li>    <li>반복  
        <ul>  
            <li><a href="/basic/each">반복</a></li>  
        </ul>    </li>    <li>조건부 평가  
        <ul>  
            <li><a href="/basic/condition">조건부 평가</a></li>  
        </ul>    </li>    <li>주석 및 블록  
        <ul>  
            <li><a href="/basic/comments">주석</a></li>  
            <li><a href="/basic/block">블록</a></li>  
        </ul>    </li>    <li>자바스크립트 인라인  
        <ul>  
            <li><a href="/basic/javascript">자바스크립트 인라인</a></li>  
        </ul>    </li>    <li>템플릿 레이아웃  
        <ul>  
            <li><a href="/template/fragment">템플릿 조각</a></li>  
            <li><a href="/template/layout">유연한 레이아웃</a></li>  
            <li><a href="/template/layoutExtend">레이아웃 상속</a></li>  
        </ul>    </li></ul>  
</body>  
</html>

서버 실행 후, localhost:8080으로 들어가면 다음과 같이 나오면 된다.
각 항목들은 강의를 통해서 채워질 내용들이다.

그리고 postman도 다운받아주면 된다.

2. 본론

2-1. 타임리프 소개

각 공식 문서는 다음과 같다.

타임리프 특징

  • 서버 사이드 HTML 렌더링 (SSR)
  • 네츄럴 템플릿
  • 스프링 통합 지원

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

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

네츄럴 템플릿

  • 타임리프는 순수 HTML을 최대한 유지하는 특징이 있다.
  • 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
  • JSP를 포함한 다른 뷰 템플릿들은 해당 파일을 열면, 즉 예를 들어서 JSP 파일 자체를 그대로 웹 브라우저에서 열어보면 JSP 소스코드와 HTML이 뒤죽박죽 섞여서 웹 브라우저에서 정상적인 HTML 결과를 확인할 수 없다. 오직 서버를 통해서 JSP가 렌더링 되고 HTML 응답 결과를 받아야 화면을 확인할 수 있다.
  • 반면 타임리프로 작성된 파일은 해당 파일을 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과를 확인할 수 있다.
  • 물론 이 경우 동적으로 결과가 렌더링 되지는 않는다. 하지만 HTML 마크업 결과가 어떻게 되는지 파일만 열어도 바로 확인할 수 있다.
  • 이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 한다.

스프링 통합 지원

  • 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.
  • 이 부분은 스프링 통합과 폼 장에서 자세히 알아보겠다.

타임리프 기본 기능

  • 타임리프를 사용하려면 다음 선언을 하면 된다.
  • <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: _

등등이 있다.

참고 사이트 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax

2-2. 텍스트 - text.utext

타임리프의 가장 기본 기능인 텍스트를 출력하는 기능이다.

타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다.
HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text 를 사용하면 된다.
HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용하면 된다.
컨텐츠 안에서 직접 출력하기 = [[${data}]]

hello.thyemleaf.basic에서 BasicController를 작성하자.

package hello.thyemleaf.basic;  

import org.springframework.stereotype.Controller;  
import org.springframework.ui.Model;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RequestMapping;  

@Controller  
@RequestMapping("/basic")  
public class BasicController {  


    @GetMapping("text-basic")  
    public String textBasic(Model model) {  
        model.addAttribute("data", "Hello Spring!");  
        return "basic/text-basic";  
    }  

}

그러면 다음과 같이 resources/basic/test-basic.html이 있어야 한다.

text-basic.html을 다음과 같이 작성하자.

<!DOCTYPE html>  
<html 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

확인해보면 다음과 같이 나온다.

두 줄의 차이는

  • 태그를 통해서 출력하는지,
  • 바로 직접 출력하는지
    의 차이다.

Escape
HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다.
따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.
앞에서 만든 예제의 데이터를 다음과 같이 변경해서 실행해보자.

예를 들면 다음과 같다.

"Hello Spring!" 글자에서 Spring!만 굵게 하게 하기 위해서 다음과 같이 model에 넣었다.

model.addAttribute("data", "Hello <b>Spring!</b>");

서버재실행 후 확인해보면 다음과 같이 나온다.

페이지 소스는 다음과 같이 나온다.

의도한 것은 <b>가 있으면 해당 부분을 강조하는 것이 목적이었다.
그런데 <b>태그가 그대로 나온다.
소스보기를 하면 < 부분이 &lt; 로 변경된 것을 확인할 수 있다.****

HTML 엔티티

웹 브라우저는 < 를 HTML 태그의 시작으로 인식한다.
따라서 < 를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다.
그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다.

그리고 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.

  • < -> &lt;
  • > -> &gt;
  • 기타 수 많은 HTML 엔티티가 있다.

HTML 엔티티와 관련해서 더 자세한 내용은 HTML 엔티티로 검색해보자.

Unescape

  • 이스케이프 기능을 사용하지 않으려면 어떻게 해야할까?
  • 타임리프는 다음 두 기능을 제공한다.
    • th:text -> th:utext
    • [[...]] -> [(...)] (대괄호와 소괄호 차이)

컨트롤러(BasicController)에 추가해서 확인해보자.

@GetMapping("text-unescaped")  
public String textUnescaped(Model model) {  
    model.addAttribute("data", "Hello <b>Spring!</b>");  
    return "basic/text-unescaped";  
}

그리고 basic 경로에서 text-unescaped.html을 만들자.

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<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>  
</body>  
</html>

th:inline="none" : 타임리프는 [[...]] 를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다. (ul 의 li의 span태그쪽 참고)
이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.

결과는 다음과 같다.

다음은 페이지 소스다.

참고로 실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다.
escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.

2-3. 변수 - SpringEL

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다

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

그리고 이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다.

BasicController에 다음과 같이 추가로 작성한다.

@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;  
    }  
}

variable.html은 다음과 같이 작성해준다.

<!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>  
</ul>  
</body>  
</html>

서버를 실행한 후 결과는 다음과 같다.

페이지 소스는 다음과 같다.

Object

  • user.username : user의 username을 프로퍼티 접근 -> user.getUsername()
  • user['username'] : 위와 같음 -> user.getUsername()
  • user.getUsername() : user의 getUsername() 을 직접 호출

List

  • users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 -> list.get(0).getUsername()
  • users[0]['username'] : 위와 같음.
  • users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출

Map

  • userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 -> map.get("userA").getUsername()
  • userMap['userA']['username'] : 위와 같음.
  • userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

지역 변수 선언

variable.html에 다음과 같이 추가해준다.

...

<h1>지역 변수 - (th:with)</h1>  
<div th:with="first=${users[0]}">  
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>  
</div>

...

다음과 같은 결과가 나온다.

## 2-4. 기본 객체들

타임리프는 기본 객체들을 제공한다

  • ${#request} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#response} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#session} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#locale}

주의! - 스프링 부트 3.0

스프링 부트 3.0 부터는 ${#request} , ${#response} , ${#session} , ${#servletContext} 를 지원하지 않는다.
만약 사용하게 되면 다음과 같은 오류가 발생한다. 

Caused by: java.lang.IllegalArgumentException: The 'request','session','servletContext' and 'response' expression utility objects are no longer available by default for template expressions and their use is not recommended. In cases where they are really needed, they should be manually added as context variables.

스프링 부트 3.0이라면 직접 model 에 해당 객체를 추가해서 사용해야 한다.
메뉴얼 하단에 스프링 부트 3.0에서 사용할 수 있는 예시를 적어두었다.

스프링 부트 3.0 미만이라면 다음과 같이 작성하자. (영상 기준)

BasicController에 다음과 같이 추가로 작성하자.

@GetMapping("/basic-objects")  
public String basicObjects(HttpSession session) {  
    session.setAttribute("sessionData", "Hello Session");  
    return "basic/basic-objests";  
}  

@Component("helloBean")  
static class HelloBean {  
    public String hello(String data) {  
        return "Hello " + data;  
    }  
}

참고로 세션은 이후에 자세히 알아본다.

basic-objests.html을 다음과 같이 작성한다.

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<h1>식 기본 객체 (Expression Basic Objects)</h1>  
<ul>  
    <li>request = <span th:text="${#request}"></span></li>  
    <li>response = <span th:text="${#response}"></span></li>  
    <li>session = <span th:text="${#session}"></span></li>  
    <li>servletContext = <span th:text="${#servletContext}"></span></li>  
    <li>locale = <span th:text="${#locale}"></span></li>  
</ul>  
<h1>편의 객체</h1>  
<ul>  
    <li>Request Parameter = <span th:text="${param.paramData}"></span></li>  
    <li>session = <span th:text="${session.sessionData}"></span></li>  
    <li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></  
    li>  
</ul>  
</body>  
</html>

확인해보면, 다음과 같다.

ㅋㅋㅋㅋㅋㅋㅋ
필자는 스프링 부트 3.2라서 당연히 에러가 나온다.

3.0 이상이라면 다음과 같이 작성하자.

@GetMapping("/basic-objects")  
public String basicObjects(Model model, HttpServletRequest request, HttpServletResponse response, HttpSession session) {  
    session.setAttribute("sessionData", "Hello Session");  
    model.addAttribute("request", request);  
    model.addAttribute("response", response);  
    model.addAttribute("servletContext", request.getServletContext());  

    return "basic/basic-objests";  
}
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<h1>식 기본 객체 (Expression Basic Objects)</h1>  
<ul>  
    <li>request = <span th:text="${request}"></span></li>  
    <li>response = <span th:text="${response}"></span></li>  
    <li>session = <span th:text="${session}"></span></li>  
    <li>servletContext = <span th:text="${servletContext}"></span></li>  
    <li>locale = <span th:text="${#locale}"></span></li>  
</ul>  
<h1>편의 객체</h1>  
<ul>  
    <li>Request Parameter = <span th:text="${param.paramData}"></span></li>  
    <li>session = <span th:text="${session.sessionData}"></span></li>  
    <li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></  
    li>  
</ul>  
</body>  
</html>

결과는 다음과 같다.

#request 는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data") 처럼 불편하게 접근해야 한다.

이런 점을 해결하기 위해 편의 객체도 제공한다.

  • HTTP 요청 파라미터 접근: param
    • 예) ${param.paramData}
  • HTTP 세션 접근: session
    • 예) ${session.sessionData}
  • 스프링 빈 접근: @ (컴포넌트 접근)
    • 예) ${@helloBean.hello('Spring!')}

참고로 편의 객체의 paramData는 처음에 설정했던 static/index.html에 지정되어있다.

 <li><a href="/basic/basic-objects?paramData=HelloParam">기본 객체들</a></li>

2-5. 유틸리티 객체와 날짜

타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다.

타임리프 유틸리티 객체들

  • #message : 메시지, 국제화 처리
  • #uris : URI 이스케이프 지원
  • #dates :java.util.Date 서식 지원
  • #calendars : java.util.Calendar 서식 지원
  • #temporals : 자바8 날짜 서식 지원
  • #numbers : 숫자 서식 지원
  • #strings : 문자 관련 편의 기능
  • #objects : 객체 관련 기능 제공
  • #bools : boolean 관련 기능 제공
  • #arrays : 배열 관련 기능 제공
  • #lists , #sets , #maps : 컬렉션 관련 기능 제공
  • #ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

타임리프 유틸리티 객체

유틸리티 객체 예시

유틸리티 객체들을 필요할 때 찾아보면 된다.

자바8 날짜

타임리프에서 자바8 날짜인 LocalDate ,LocalDateTime , Instant 를 사용하려면 추가 라이브러리가 필요하다.
스프링 부트 타임리프를 사용하면 해당 라이브러리가 자동으로 추가되고 통합된다.

타임리프 자바8 날짜 지원 라이브러리

thymeleaf-extras-java8time

참고: 스프링 부트 3.2 이상을 사용한다면, 타임리프 자바8 날짜 지원 라이브러리가 이미 포함되어 있다. 따라서 별도로 포함하지 않아도 된다.

~~강의에선 의존성 쪽에서 보였는데, 부트 3.2를 쓰는 내겐 보이지 않는다.

자바8 날짜용 유틸리티 객체

  • #temporals

사용 예시를 보자.

BasicController에 다음과 같은 코드를 작성한다.

@GetMapping("/date")  
public String date(Model model) {  
    model.addAttribute("localDateTime", LocalDateTime.now());  
    return "basic/date";  
}

date.html이다.

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<h1>LocalDateTime</h1>  
<ul>  
    <li>default = <span th:text="${localDateTime}"></span></li>  
    <li>yyyy-MM-dd HH:mm:ss = <span th:text="${#temporals.format(localDateTime,'yyyy-MM-dd HH:mm:ss')}"></span></li>  
</ul>  
<h1>LocalDateTime - Utils</h1>  
<ul>  
    <li>${#temporals.day(localDateTime)} = <span th:text="${#temporals.day(localDateTime)}"></span></li>  
    <li>${#temporals.month(localDateTime)} = <span th:text="${#temporals.month(localDateTime)}"></span></li>  
    <li>${#temporals.monthName(localDateTime)} = <span th:text="${#temporals.monthName(localDateTime)}"></span></li>  
    <li>${#temporals.monthNameShort(localDateTime)} = <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li>  
    <li>${#temporals.year(localDateTime)} = <span th:text="${#temporals.year(localDateTime)}"></span></li>  
    <li>${#temporals.dayOfWeek(localDateTime)} = <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li>  
    <li>${#temporals.dayOfWeekName(localDateTime)} = <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li>  
    <li>${#temporals.dayOfWeekNameShort(localDateTime)} = <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li>  
    <li>${#temporals.hour(localDateTime)} = <span th:text="${#temporals.hour(localDateTime)}"></span></li>  
    <li>${#temporals.minute(localDateTime)} = <span th:text="${#temporals.minute(localDateTime)}"></span></li>  
    <li>${#temporals.second(localDateTime)} = <span th:text="${#temporals.second(localDateTime)}"></span></li>  
    <li>${#temporals.nanosecond(localDateTime)} = <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li>  
</ul>  
</body>  
</html>

결과는 다음과 같다.

2-6. URL 링크

타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.

BasicController에 다음과 같은 코드를 작성해준다.

@GetMapping("link")  
public String link(Model model) {  
    model.addAttribute("param1", "data1");  
    model.addAttribute("param2", "data2");  
    return "basic/link";  
}

linkhtml은 다음과 같다.

<!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>

결과는 다음과 같다.

아래는 페이지 소스다.

단순한 URL

  • @{/hello} -> /hello

쿼리 파라미터

  • @{/hello(param1=${param1}, param2=${param2})}
    • -> /hello?param1=data1¶m2=data2
    • () 에 있는 부분은 쿼리 파라미터로 처리된다.

경로 변수

  • @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
    • -> /hello/data1/data2
    • URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.

경로 변수 + 쿼리 파라미터

  • @{/hello/{param1}(param1=${param1}, param2=${param2})}
    • -> /hello/data1?param2=data2
    • 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.

상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있다.

  • /hello : 절대 경로
  • hello : 상대 경로

참고 링크 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls

참고로 경로가 위와 같이 인코딩되어있는데, 그럼에도 불구하고, 타임 리프는 제대로 경로가 들어가도록 해준다.

2-7. 리터럴

Literals

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.
예를 들어서 다음 코드에서 "Hello" 는 문자 리터럴, 10 , 20 는 숫자 리터럴이다.

String a = "Hello" 
int a = 10 * 20

참고로 이 내용이 쉬워 보이지만 처음 타임리프를 사용하면 많이 실수하는 부분이다.

타임리프는 다음과 같은 리터럴이 있다.

  • 문자: 'hello'
  • 숫자: 10
  • 불린: true, false
  • null: null

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

  • <span th:text="'hello'">

그런데 문자를 항상 ' 로 감싸는 것은 너무 귀찮은 일이다.
공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해 서 다음과 같이 작은 따옴표를 생략할 수 있다.

룰: A-Z , a-z , 0-9 , [] , . , - , _

이것들이 이어지면 하나의 토큰으로 인지한다는 것이다.

  • <span th:text="hello">

오류

  • <span th:text="hello world!"></span>
  • 위의 내용은 중간에 공백이 있다. 그래서 오류가 난다.
  • 문자 리터럴은 원칙상 ' 로 감싸야 한다.
  • 중간에 공백이 있어서 하나의 의미있는 토큰으로도 인식되지 않는다.

이래와 같이 수정해주면 된다.

수정

  • <span th:text="'hello world!'"></span>
  • 이렇게 ' 로 감싸면 정상 동작한다.

BasicController에서 다음과 같이 작성해주자.

@GetMapping("/literal")  
public String literal(Model model) {  
    model.addAttribute("data", "Spring!");  
    return "basic/literal";  
}

다음은 literal.html이다.

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<h1>리터럴</h1>  
<ul>  
    <!--주의! 다음 주석을 풀면 예외가 발생함-->  
    <!-- <li>"hello world!" = <span th:text="hello world!"></span></li>-->    <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>  
    <li>'hello world!' = <span th:text="'hello world!'"></span></li>  
    <li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>  
    <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>  
</ul>  
</body>  
</html>

리터럴 대체(Literal substitutions)

  • <span th:text="|hello ${data}|">
  • 마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하다.

결과는 다음과 같다.

참고로 위에서 주석을 한 부분을 해체하고 url을 접속하면, 에러가 발생한다.

2-8. 연산

타임리프 연산은 자바와 크게 다르지 않다.
HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하면 된다.

BasicController에 다음 메서드를 추가하자.

@GetMapping("/operation")  
public String operation(Model model) {  
    model.addAttribute("nullData", null);  
    model.addAttribute("data", "Spring!");  
    return "basic/operation";  
}

basic/operation.html을 다음과 같이 작성하자.

<!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>

서버를 실행시키고, 결과를 확인하면 다음과 같다.

아래의 No-Operation은 다음과 같다.

위와 같이 데이터가 없으면, _ 언더바가 선택되는데, 이는 연산을 하지 않는다는 것이다.
즉, 아무것도 안한다.
아무것도 안한다는 것은 그냥 html의 기능을 하는 것이다.
그래서 데이터가 없습니다.라고 출력된 것이다.

  • 비교연산: HTML 엔티티를 사용해야 하는 부분을 주의하자.
    • > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)
  • 조건식: 자바의 조건식과 유사하다.
  • Elvis(엘비스) 연산자: 조건식의 편의 버전 ?:
  • No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다.
    • 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다.
    • 마지막 예를 보면 "데이터가 없습니다." 부분이 그대로 출력 된다.

2-9. 속성 값 설정(타임리프 태그 속성(Attribute))

타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다.
th:* 로 속성을 적용하면 기존 속성을 대체한다.

즉, 

<input type="text" name="mock" th:name="userA" />

위와 같이 input 타입에서 name 속성에 mock 값이 있고,
th;의 name 속성에 userA라는 값이 있을 때,

타임리프로 렌더링 될때, name="mock" 부분이 name="userA 부분으로 대체된다.

결과가 다음과 같다는 것이다.

<input type="text" name="userA" />

만약 기존 속성이 없으면 새로 만든다.

BasicController 에 다음과 같은 메서드를 추가하자.

@GetMapping("/attribute")  
public String attribute() {  
    return "basic/attribute";  
}

basic/attribute.html을 아래와 같이 작성하자.

<!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>

서버 실행 후, 결과는 다음과 같다.

input 타입의 name이 mock이 아니라, "userA"로 되어있다.

참고로 (정적)파일은 다음과 같다.

`attrappend`, `attrprepend` 는 보면, 속성에 값을 추가해준다. 뒤에 추가하냐, 앞에 추가해주냐의 차이다. 그런데, 이 두 속성의 설정은 띄어쓰기를 신경써야 하지만, `classappend` 같은 경우에는 띄어쓰기를 할 필요없이 그냥 알아서 적절하게 잘 붙는다.

결과는 다음과 같다.

다음은 checked 이다.

HTML에는 checked가 true이든, false이든 상관없이 checked 속성이 들어가있으면, 그냥 체크가 되어있다.

결과를 보자.

먼저 (정적) 파일의 결과다.

이처럼 false, true 상관없이 그냥 checke가 있으면 체크가 되어있다.
그렇지만, 타임리프는 checked에 true, false를 줄 수 있다.

3번째 내용은 html과 다를바 없지만, 첫 번째, 두 번째 내용은 checked의 true, false에 따라 체크 표시 결과가 달라진다.

속성 설정

  • th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다.
    • 기존 속성이 없다면 새로 만든다.
    • <input type="text" name="mock" th:name="userA" /> -> 타임리프 렌더링 후 <input type="text" name="userA" />

속성 추가

  • th:attrappend : 속성 값의 뒤에 값을 추가한다.
  • th:attrprepend : 속성 값의 앞에 값을 추가한다.
  • th:classappend : class 속성에 자연스럽게 추가한다.

checked 처리

HTML에서는 <input type="checkbox" name="active" checked="false" /> -> 이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.

HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다.
이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편하다.

타임리프의 th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.

<input type="checkbox" name="active" th:checked="false" />
-> 타임리프 렌더링 후 : <input type="checkbox" name="active" />

2-10. 반복

타임리프에서 반복은 th:each 를 사용한다.
추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다.

BasicController에 다음 메서드를 추가하자.

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

private void addUser(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);  
}

basic/each.html에 다음과 같이 작성하자.

<!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>

결과는 다음과 같다.

이 부분이 반복되어 아래의 결과와 같이 나온다.

반복 기능

  • <tr th:each="user : ${users}">
  • 반복시 오른쪽 컬렉션(${users})의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복 실행한다.
  • th:each 는 List 뿐만 아니라 배열, java.util.Iterable , java.util.Enumeration 을 구현한 모 든 객체를 반복에 사용할 수 있다.
    • Map 도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry 이다.

타임리프는 반복을 할 떄 현재 반복이 어떻게 되고 있는지 상태를 알려줄 수 있는 기능을 지원한다.
<tr th:each="user, userStat : ${users}"> <= 이 부분에서 user는 유저 객체를, 그리고 userStat이 있는데, 이는 현재 컬렉션 루프에 대한 상태를 알려준다.
기능은 다음과 같다.

반복 상태 유지 기능

  • index : 0부터 시작하는 값
  • count : 1부터 시작하는 값
  • size : 전체 사이즈
  • even , odd : 홀수, 짝수 여부( boolean )
  • first , last :처음, 마지막 여부( boolean )
  • current : 현재 객체

반복 상태 유지 (정리)

  • <tr th:each="user, userStat : ${users}">
  • 반복의 두 번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있다.
  • 두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명( user ) + Stat 가 된다.
  • 여기서는 user + Stat = userStat 이므로 생략 가능하다.
  • 즉 <tr th:each="user, userStat : ${users}"> --->>> <tr th:each="user : ${users}"> 이렇게 생략할 수 있다.
    • 참고로 생략하고도 잘 나온다. 아래의 그림(전체 결과)을 확인하자.

아래는 전체 결과다.

2-11. 조건부 평가

타임리프의 조건식 if , unless ( if 의 반대) 를 지원한다.

if, unless

  • 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
  • 만약 다음 조건이 false 인 경우 <span>...<span> 부분 자체가 렌더링 되지 않고 사라진다.

    switch

    * 은 만족하는 조건이 없을 때 사용하는 디폴트이다

BasicController에 다음과 같은 메서드를 추가하자.

@GetMapping("/condition")  
public String condition(Model model) {  
    addUser(model);  
    return "basic/condition";  
}

basic/comments.html을 아래와 같이 작성하자.

<!DOCTYPE html>  
<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>

결과를 확인해보면 다음과 같다.

if, unless 쪽을 보면, userA외엔 20보다 작다는 조건에 맞지 않으므로, 미성년자라고 출력되지 않는다.

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>  
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

참고로 위의 두 줄은 같은 의미다.

switch는 10, 20 외에 *로 되어있는데, 10, 20 외에는 기타로 나오도록 한다.

<td th:switch="${user.age}">  
    <span th:case="10">10살</span>  
    <span th:case="20">20살</span>  
    <span th:case="*">기타</span>  
</td>

2-12. 주석

1. 표준 HTML 주석

자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.

2. 타임리프 파서 주석

타임리프 파서 주석은 타임리프의 진짜 주석이다.
렌더링에서 주석 부분을 제거한다.

3. 타임리프 프로토타입 주석

타임리프 프로토타입은 약간 특이한데, HTML 주석에 약간의 구문을 더했다.
HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다.
타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다.

쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다.

BasicController에 다음 메서드를 추가하자.

@GetMapping("/comments")  
public String comments(Model model) {  
    model.addAttribute("data", "Spring!");  
    return "basic/comments";  
}

basic/comments.html을 아래와 같이 작성하자.

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<h1>예시</h1>  
<span th:text="${data}">html data</span>  
<h1>1. 표준 HTML 주석</h1>  
<!--  
<span th:text="${data}">html data</span>  
-->  
<h1>2. 타임리프 파서 주석</h1>  
<!--/* [[${data}]] */-->  
<!--/*-->  
<span th:text="${data}">html data</span>  
<!--*/-->  
<h1>3. 타임리프 프로토타입 주석</h1>  
<!--/*/  
<span th:text="${data}">html data</span>  
/*/-->  
</body>  
</html>

서버를 실행 후 결과를 보면 다음과 같다.

타임리프는 아래의 부분을 렌더링하지 않는다.

아래의 부분은 타임리프 파서 주석이다.

렌더링될 때, 이 부분이 제거된다.

이처럼 지워져있다.

다음은 타임리프 프로토타입 주석이다.

이를 정적 파일로 열어보면 다음과 같다.

아래는 소스보기에서의 결과다.

여기는 HTML 주석으로 나온다.
그런데 타임리프의 렌더링된 결과를 보면 다음과 같다.

페이지 소스는 다음과 같이 나오는데,

(정적) 파일 즉 그냥 HTML에선 나오지 않지만, 타임리프로 렌더링될 때는 보여주는 기능이다.

2-13. 블록

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

BasicController에 다음 메서드를 추가하자.

@GetMapping("/block")  
public String block(Model model) {  
    addUser(model);  
    return "basic/block";  
}

basic/block.html은 다음과 같다.

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<th:block th:each="user : ${users}">  
    <div>        사용자 이름1 <span th:text="${user.username}"></span>  
        사용자 나이1 <span th:text="${user.age}"></span>  
    </div>    <div>        요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>  
    </div></th:block>  
</body>  
</html>

서버 실행 후 결과는 다음과 같다.

페이지 소스는 다음과 같다.

위 그림을 보면 div의 요소가 2개씩 돌고 있다.

users에서는 tr, td 같은 것이 아니라, div 요소를 하나가 아닌 두 개를 돌아가면서 출력하고 있는데, 아 때 사용할 수 있다.

만약 div 하나에 th:each를 쓰면 이렇게 나오지 않는다.
이처럼 블록을 정해놓고, 루프를 돌리기 때문에 위와 같은 결과가 나올 수 있는 것이다.

이처럼 타임리프의 특성상 HTML 태그안에 속성으로 기능을 정의해서 사용하는데,
위 예처럼 이렇게 사용하기 애매한 경우에 사용하면 된다.

참고로 <th:block>은 렌더링시 제거된다.

2-14. 자바스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.

<script th:inline="javascript">

BasicController에 다음과 같은 메서드를 작성하자.

@GetMapping("/javascript")  
public String javascript(Model model) {  
    model.addAttribute("user", new User("UserA", 10));  
    addUser(model);  
    return "basic/javascript";  
}

basic/javascript.html은 다음과 같다.

<!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>

참고로 서버를 실행하고 들어가면, 아무것도 보이지 않는다.

페이지 소스는 다음과 같다.

아무런 문제가 없어 보인다.
값이 잘 들어갔다.

그런데, 구글의 개발자 도구의 콘솔 내용을 보면, 다음과 같은 에러가 표시된다.

userA가 정의되지 않았다고 나온다.
자바 스크립트가 깨지고 있는 것이다.

표시한 부분에 쌍따옴표로 감싸면 에러가 없어진다.
만약 이걸 렌더링해야한다면, 계속 문자열을 감싸줘야하는 불편함이 있다.

그리고 내츄럴 템플릿을 사용하는 것에도 문제가 있다.

이처럼 주석처리 되어있다. 참고로 파일을 그대로 열었을 때 javaScript가 실행될 수 있다.
그러나 주석되었음에도 불구하고, 아래와 같이 값이 그대로 나온다.

그래서 이를 해결해주는 것이 자바스크립트 인라인(th:inline) 이다.

인라인 사용 전과 인라인 사용 후의 코드는 결과가 다르다.

  • username에는 쌍따옴표가 자동으로 들어갔다.
  • 내츄럴 템플릿의 주석이 제거되었다.
  • 객체가 JSON 형태로 나오고 있다.

자바스크립트 인라인을 사용하지 않은 경우 어떤 문제들이 있는지 알아보고, 인라인을 사용하면 해당 문제들이 어떻게 해결되는지 확인해보았다.

텍스트 렌더링

  • var username = [[${user.username}]];
    • 인라인 사용 전 : var username = userA;
    • 인라인 사용 후 : var username = "userA";
  • 인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다.
    타임리프 입장에서는 정확하게 렌더링 한 것이지만 아마 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것이다.
    결과적으로 userA가 변수 명으로 사용되어서 자바스크립트 오류가 발생한다.
    다음으로 나오는 숫자 age의 경우에는 " 가 필요 없기 때문에 정상 렌더링 된다.
  • 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 " 를 포함해준다.
    추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) " => \"

BasicController를 다음처럼 수정해보자.

@GetMapping("/javascript")  
    public String javascript(Model model) {  
//        model.addAttribute("user", new User("UserA", 10));  
        model.addAttribute("user", new User("User\"A\"", 10));  
        addUser(model);  
        return "basic/javascript";  
    }

결과는 다음과 같다.

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

타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다.
자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.

  • var username2 = /*[[${user.username}]]*/ "test username";
    • 인라인 사용 전 -> var username2 = /*userA*/ "test username";
    • 인라인 사용 후 -> var username2 = "userA";
  • 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다.
    따라서 내추럴 템플릿 기능이 동작하지 않고, 심지어 렌더링 내용이 주석처리 되어 버린다.
  • 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

객체

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

  • var user = [[${user}]];
    • 인라인 사용 전 -> var user = BasicController.User(username=userA, age=10);
    • 인라인 사용 후 -> var user = {"username":"userA","age":10};
  • 인라인 사용 전은 객체의 toString()이 호출된 값이다.
  • 인라인 사용 후는 객체를 JSON으로 변환해준다.

basic/javascript.html 내부의 body에 아래 줄을 추가하자.

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

렌더링 결과는 다음과 같다.
(페이지 소스를 봐야한다.)

2-15. 템플릿 조각

웹 페이지를 개발할 때는 공통 영역이 많이 있다.
예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이 지에서 함께 사용하는 영역들이 있다.
이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율적이다.
타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

주의! 템플릿 조각과 레이아웃 부분은 직접 실행해보아야 이해된다.

템플릿 조각

resources의 basic이 아니라, BasicController가 있는 basic 패키지에 TemplateController 를 아래와 같이 작성하자.

package hello.thyemleaf.basic;  

import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RequestMapping;  

@Controller  
@RequestMapping("/template")  
public class TemplateController {  

    @GetMapping("/fragment")  
    public String template() {  
        return "template/fragment/fragmentMain";  
    }  
}

일단 template/fragment/footer.html을 아래와 같이 작성하자.

<!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>

template/fragment/fragmentMain.html에서 footer를 불러와보자.

<!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.html을 불러온다.
그럼 우리가 작성했고, 아래와 같은 footer가 불러와진다.

서버를 실행하고 결과를 보면 다음과 같다.

insert와 replace의 차이를 위의 예시로 보면 다음과 같다.

  • insert : div 태그 안에 footer의 요소들이 담긴다.
  • replace : 아예 교체 해버린다.

지금처럼 단순하게 경로와 이름만 있는 정도로 단순하다면, 부분포함 단순 표현식 코드처럼 물결 표시 없이 바로 쓸 수 있다.
단 복잡해지면, 사용하기 어렵다.

또한 파라미터를 줄 수도 있다.
footer에서 파라미터를 받고있다.

fragmentMain에서는 파라미터를 주고있는데, 그 파라미터르 받아서
출력하고 있는 것이다.

2-16. 템플릿 레이아웃1

이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아본다.

예를 들어서 <head>에 공통으로 사용하는 css , javascript 같은 정보들이 있는데,
이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶다면 다음과 같이 사용하면 된다.

일단 TemplateController에 다음과 같은 메서드를 작성하자.

@GetMapping("/layout")  
public String layout() {  
    return "template/layout/layoutMain";  
}

template/layout 디렉터리에 base.html을 아래와 같이 작성하자.

<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>

template/layout/layoutMain.html을 아래와 같이 작성하자.

<!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>

현재 head 부분을 보면, 위에서 작성했던, base.html로 바꿔치고 있다.
head를 base.html로 사용하고 있지만, 틀은 가져가되, 원하는 값을 집어넣어서 레이아웃을 완성하는 방식이다.

common_header(~{::title},~{::link}

여기서는 아래의 <title></title> 요소를 넣어버린다. (메인 타이틀 아래)
또한 link부분이 있는데, <title> 태그 아래의 link 요소들이 여기로 들어간다.

결과는 다음과 같다.

이 방식은 사실 앞서 배운 코드 조각을 조금 더 적극적으로 사용하는 방식이다.
쉽게 이야기해서 레이아웃 개념을 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것으로 이해하면 된다.

2-17. 템플릿 레이아웃2

템플릿 레이아웃 확장

앞서 이야기한 개념을 <head> 정도에만 적용하는게 아니라 전체에 적용해보도록 한다.

TemplateController에 다음 메서드를 작성하자.

@GetMapping("/layoutExtend")  
public String layoutExtends() {  
    return "template/layoutExtend/layoutExtendMain";  
}

/template/layoutExtend/layoutFile.html 을 아래와 같이 작성하자.

<!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>

사이트가 10개 정도될 때 10 페이지가 모두 항상 모양이 위의 html을 사용하고,
아래의 부분만 바뀐다고 가정하자.

<div th:replace="${content}">  
    <p>레이아웃 컨텐츠</p>  
</div>

그리고 /template/layoutExtend/layoutExtend.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>

여기서는 html 자체가 layoutFile.html로 바꾸었다.
즉 사이트 자체가 통으로 바뀐 것이다.
그런데, 그냥 바뀌는 것이 아니라, title과 section 은 넘기고 바뀐다.

결과는 다음과 같다.

layoutExtendMain.html요소의 title과 section 요소를 layoutFile.html 로 넘기고,
layoutFile.html은 넘겨받은 요소들을 넣어서 사용자에게 보여준다.

레이아웃을 사용하면 레이아웃의 틀은 그대로 갖추되, 내용을 커스터마이징 가능하다는 장점이 있다.
단, 레이아웃을 한 번에 바꿔야할 때 조금 힘든 단점이 있다.

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

3. 요약

타임리프의 기본 기능을 다 살펴봤다.

간단히 근황을 얘기하자면, 이 2시간 34분의 섹션을 듣는데, 2주 정도 걸린 거 같다.
방통대, 그리고 최근엔 운동까지 시작했다. (건강을 위해)
곧 방통대 셤기간이라, 요즘은 방통대에 더욱 집중하고 있는 거 같다.

스프링 MVC 2편에는 Vaildation, 쿠키 세션, 필터, 인터셉터, 예외 처리, 포매터, 파일 업로드 등등 기본적으로 알아야 될 내용들이 많다.
후딱 후딱 듣고 정리하고 싶은데, 바쁘네...ㅎㅎ;;

회고도 써야되는데, 언제쯤 쓸까 싶다...
여하튼 다음 섹션 들고 오겠다.

728x90
저작자표시

'Spring > Spring & Spring Boot' 카테고리의 다른 글

스프링 MVC 2편 - Ch03. 메시지, 국제화  (0) 2024.05.07
스프링 MVC 2편 - Ch02. 타임리프 - 스프링 통합과 폼  (0) 2024.05.06
스프링 MVC 1편 - Ch07. 스프링 MVC - 웹 페이지 만들기  (1) 2024.04.19
스프링 MVC 1편 - Ch06. 스프링 MVC - 기본 기능  (0) 2024.04.16
스프링 MVC 1편 - Ch05. 스프링 MVC - 구조 이해  (0) 2024.04.08
'Spring/Spring & Spring Boot' Related Articles more
Comments