Thymeleaf 템플릿 엔진를 사용하여 layout 중복 코드를 설정하고 관리하는 방법을 작성하겠습니다.
build.gradle에 thymeleaf 와 템플릿엔진을 추가해줍니다.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.2.0'템플릿 엔진에 등록하기
<th:block th:fragment="프라그먼트 아이디"></th:block>
ex)
<th:block th:fragment="configFragment">템플릿 엔진 사용하기
<div th:replace="/파일경로/파일명 :: 프라그먼트 아이디"></div>
ex)
<div th:replace="/fragments/config :: configFragment"></div>예제
소스파일 구조
fragments 디렉터리에 중복코드에 대한 파일을 저장하여 줍니다.
- html 의 head 태그 부분의 코드 (js, 스타일시트)를 담고 있는 config.html
- header 정보를 담고있는 header.html
- footer 정보를 담고있는 footer.html
config.html
<th:block th:fragment="configFragment">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</th:block>
</html>th:block 블럭으로 재사용할 코드를 감싸주고, th:fragment로 이름을 지정해줍니다.
저는 부트스트랩과 unicons 를 사용하기 때문에 해당 정보를 head 블럭에 저장했습니다.
Header.html
<th:block th:fragment="headerFragment">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/blog/">Hyunsb</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/user/join"><span class="glyphicon glyphicon-user"></span> 회원가입</a></li>
<li><a href="/user/login"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>
</ul>
</div>
</div>
</nav>
</th:block>
</html>Footer.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footerFragment">
<footer class="container-fluid text-center" style="margin-bottom:0; background-color: lightgray">
<p>Create by Hyunsb</p>
<p><i class="uil uil-phone"></i> 010-0000-0000</p>
<p><i class="uil uil-location-point"></i> Siheung-si, Gyeonggi-do, Republic of Korea</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</th:block>
</html>모두 생성을 완료하였다면 해당 파일을 적용해보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- --------------------- config --------------------- -->
<th:block th:replace="/fragments/config :: configFragment"></th:block>
</head>
<body>
<!-- --------------------- header --------------------- -->
<div th:replace="/fragments/header :: headerFragment"></div>
<div class="container">
<!-- CARD -->
<div class="card" style="border: 1px solid lightgray; border-radius: .5rem; padding: 1rem; margin-bottom: 1rem">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<p class="card-text">내용 적는 부분</p>
<a href="#" class="btn btn-primary">상세 보기</a>
</div>
</div>
</div>
<!-- --------------------- footer --------------------- -->
<div th:replace="/fragments/footer :: footerFragment"></div>
</body>
</html>thymeleaf의 <th:block th:replace> 옵션을 사용하여 적용해줍니다.
이렇게 적용된 모습을 확인할 수 있고
웹페이지 소스코드를 확인해보면
중복코드 처리해주었던 코드들이 입력되어 있는 것을 확인할 수 있습니다.
이런식으로 레이아웃 템플릿을 생성한 후, 개별 파일에 템플릿을 적용하면
중복코드를 줄여 유지보수에 용이하고, 번거롭게 모든 코드를 작성할 필요가 없어집니다.
'Spring' 카테고리의 다른 글
| SLF4J 와 Log Level 간단 정리 (0) | 2024.03.03 |
|---|---|
| [Spring Boot] JPA - MySql 연결 (0) | 2023.03.02 |
| [Spring Security] 스프링 시큐리티 시작하기 (0) | 2023.03.02 |
| [Spring Security] authorize가 인식 안되는 상황 (0) | 2023.03.02 |
| [Spring Boot] 스프링부트에서의 thymeleaf 사용방법 (1) | 2023.03.02 |
