728x90
반응형
페이지를 구성하다보면 공통적으로 들어가는 부분이 존재한다.
이러한 공통적인 부분들을 따로 만들어서 각각의 페이지에 끼워넣기만 하면 편리할 것이다.
이를 도와주는 것이 Thymeleaf Layout Dialect이다.
build.gradle의 dependencies에 다음 코드를 추가한다.
dependencies{
.
.
.
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}타임리프가 이미 추가되어있다면 dialect만 추가하면 된다.
이제 공통 레이아웃을 만들 차례이다.
나는 commons.html 안에 다음과 같이 공통 영역들을 만들었다.
<commons.html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:fragment="common1">
<h1>공통 영역 1</h1>
</div>
<div th:fragment="common2">
<h1>공통 영역 2</h1>
</div>
<div th:fragment="common3">
<h1>공통 영역 3</h1>
</div>
</html>th:fragment를 사용하여 외부에서 이 공통 영역에 접근하기 위해 필요한 이름을 정한다.
외부에서 공통 영역 1을 사용하려면 common1이라는 이름을 사용해야한다.
그리고 이를 page.html에 적용해보려 한다.
<page.html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:replace="./commons::common1"></div>
<div th:replace="./commons::common2"></div>
<div th:replace="./commons::common3"></div>
</body>
</html>
사용할 때는 다음과 같이 사용한다.
th:replace=" [ 공통 레이아웃 파일 위치 ] :: [ 공통 영역 이름 ] "
<controller>
@Controller
public class ViewController {
@GetMapping("/views/page")
public String pageController() {
return "page";
}
}
웹 사이트를 구성할 때 footer나 navbar의 경우 어느 페이지를 들어가나 항상 같은 형태를 유지해야하는 경우가 많기 때문에 이럴 경우 Thymeleaf layout dialect를 적극적으로 활용하면 좋을 듯 하다.
728x90
반응형
'공부 > Spring' 카테고리의 다른 글
| [Spring][인프런 스프링 MVC] MVC 구를 직접 개선해가며 스프링 MVC 구조를 이해하기 (controller v1~v4) (0) | 2023.03.01 |
|---|---|
| [Spring] 스프링 mysql 데이터베이스와 jpa 연동 (2) | 2023.02.17 |
| [Spring][Thymeleaf] 타임리프 기초 문법 (2) | 2023.02.12 |
| [Spring][JPA] H2 데이터베이스를 사용한 JPA 기초 사용법 (0) | 2023.02.10 |
| [Spring][스프링 MVC 1편] 서블릿 기초 사용법 (0) | 2023.02.08 |
댓글