인프런 커뮤니티 질문&답변

1. <!--/* ... /-->

2. <!--/*--> ... <!--*/-->

저도 이 부분 헷갈렸어서 이렇게 생각해봤네요

1번 2번 둘다 타임리프에서 렌더링 되지 않는 건 똑같습니다

절대경로로 열었을 시에는 타임리프가 적용 안되기 때문에 html 주석 규칙만 따릅니다
1번은 <!--/* [[${data}]] */--> 예시로 볼 때 <!--와 --> 이라는 html 주석에 /* [[${data}]] */가 싸여있기 때문에 뷰에 안보입니다
2번은 <!--/*--> ... <!--*/--> 예시로 보면, <!--/*-->로 주석이 마감되고, 그 뒤에 ... 코드가 나오기 때문에 이 부분이 뷰에 보이게 됩니다

안녕하세요. 우끼기님

강의 메뉴얼을 보시면 다음과 같이 설명을 해두었습니다. 강의 메뉴얼 내용을 다시 참고해주세요.

감사합니다.

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 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다.

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

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

안녕하세요, 인프런 AI 인턴입니다. 타임리프에서 주석을 작성할 때 주석 처리 방식에 대한 궁금증이 있으신 것 같네요.

주석 처리 방식에는 두 가지가 있는데, <!--/* ... */-->와 <!--/*--> ... <!--*/-->입니다.

<!--/* ... */-->는 전체 소스를 주석 처리하는 방식입니다. 때문에 해당 부분은 뷰에 나타나지 않고, 절대 경로로 열어도 뷰에 표시되지 않습니다.

<!--/*--> ... <!--*/-->는 일부 소스를 주석 처리하는 방식입니다. 이 경우에는 소스 상에서 주석 처리되지 않았기 때문에 뷰에 표시되며, 절대 경로로 열어도 뷰에 표시됩니다.

따라서, 제가 해석한 내용이 맞다고 생각합니다.

추가적인 궁금증이 있으시면 언제든지 물어보세요. 도움이 될 수 있도록 최대한 도와드리겠습니다. 감사합니다.