타임리프-Escape와 Unescape

https://www.inflearn.com/courses/lecture?courseId=326674&type=LECTURE&unitId=71804&tab=curriculum

 

강의 내용을 정리하였습니다.

 

HTML 문서는 <, > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이런 특수 문자가 있는 것을 주의해야 한다.

 

"Hello World!" 라는 문자를 타임리프를 사용하여 텍스트로 출력해보려고 하는데 World를 태그를 사용해서 볼드체로 넣고 싶다.

 

"Hello <b>World!</b>"

 

컨트롤러에서 문자열에 <, > 를 포함시킨 단어를 넣고 웹브라우저를 띄워 보았다.

    @GetMapping("/text-unescaped")
    public String textUnescaped(Model model) {
        model.addAttribute("data", "Hello <b>World!</b>");
        return "basic/text-unescaped";
    }

 

웹브라우저에서 본 화면

 

소스보기를 통해 보면 아래와 같이 th:text를 사용한 부분은 태그로 인식을 하지 않고 < 부분이 &lt; 와 같이 변경되어서 보인다.

<li>th:text = <span>Hello &lt;b&gt;World!&lt;/b&gt;</span></li>
<li>th:utext = <span>Hello <b>World!</b></span></li>

 

HTML 엔티티

 

웹브라우저는 <를 HTML 태그의 시작으로 인식한다. <를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이를 HTML 엔티티라고 한다.

HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라고 한다.

타임리프가 제공하는 th:text, [[ ... ]]는 기본적으로 이스케이프를 제공한다.

 

대표적으로 HTML엔티티 2개는 다음과 같고 훨씬 많은 HTML 엔티티들이 있다.

< -> &lt;

> -> &gt;

 

이스케이프 기능을 사용하지 않고 <, >가 웹 브라우저에서 그대로 <를 태그의 시작으로 인식할 수 있도록(소스보기를 해도 태그로 인식하도록)

 

Unescape

타임리프는 다음 두 기능을 제공한다.

th:text -> th:utext

[[ ... ]] -> [( ... )]

 

위 사진을 보면 웹브라우저에서 Escaped되지 않고 브라우저에 볼드체로 나오는 것을 확인할 수 있었다.

 

escape사용하지 않아서 HTML이 정상적으로 렌더링 되지 않는 문제들이 많이 발생한다고 한다.

escape를 기본으로 사용하고, 꼭 필요할 때만 unescape를 사용하도록 하자