-
[김영한 스프링] 02. 타임리프 기본 기능 - 텍스트(text, utext) & 변수(SpringEL)Spring/스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 2023. 7. 25. 23:24
텍스트 - text, utex
타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text를 사용하면 된다.
<span th:text="${data}">
HTML 테그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]를 사용하면 된다.
컨텐츠 안에서 직접 출력하기 = [[${data}]]
BasicController
main/java/hello/thymeleaf/basic/basicController 생성
package hello.thymeleaf.basic; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @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>
main/resources/templates/basic/text-basic.html 생성
실행
Escape
HTML 문서는 <, > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.
"Hello <b>Spring!</b>"
의도한 것은 <b>가 있으면 해당 부분을 강조하는 것이 목적이었다. 그런데 <b> 테그가 그대로 나온다.
소스보기를 하면 < 부분이 <로 변경된 것을 확인할 수 있다.
HTML 엔티티
웹 브라우저는 <를 HTML 테그의 시작으로 인식한다. 따라서 <를 테그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다. 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다. 그리고 타임리프가 제공하는 th:text, [[...]]는 기본적으로 이스케이스(escape)를 제공한다.
- < -> <
- > -> >
Unescape
타임리프는 다음 두 기능을 제공한다.
- th:text -> th:utext
- [[...]] -> [(...)]
BasicController에 추가
package hello.thymeleaf.basic; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/basic") public class basicController { @GetMapping("text-basic") public String textBasic(Model model) { model.addAttribute("data", "Hello <b>Spring!</b>"); return "basic/text-basic"; } @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>
main/resources/templates/basic/text-unescaped.html 생성
th:inline="none" : 타임리프는 [[...]]를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다. 이 테그 안에서는 타임리프가 해석하지 말라는 옵션이다.
실행
주의!
실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다. escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
'Spring > 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술' 카테고리의 다른 글
[김영한 스프링] 06. 타임리프 기본 기능 - 속성 값 설정 & 반복 (0) 2023.07.26 [김영한 스프링] 05. 타임리프 기본 기능 - 리터럴(Literals) & 연산 (0) 2023.07.26 [김영한 스프링] 04. 타임리프 기본 기능 - 유틸리티 객체와 날짜 & URL 링크 (0) 2023.07.26 [김영한 스프링] 03. 타임리프 기본 기능 - 변수(SpringEL) & 기본 객체들 (0) 2023.07.26 [김영한 스프링] 01. 타임리프 기본 기능 - 프로젝트 생성 & 세팅 (0) 2023.07.24