타임리프(Thymeleaf)는 백엔드 서버에서 HTML을 동적으로 렌더링할 때 사용된다.
타임리프의 특징으로는
- 기존 HTML 코드를 최대한 유지한다.
- 웹 브라우저로 열 수도 있고, 서버를 통해 뷰 템플릿으로 열 수도 있다.
이 대표적인 특징 두 가지를 Natural Templates라고 한다.
타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">
1. 텍스트 출력 (text)
@GetMapping("text-basic")
public String textBasic(Model model) {
model.addAttribute("data", "Hello Spring!");
return "/basic/text-basic";
}model에 data라는 이름으로 Hello Spring!이라는 value를 담고 실행을 하게 되면 return에 해당하는 URI로 이동하게 된다.
우선 타임리프 사용 선언을 하고 body 부분을 수정한다.
<!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>텍스트를 출력하는 두 가지 방식을 작성해보았다.
첫번째는 우리가 모델에 담은 data를 가져오는 형식이고 두번째는 data를 컨텐츠 안에서 바로 출력하는 방식이다.
2. Escape
기본 텍스트의 크기를 크게 하거나 강조하거나 꾸밈을 주고 싶다면 HTML 태그를 사용하게 된다.
@GetMapping("text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "Escaped <b>Text</b>");
return "basic/text-unescaped";
}
}글자를 진하게 해주는 <b> 태그를 쓴다고 가정하면 우리가 원하는 결과는
Escaped Text 이다.
하지만 실제 실행 결과는 이렇게 나온다.
웹 브라우저는 <를 HTML 태그의 시작으로 인식하기 때문에 위와 같은 결과가 나온 것이다.
그래서 이러한 웹 브라우저의 속성을 피할 방법이 필요한데 그것을 HTML 엔티티라고 한다.
그리고 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 escape라고 한다.
이스케이프를 사용하지 않고 싶다면
th:text를 th:utext (Unesacped Text)
[[...]]를 [(...)]로 바꿔주면 된다.
<li>th:text = <span th:text="${data}"></span></li>
<li>th:utext = <span th:utext="${data}"></span></li> <li><span th:inline="none">[[...]] </span>[[${data}]] </li>
<li><span th:inline="none">[(...)] </span>[(${data})] </li>코드로 보면 이렇게 사용할 수 있다.
th:text="${data]" >>> th:utext="${data}"
[[${data}]] >>> [(${data})]
이렇게 하면 아래와 같은 실행 결과가 나타나게 된다.
출처 : 인프런 - 스프링 MVC 2편(김영한)
'Spring > Spring' 카테고리의 다른 글
| [Spring] 메시지, 국제화 (3) | 2024.10.15 |
|---|---|
| [Spring] 타임리프 - 리터럴 (0) | 2024.10.09 |
| [Spring] @ResponseBody 애너테이션 (1) | 2024.10.03 |
| [Spring] HTTP 요청 파라미터 - 쿼리 파라미터 (1) | 2024.10.03 |
| [Spring] 로깅 알아보기 (1) | 2024.10.01 |
