코드 그라데이션

Thymeleaf (10) 주석 본문

Spring/Thymeleaf

Thymeleaf (10) 주석

완벽한 장면 2023. 11. 16. 16:58

주석

 

BasicController 추가

@GetMapping("/comments")
public String comments(Model model) {
	model.addAttribute("data", "Spring!");
	return "basic/comments";
}

 

/resources/templates/basic/comments.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>예시</h1>
<!-- 'data' 변수의 값을 출력 -->
<span th:text="${data}">html data</span>

<h1>1. 표준 HTML 주석</h1>
<!--
    주석 내부의 내용은 클라이언트에게 렌더링되지 않습니다.
    'data' 변수의 값을 출력하는 Thymeleaf 표현식은 주석 처리되어 무시됩니다.
-->
<!--<span th:text="${data}">html data</span>-->

<h1>2. 타임리프 파서 주석</h1>
<!--/*
    주석 내부에 있는 내용은 Thymeleaf 파서 주석으로 간주됩니다.
    Thymeleaf는 주석 내부의 Thymeleaf 표현식을 처리하고 'data' 변수의 값을 출력합니다.
*/-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->

<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
    주석 내부의 내용은 Thymeleaf 프로토타입 주석으로 간주됩니다.
    Thymeleaf는 주석 내부의 Thymeleaf 표현식을 처리하고 'data' 변수의 값을 출력합니다.
/*/-->
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

</body>
</html>

 

1. 표준 HTML 주석

<!-- ... --> 형식의 주석은 표준 HTML 주석으로, 주석 내부의 내용은 클라이언트에게 렌더링되지 않는다.

${data}의 Thymeleaf 표현식은 주석 처리되어 무시된다.

 


2. 타임리프 파서 주석

<!--/* ... */--> 형식의 주석은 Thymeleaf 파서 주석으로 간주된다.

주석 내부의 Thymeleaf 표현식([[${data}]])은 Thymeleaf에 의해 처리되고 'data' 변수의 값을 출력.

(타임리프 파서 주석은 타임리프의 진짜 주석이고, 렌더링에서 주석 부분을 제거한다.)

 


3. 타임리프 프로토타입 주석

타임리프 프로토타입은 약간 특이한데, HTML 주석에 약간의 구문을 더한 형태.

 

<!--/* ... */--> 형식의 주석은 Thymeleaf 프로토타입 주석으로 간주된다..

주석 내부의 Thymeleaf 표현식([[${data}]])은 Thymeleaf에 의해 처리되고 'data' 변수의 값을 출력한다.

 

HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다.

타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다.

 

쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다.

 

 

 

정리하자면

타임리프 주석을 사용하면 HTML 주석 내에 Thymeleaf 표현식을 넣을 수 있어,

클라이언트에서도 주석을 유지하면서 동적 데이터를 처리할 수 있다.

Thymeleaf 주석은 템플릿 엔진에서 처리되고 브라우저로 렌더링되지 않기 때문에

주석 내부의 내용은 클라이언트에게 노출되지 않는다.

 

 

실행 결과

1
2

728x90

'Spring > Thymeleaf' 카테고리의 다른 글

Thymeleaf (12) 자바스크립트 인라인  (0) 2023.11.18
Thymeleaf (11) 블록  (0) 2023.11.17
Thymeleaf (9) 반복  (0) 2023.11.15
Thymeleaf (8) 속성 값 설정  (0) 2023.11.14
Thymeleaf (7) 연산  (0) 2023.11.13
'Spring/Thymeleaf' Related Articles more
Comments