본문 바로가기
Programing/Thymleaf

[Thymleaf] 타임리프 - 기본 :: 주석, 블록, 자바스크립트 인라인

by 미미믹 2024. 11. 18.
인프런 강의 내용 정리
주석

타임리프 파서 주석 <!--/* 주석 */-->
 - 타임리프 랜더링 시 주석 부분을 제외하고 렌더링한다.

타임리프 프로토타입 주석 <!--/*/ 주석 /*/-->
 - HTML 파일로 열면 주석처리가 되지만, 타임리프 렌더링할 경우 해당 내용이 보이게된다.

더보기

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.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("/comments")
    public String comments(Model model) {
        model.addAttribute("data", "Spring!");
        return "basic/comments";
    }

}

 

resources/templates/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>

블록

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

더보기

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.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("/block")
    public String block(Model model) {
        addUsers(model);
        return "basic/block";
    }

}

 

resources/templates/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>
자바스크립트 인라인

<script th:inline="javascript">
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.

- 텍스트 렌더링 :: 변수 타입이 문자일 경우 "를 포함시켜 준다. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다.

 - 자바스크립트 내추럴 템플릿 :: 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 자바스크립트 인라인 기능을 사용하면 주석을 활용하여 이 기능을 사용할 수 있다.
  ex) var username2 = /*[[${user.username}]]*/ "test username"; (user.uesrname = "userA"라 가정)
   -> 자바스크립트 인라인을 사용하지 않으면 var username2 = /*userA*/ "test username"; 으로 렌더링된다.
   -> 자바스크립트 인라인을 사용하면 타임리프가 렌더링 했을 때 /* */가 제거되어 var username2 = "userA"; 로 렌더링된다.

- 객체대입 :: 객체를 JSON으로 자동으로 변환해준다.

- each :: [# th:each="user : ${users}"] ... [/]

더보기

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.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;

import java.util.ArrayList;
import java.util.List;

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

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

    @Data
    static class User {
        private String username;
        private int age;

        public User(String username, int age) {
            this.username = username;
            this.age = age;
        }
    }
    
    private void addUsers(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);
    }
}

 

resources/templates/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}]];

    var test = "hjj" "hhh";
</script>

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];

    //자바스크립트 내추럴 템플릿
   var username2 = /*[[${user.username}]]*/ "test username";

    //객체
   var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">

    [# th:each="user, stat : ${users}"]
        var user[[${stat.count}]] = [[${user}]];
    [/]
</script>
</body>
</html>

 

렌더링 후 소스보기

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

저작자표시 비영리 동일조건

'Programing > Thymleaf' 카테고리의 다른 글

[Thymleaf] 타임리프 - 기본 :: 속성 값 설정, 반복, 조건부  (0) 2024.11.14
[Thymleaf] 타임리프 - 기본 :: 기본 객체, 유틸리티 객체, 링크, 연산  (0) 2024.11.12
[Thymleaf] 타임리프 - 기본 :: 텍스트, 변수, 리터럴  (0) 2024.11.11
[Thymleaf] 타임리프 - 기본 :: 특징, 사용 선언, 기본 표현식  (0) 2024.11.11

관련글

티스토리툴바