이번 포스팅에서는 타임리프의 가장 기본 기능인 텍스트를 출력하는 기능을 다룰 것이다.
타임리프의 서버로직은 자바와 스프링을 이용한 컨트롤러로 구현하였으며, 해당 부분에 대한 이해가 필요합니다.
자 그러면, 타임리프의 가장 기본 기능인 텍스트 출력 부터 알아보자.
텍스트 - text, utext
타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다.
HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 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";
}
@GetMapping("/text-unescaped")
public String textUnescaped(Model model){
model.addAttribute("data", "Hello <b>Spring</b>");
return "basic/text-unescaped";
}
}
text-basic.html
<!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>
text-unescape.html
<!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>
결과 확인
컨트롤러의 첫번째 메서드인, textBasic의 경우에는 아래처럼 정상 작동하는 것을 볼 수 있다.
하지만, 만약 Spring이라는 단어를 Spring처럼 볼드처리를 해서 나타내려면 어떻게 해야할까?
일반적으로는 HTML 태그를 이용해서 <b></b>를 추가해주면 될 것이라 생각하겠지만 그렇게 한다면 안된다.
이제 그 이유와 해결법을 알아보자.
Escape
Html 문서는 <,> 같은 특수 문자를 기반으로 정의된다.
따라서, 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.
만약 앞에서 만든 예제의 데이터를 아래와 같이 정의한다면,
결과는 아래처럼 나올 것이다.
결과 페이지 소스
우리가 의도한 것은 <b>태그를 이용하여, 글자를 볼드처리 하는 것이 목적이었지만, 실제로는 <b> 태그가 그대로 출력되며, 실제 소스를 확인하면 "<" 가 <로 변경된 것을 확인할 수 있다.
HTML 엔티티
웹 브라우저는 "<"를 HTML 태그의 시작으로 인식한다. 따라서 "<"태그를 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라고 한다. 그리고 이러한 방식으로 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라고 한다.
타임리프가 제공하는 th:text, [[...]]문법은 기본적으로 이스케이프(escape)를 제공한다.
- < -> <
- > -> >
- 기타 수 많은 HTML 엔티티가 있다.
Unescape
이스케이프 기능을 사용하지 않으려면 아래와 같이 하면된다.
타임리프는 다음 두 기능을 제공한다.
- th:text -> thutext
- [[...]] -> [(...)]
그렇다면, 이제 컨트롤러의 textUnescaped메서드를 실행하는 요청을 보내보자.
아래와 그림과 같이 이스케이프가 사용된 것가 사용되지 않은 것 모두 정상적으로 출력된 것을 볼 수 있다.
주의사항
실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다.
escape를 기본적으로 설정하고, 꼭 필요한 경우에만 unescape를 사용하자.
'Etc > Thymeleaf' 카테고리의 다른 글
| Thymeleaf - URL 링크 사용하기 (0) | 2023.07.25 |
|---|---|
| Thymeleaf - 유틸리티 객체와 날짜 (0) | 2023.07.24 |
| Thymeleaf - 기본 객체 (0) | 2023.07.24 |
| Thymeleaf - 변수(SpringEL) (0) | 2023.07.24 |
| 타임리프(Thymeleaf)란? (0) | 2023.07.24 |
