네로개발일기

개발자 네로의 개발 일기, 자바를 좋아합니다 !

반응형

[텍스트를 출력하는 기능 - text, utext]

 

타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이th:text를 사용한다.

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

HTML 태그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]를 사용하면 된다.

[[${data}]]

 

BasicController.java

@Controller
@RequestMapping("/basic")
public class BasicController {
    @GetMapping("/text-basic")
    public String textBasic(Model model) {
        model.addAttribute("data", "Hello Spring!");
        return "basic/text-basic";
    }
}

/resources/templates/basic/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>

 

# Escape

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

 

BasicController에서 "Hello Spring!""Hello <b>Spring!</b>"로 변경해보면

웹 브라우저에서 그대로 출력됨. => Hello <b>Spring!</b>

소스에서는 Hello &lt;b&gt;Spring!&lt;/b&gt;

 

HTML 엔티티

웹 브라우저는 <를 HTML 태그의 시작으로 인식한다. 따라서 <를 태그의 시작이 아니라 문자로 표햔할 수 있는 방법이 필요하다. HTML에서 사용하는 특수문자로 HTML 엔티티로 변경하는 것을 이스케이프(escape)라고 한다. 타임리프가 제공하는 th:text, [[...]]기본적으로 이스케이프(escape)를 제공한다.

 

- < => &lt;

- > => &gt;

 

# Unescape

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

- th:utext

- [(...)]

 

=> escape를 사용하지 않아서 HTML이 정상 렌더링이 되지 않는 문제가 발생할 수 있으므로 escape를 기본으로 하고 unescape는 필요할 때만 사용하는 것으로 !

 

 

728x90
반응형
blog image

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !