Thymeleaf 기본 기능/text, utext

HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text 를 사용하면 된다.


<span th:text="${data}">

Escape

HTML문서는 <, > 같은 특수문자를 기반으로 정의된다.

따라서 뷰템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.

개발자가 의도한 것은 가 있으면 해당 부분을 강조하는 것이 목적이었다.

하지만 태그가 그대로 나온다.

소스보기를 하면 < 부분이 <로 변경된 것을 확인할 수 있다.

웹브라우저는 <를 HTML 태그의 시작으로인식한다.

따라서 <를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다.

그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다. 그리고 타임리프가 제공하는 th:text, [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.

이스케이프 기능을 사용하지 않으려면

th:text → th:utext [[...]] → [(...)]

을 사용하면 된다.

th:inline="none": 타임리프는 [[...]] 를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다.

이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.

실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다.

escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.