공부하자

[Spring Boot] 4. 타임리프 (1) 본문

공부/Spring Boot

[Spring Boot] 4. 타임리프 (1)

strongstar 2017.11.24 00:23

* 참고 도서 : 쇼다 츠야노 (2017). 스프링 부트 프로그래밍 입문. 길벗

* 가급적 자주, 적어도 일주일에 한번 이상은 포스팅하려고 합니다.

* 이전 포스팅 : [Spring Boot] 3. 데이터 주고받기




1. 타임리프(Thymeleaf) 란?


템플릿 엔진. th:xx 형식으로 속성을 html 태그에 추가하여 값이나 처리 등을 페이지에 심을 수 있다.

JSP, 그루비 등 다른 템플릿도 스프링 부트에서 사용 가능하지만 타임리프가 제일 많이 쓰인다고 한다. (책에 따르면..)


2. 변수식 : ${ }


- index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>
<body>
    <h1>Hello World</h1>
    
    <!-- OGNL -->
    <p th:text="${new java.util.Date().toString()}"></p>
    
    <!-- utility object -->
    <p th:text="${#dates.format(new java.util.Date(), 'yyyy-MM-dd HH:mm')}"></p>
    <p th:text="${#numbers.formatInteger(123,5)}"></p>
    <p th:text="${#strings.toUpperCase('Welcome to Spring Boot')}"></p>
    
    <!-- parameter -->
    <p th:text="'id0=' + ${param.id[0]} + ', id1=' +${param.id[1]}"></p>
</body>
</html>
cs


- 실행 결과



3. 메시지식 : #{ }


src/main/resources 아래에 messages.properties 라는 이름으로 파일을 생성한다.




그리고 다음과 같이 파일 내용을 수정한다.


- messages.properties


1
2
content.id=strongstar
content.name=Han-byeol Kang
cs


- index.html


1
2
3
4
<body>
    <h1 th:text="#{content.id}">Hello World</h1>
    <p th:text="#{content.name}"></p>
</body>
cs


- 실행 결과


4. 링크식 : @{ }


- index.html


1
2
3
4
<body>
    <h1 th:text="#{content.id}">Hello World</h1>
    <a th:href="@{'/home/' + ${param.id[0]}}">link</a>
</body>
cs

 

- 실행 결과



5. 객체의 변수식 : *{ }


- TestController.java


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
package com.star.springboot;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class TestController {
    
    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("msg""data..");
        DataObject data = new DataObject(123"star");
        model.addAttribute("object", data);
        return "index";
    }
    
    class DataObject {
        public int id;
        public String name;
        
        public DataObject(int id, String name) {
            super();
            this.id = id;
            this.name = name;
        }
    }
}
 
cs


- index.html

1
2
3
4
5
6
7
8
<body>
    <h1 th:text="#{content.id}">Hello World</h1>
    <p th:text="${msg}">message.</p>
    <div th:object="${object}">
        <p th:text="*{id}"></p>
        <p th:text="*{name}"></p>
    </div>
</body>
cs

- 실행 결과



6. 리터럴 치환 : | |


- index.html


1
2
3
4
5
6
<body>
    <h1 th:text="#{content.id}">Hello World</h1>
    <div th:object="${object}">
        <p th:text="|id : *{id}, name : *{name}|">message.</p>
    </div>
</body>
cs


- 실행 결과



7. HTML 출력


- TestController.java


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.star.springboot;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class TestController {
    
    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("msg""<h1>END</h1><br /><h2>END</h2>");
        return "index";
    }
    
}
 
cs


- index.html


1
2
3
4
<body>
    <h1 th:text="#{content.id}">Hello World</h1>
    <p th:utext="${msg}">message.</p>
</body>
cs


- 실행 결과



타임리프는 html 태그를 모두 escape 처리하기 때문에 'th:utext'로 써야한다.

보안에 취약하니 주의해서 쓸 것.




타임리프 관련 내용은 양이 많아서 둘로 나누었습니다.

책 내용보다는.. 제가 코드 복붙하고, 화면 캡쳐할게 많네요 ㅜㅜ

JSP, 그루비 등에 대해 궁금하시다면 다른 강좌나 책 보시는걸 추천드립니다.............


2 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 6 7 8 9 Next