[Thymeleaf] template 기능, layout
- Web/Thymeleaf
- 2022. 3. 23.
ㅇㅇ
layout 소개
2022.03.23 - [Web/Thymeleaf] - [Thymeleaf] template 기능 - replace
[Thymeleaf] template 기능 - replace
Thymeleaf, template 기능 사용하기 template 사용하기 HTML에서 흔히 사용하는 이 방식은 header, section, nav, footer, main 등 다양하게 나뉜다. 이는 각 part마다의 기능을 나누는 것을 목적으로 두지만 각..
mollangpiu.tistory.com
이전 글은 공통된 부분을 불러오는 방법이라면, 이번에는 main, content 등 다양한 명칭으로 불리는 변하는 부분에 대해 불러오는 기능을 작성하였다.
<!-- thymeleaf layout-->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>이 기능을 사용하기 위해서는 thymeleaf의 layout lib가 필요하다.
무엇이 다르길래, thymeleaf의 lib가 별도로 필요한 것일까?
이전 글의 소개 한 replace와 include는 해당 페이지에 다른 페이지의 태그를 강제로 가져오는 역할을 가졌다면.
이번에 소개하는 글 layout은 강제로 나의 테그를 삽입하는 차이이다.
기본적으로 template를 한, 두 번 사용한다면 여기서 어디 부분이 제일 많이 변화되는지는 알 수가 있다.
보통 top와 side는 특별한 경우가 아닌 이상 html의 변화는 적지만
main 같은 경우에는 가장 많은 html의 변화를 소유하고 있는 곳이다.
그만큼 replace와 include를 사용하기에는 매우 부적합한 html 영역이며, 이 영역을 활용하기 위해서는 layout의 기능이 필요하다.
layout 사용법 - layout/default.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<th:block th:replace="~{layout/re_top::topFrag}">top 영역</th:block>
<th:block layout:fragment="topFragment"></th:block>
<th:block layout:fragment="contentFragment"></th:block>
</html>이전 글과 다르게, replace 외에 layout:fragment가 추가되었다.
layout:fragment는 다른 html이 해당 layout을 상속했을 경우에만 표시가 된다.
상속하는 방법
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default}">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<th:block layout:fragment="contentFragment">
<h6>============== Content ==========</h6>
</th:block>
</html>
상속하는 방법은 layout lib가 제대로 설치되어 있다면, 위의 두 문장을 추가해주면 된다.
첫 번째는 layout을 사용하기 위한 경로이며, 두 번째는 해당 html 태그가 상속할 layout의 위치정보이다.
위의 두 가지가 모두 되어있다면, 테그속에 layout:fragment를 적어두고, 이름 간의 매칭을 시키면 끝난다.
결과
해당 content영역을 실행한 결과는 layout에 설치된 th:replace:topFragment까지 실행된 것을 확인할 수가 있다.
이전 글의 th:replace에 비해서는 난이도가 은근히 있다.
여기서, topFragment는 없다.
content.html에 지정된 topFragment가 없기 때문이다.
주의 사항
1. layout 경로 설정
이것을 사용하기 위해서는 경로가 정확히 맞아야한다.
기본 default의 경로는 templates안 이므로, static에 첨부해서는 안된다.
경로를 지정할 때는 ~{ layout 위치 }를 지정한다.
해당 경로는 springBoot에서 설정한 경로를 기준으로 삼고 있다.
따라서, 해당 설정을 하고 있을 경우에는 조심히 사용해야 한다.
2. 그 외
<script layout:fragment="javascript" th:inline="javascript">layout을 사용할 경우에는 layout지정된 것 외에는 사용이 되지 않는다.
즉, 해당 영역에 필요한 javascript를 사용하기 위해서는 javascript 또한 layout으로 가져가야 한다.
이해가 되지 않는다면, script부분을 대충 만들어보고 chrome, whale 실행 후 개발자 모드로 해당 html 태그를 살펴본다면 작성한 글이 사라져 있음을 확인할 수가 있다.
그러므로, javascript 또한 layout으로 가져가야 하는 불편함이 있다.공통된 부분은 해당 layout을 사용하는 곳에서 html을 작성하면 된다.
1. 한 번 적용하고 나면 유지보수가 쉬워진다.
2. 페이지 관리가 잘된다.
1. 첫 세팅이 어렵다.
2. layout 한 번 지정하면, 다른 것들 또한 layout을 설정해야 한다.
3. jar 생성 사용 시, 문제가 생긴다. 반드시 maven 혹은 gradle 방식으로 jar로 구성해야 한다.
'Web > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] JavaScript에서 Thymeleaf 사용 방법 (0) | 2022.04.07 |
|---|---|
| [Thymeleaf] NULL 구분하기 (0) | 2022.04.07 |
| [Thymeleaf] template 기능 - replace (0) | 2022.03.23 |
| [Thymeleaf] for 사용하기 (1) | 2022.03.08 |
| [Thymeleaf] if - else 사용하기 (0) | 2022.03.08 |