웹 화면을 만들다 보면 특정 코드를 잠깐 숨기거나, 디자이너와 협업 시 불필요한 부분을 가려둘 때 주석이 필요하다.


타임리프는 이런 상황을 지원하기 위해 표준 HTML 주석, 타임리프 파서 주석, 타임리프 프로토타입 주석 세 가지 방식을 제공한다.
이제 실제 예제를 통해 어떻게 동작하는지 살펴보자.

 

1. 컨트롤러에서 데이터 준비하기

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

여기서 data = Spring! 값을 뷰에 전달한다.

 

2. 뷰 템플릿 작성하기

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>주석 예제</title>
</head>
<body>

<h1>예시</h1>
<span th:text="${data}">html data</span>

<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->

<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->

<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

</body>
</html>

 

 

3. 실행 결과

 

4. 주석 방식별 설명

(1) 표준 HTML 주석

<!-- <span th:text="${data}">html data</span> -->
  • 브라우저와 타임리프 모두에서 무시된다.
  • 단순히 HTML 주석으로만 동작한다.

(2) 타임리프 파서 주석

<!--/* [[${data}]] */-->


<!--/*-->
<span th:text="${data}">html data</span> <= 사이에 있으므로 주석처리
<!--*/-->
  • 타임리프 엔진에서만 주석 처리된다.
  • 즉, 렌더링 결과에서 완전히 제거된다.

(3) 타임리프 프로토타입 주석

<!--/*/ <span th:text="${data}">html data</span> /*/-->
  • HTML 파일만 열었을 때는 주석처럼 보인다.
  • 하지만 타임리프 렌더링 시에는 정상 출력된다.

즉 렌더링이 될 경우에는 주석 처리가 되지 않고 출력 되는 것이다.

 

마무리하며:

이번 장에서는 타임리프에서 제공하는 주석 기능을 정리해보았다. HTML 주석은 그대로 남기 때문에 단순 참고용으로만 활용할 수 있고, 타임리프 파서 주석은 렌더링 시점에 완전히 제거되어 최종 HTML에 포함되지 않는다.

 

또한 타임리프 프로토타입 주석은 조금 특별한데, 브라우저에서 파일을 열면 주석 처리되어 보이지 않지만 서버에서 렌더링할 때는 실제 내용이 출력된다. 덕분에 디자이너와 개발자가 같은 템플릿을 보면서도 각자 필요한 방식으로 확인할 수 있다는 장점이 있다.

 

결국 타임리프는 단순히 데이터를 출력하는 템플릿 엔진을 넘어, 개발자의 작업 효율을 높여주는 다양한 기능을 제공한다.

 

 

'타임리프' 카테고리의 다른 글

[Thymeleaf] 자바스크립트 인라인  (0) 2025.09.16
[Thymeleaf] 블록  (0) 2025.09.16
[Thymeleaf] 조건부 평가 (if, unless, switch)  (0) 2025.09.16
[Thymeleaf] 반복  (0) 2025.09.16
[Thymeleaf] 속성 값 설정  (0) 2025.09.15

티스토리툴바