[thymeleaf] 기본 기능 정리

01, 02, 03, 04에 걸쳐 thymeleaf를 간단히 정리하고자 한다. 인프런에서 영한님의 인프런 강의를 듣고 있는데 thymeleaf 부분을 강의하신 내용이 있었다.
강의 내에서 서버 개발자더라도 SSR thymeleaf 엔진을 아는 것이 좋다고 말씀하시고 MVC 강의 첫번째 부분이 thymeleaf 내용으로 진행되는데 블로그에 해당 내용을 정리해 보고자 한다.
더 자세한 사항과 내용은 인프런 강의를 듣는걸로,,

(Project 생성 및 thymeleaf 설정까지는 생략한다.)

1-1. 텍스트 - text

보통 JSP를 활용하여 서버에서 전달받은 변수값을 사용하기 위해서는 [[${message}]]"; 이런식의 변수선언을 해준다.
thymeleaf에서는 다양한 표현식을 통해 이를 나타낸수 있다.
밑의 코드에서 사용한 표현식은 변수 표현식으로 ${...} 형태로 나타난다.

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

<h1> 컨텐츠에 데이터 출력하기</h1>
<ul>
    <li>th:text 사용 <span th:text="${data}"></span></li>  <!-- 항상 태크가 들어가 있어야한다. -->
    <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li> <!-- 태그 속성이 아닌 HTML 영역에 직접 데이터를 출력하고 싶을 경우 -->
</ul>

html 소스를 보면
 부분이 Hello ErJuer01 로 data값이 적용된 것을 볼 수 있으며
[[${data}]] 또한 Hello ErJuer01로 data값이 적용된것을 볼 수 있다.

1-2. Escape

HTML 문서에서 태그의 시작을 나타내는 '<'과 태그의 끝을 나타내는 '>'로 이루어져 있는데 태그가 아닌 View에서 '<' 기호를 사용하여 보여주는 경우도 있다. (공백 포함)
HTML에서는 < 같은 문자를 사용하여 나타내고 있는데 뷰 템플릿으로 HTML 생성 할 경우에도 주의하여 사용해야 한다.

 @GetMapping("/text-unescaped")
    public String textUnescaped(Model model){
        model.addAttribute("data","Hello <b>ErJuer01!</b>"); <!-- 굵게 b태그를 활용하여 'ErJuer01'이 굵게 표현되기를 원한다. -->
        return "mvc/text-unescaped";
    }

표현 방법은 두가지가 있다.
1. utext
2. [()]

<li>th:text = <span th:text="${data}"></span></li>
<li>th:utext = <span th:utext="${data}"></span></li> <!-- u: unescaped -->

<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li> <!-- unescaped -->

두가지의 표현식으로 태그를 활용하여 HTML에 나타 낼 수 있다.

2. 변수 - SpringEL

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

    @GetMapping("/variable")
    public String variable(Model model){

        User userA = new User("Lguplus", 1);
        User userB = new User("minsupark", 29);

        List<User> list = new ArrayList<>();
        list.add(userA);
        list.add(userB);

        HashMap<String, User> map = new HashMap<>();
        map.put("lguplus", userA);
        map.put("minsupark", userB);

        model.addAttribute("user", userA);
        model.addAttribute("users", list);
        model.addAttribute("userMap", map);

        return "mvc/variable";

    }

// userName : lguplus, Age : 1
// userName : minsupark, Age : 29

 //  "user" : "lguplus"
 //  "users" : [(userName : lguplus, Age : 1) , (userName : minsupark, Age : 29)]
 //  "userMap" : (userName : lguplus, Age : 1) , (userName : minsupark, Age : 29)

Objet(1) 와 List(2) 그리고 Map(3)에 대한 변수 표현은 다음과 같다.

(1) Object

user.username: user의 username을 프로퍼티로 접근
user['username'] : lguplus
user.getUsername() : lguplus

(2) List

users[0].username : lguplus
list.get(0).getUsername() : lguplus
users[0]['username'] : lguplus
users[0].getUsername() : lguplus
users[1].getUsername() : minsupark

(3) Map

userMap['lguplus'].username : lguplus
map.get("lguplus").getUsername() : lguplus
userMap('lguplus']['username'] : lguplus
userMap['lguplus'].getUsername() : lguplus

<ul>Object
    <li>${user.username} = <span>Lguplus</span></li>
    <li>${user['username']} = <span>Lguplus</span></li>
    <li>${user.getUsername()} = <span>Lguplus</span></li>
</ul>
<ul>List
    <li>${users[0].username} = <span>Lguplus</span></li>
    <li>${users[0]['username']} = <span>Lguplus</span></li>
    <li>${users[0].getUsername()} = <span>Lguplus</span></li>
</ul>
<ul>Map
    <li>${userMap['lguplus'].username} = <span>Lguplus</span></li>
    <li>${userMap['minsupark']['username']} = <span>minsupark</span></li>
    <li>${userMap['lguplus'].getUsername()} = <span>Lguplus</span></li>
</ul>

2-1 지역변수 선언

th:with을 사용하면 지역 변수를 선언해서 사용할 수 있다.

<thymeleaf 소스>

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

<h1>지역변수 - (th:with)</h1>
<div>
    <p>처음 사람의 이름은 <span>Lguplus</span></p></div>

3. 기본객체

타임리프의 기본객체 제공은 다음과 같다.

${#request}
${#response}
${$session}
${#servletContext}
${#locale}
HTTP 요청 파라미터 접근 : param -> ${param.userId}
HTTP 세션 접근 : session -> ${session.sessionData}
스프링 빈 접근 : @ -> ${@heeloBean.hello('Spring!')}

    @GetMapping("/mvc-objects")
    public String basicObjects(HttpSession httpSession){
        httpSession.setAttribute("session-Data","Hello ErJuer01");
        return "mvc/mvc-objects";
    }

    @Component("Er-Bean")
    static class HelloBean{
        public String hello(String data){
            return "Hello World"+ data;
        }
    }

<h1>편의 객체</h1>
<ul>
    <li>Request Parameter = <span th:text="${param.paramData}"></span></li>
    <li>session = <span th:text="${session.session_Data}"></span></li>
    <li>spring bean = <span th:text="${@ErBean.hello('Spring!')}"></span></li>
</ul>

해당 /mvc-objects URI에 parameter값을 붙인 요청을 하게 되면

http://localhost:8080/mvc/mvc-objects?paramData=carrot

4. 유틸리티 객체와 날짜

타임리프 유틸리티 객체들은 다음과 같다.

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

    @GetMapping("/date")
    public String data(Model model){

        model.addAttribute("localDateTime", LocalDateTime.now()); // LocalDateTime
        return "mvc/date";
    }

<ul>
<li>default = <span th:text="${localDateTime}"></span></li> <!-- LocalDateTime 변수 보여준다.-->
    <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>
</ul>

위의 코드는 java8에서 지원하는 LocalDateTime 객체를 thymeleaf로 전달했을 때의 예제이다.
 은 Controller에서 넘겨준 값으로 보여주게 된다.

특히 8번째 줄의 temporals 유틸리티 객체들은 자바 8 날짜 서식을 지원해주기 때문에
${#temporals.day(localDateTime)} = 오늘 날짜 가 된다.

간단하게 4가지의 표현식을 살펴보았고
약 3장동안 thymeleaf의 정리를 진행할 예정이다.

끝.

Reference.
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있

www.inflearn.com

저작자표시

'개발 지식 > Spring Framework' 카테고리의 다른 글

[Spring] SpringBoot + WebFlux + Kotlin + ReactiveMongo 프로젝트 생성 (1)	2022.05.01
[Test] Controller Test mockMvc 활용 (0)	2022.04.26
[JWT] Spring Boot 환경에서 JWT(Json Web Token)생성 하기 (0)	2021.10.26
[Redis Session] Spring Boot에서 Redis Session 활용하기 - 04 (0)	2021.09.26
[Redis Session] Spring Boot에서 Redis Session 활용하기 - 03 (0)	2021.09.24

주에르 블로그

[thymeleaf] 기본 기능 정리 - 01

1-1. 텍스트 - text

1-2. Escape

2. 변수 - SpringEL

(1) Object

(2) List

(3) Map

2-1 지역변수 선언

3. 기본객체

4. 유틸리티 객체와 날짜

'개발 지식 > Spring Framework' 카테고리의 다른 글

댓글

티스토리툴바

[thymeleaf] 기본 기능 정리 - 01

1-1. 텍스트 - text

1-2. Escape

2. 변수 - SpringEL

(1) Object

(2) List

(3) Map

2-1 지역변수 선언

3. 기본객체

4. 유틸리티 객체와 날짜

'개발 지식 > Spring Framework' 카테고리의 다른 글

관련글

댓글

티스토리툴바