참고
더보기
Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.
GitHub - Kloong1/TIL: Today I Learned.
Today I Learned. Contribute to Kloong1/TIL development by creating an account on GitHub.
github.com
타임리프 - 주석
표준 HTML 주석 외에도 타임리프가 제공하는 주석 문법이 존재한다. 어떤 차이가 있고 어떻게 동작하는지 알아보자.
BasicController.java 내용 추가
package kloong.thymeleaf.basic;
import ... //생략
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("/comments")
public String comments(Model model) {
model.addAttribute("data", "Thymeleaf!");
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>
<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>렌더링 결과 (웹 브라우저 페이지 소스 코드)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>예시</h1>
<span>Thymeleaf!</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<h1>3. 타임리프 프로토타입 주석</h1>
<span>Thymeleaf!</span>
</body>
</html>표준 HTML 주석
<!-- -->- 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않는다.
- 소스 코드에는 그대로 남아있다.
타임리프 파서 주석
<!--/* */-->- 타임리프에서 제공하는 주석이다.
- 타임리프가 렌더링하면서 해당 부분을 소스코드에서 제거해버린다.
<!--/*와*/-->가 한 쌍을 이루므로<span th:text="${data}">html data</span>태그가 주석처리 되어서 아예 사라진 것을 확인할 수 있다.<!--로 시작하고-->로 끝나기 때문에, 타임리프 렌더링 없이 직접 파일로 열면 웹 브라우저는 주석으로 인식한다.- 이 때
<span th:text="${data}">html data</span>가 정상적으로 렌더링 되는 모습을 확인할 수 있다.
- 이 때
타임리프 프로토타입 주석
<!--/*/ /*/-->- HTML 파일을 웹 브라우저에서 그대로 열어보면, HTML 주석처럼
<!--로 시작하고-->로 끝나기 때문에 주석으로 처리되어 렌더링되지 않는다. - 하지만 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다.
- 쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프로 렌더링 한 경우에만 보이는 기능이다.
'Spring > Spring Boot & Thymeleaf' 카테고리의 다른 글
| [Spring Boot & Thymeleaf] 14. 자바스크립트 인라인(Javascript Inline) (0) | 2022.10.24 |
|---|---|
| [Spring Boot & Thymeleaf] 13. Block 태그 (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 11. if, unless, switch (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 10. 반복 (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 9. 타임리프 - 속성 값 설정 (0) | 2022.10.24 |
댓글