오봉이와 함께하는 개발 블로그
스프링 MVC 2 - 타임리프 text, utext 본문
텍스트 - text, utext
타임리프의 가장 기본 기능이다.
타임리프는 기본적으로 HTML 태그 속성에 기능을 정의해서 동작한다.
HTML의 콘텐츠에 데이터를 출력할 때는 th:text를 사용하면 된다.<span th:text="${data}">
HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 [[...]]를 사용하면 된다.컨텐츠 안에서 직접 출력하기 = [[${data}]]
BasicController
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("text-basic")
public String textBasic(Model model) {
model.addAttribute("data", "Hello Spring!");
return "basic/text-basic";
}
}<!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 화면을 생성할 때는 출력하는 데이터에 이런 특수 문자가 있는 것을 주의해서 사용하자.
BasicController의 model.addAttribute에서 넘기는 값을 수정해보자.
model.addAttribute("data", "Hello Spring!"); -> model.addAttribute("data", "Hello <b>Spring!<b>");
- 결과
- 웹 브라우저 : Hello <b>Spring!</b>
- Hello <b>Spring!</b>
의도한 결과는 <b>를 사용해서 강조하는 것인데 웹 브라우저에 태그가 그대로 노출된다.
또, 소스보기를 하면 <가 <로 변경되었다.
HTML 엔티티
웹 브라우저는 <를 HTML 태그의 시작으로 인식한다.
따라서 <를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다.
이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다.
타임리프의 th:text, [[...]]는 기본적으로 이스케이프를 제공한다.
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";
}<!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"는 타임리프가 [[...]]를 해석해서 보여주기 때문에 화면에 [[...]]를 보여줄 수 없다.
이 태그 안에서는 타임리프가 해석하지 말라는 옵션을 준 것이다.
실행해보면 같이 정상 수행되는 것을 확인할 수 있다.
- 웹 브라우저 : Hello Spring!
- 소스보기 : Hello <b>Spring!</b>
주의
실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가
발생한다.
escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.
출처 : 인프런 김영한 지식공유자님 강의 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
'BE > Thymeleaf' 카테고리의 다른 글
| 스프링 MVC 2 - 타임리프 URL (0) | 2022.08.16 |
|---|---|
| 스프링 MVC 2 - 기본 객체, 유틸리티 객체와 날짜 (0) | 2022.08.16 |
| 스프링 MVC 2 - 변수 SpringEL (0) | 2022.08.16 |
| 스프링 MVC 2 - 타임리프 개요 (0) | 2022.08.16 |
| 스프링 MVC 1 - 타임리프 (0) | 2022.08.15 |