티스토리 뷰
[Spring Boot] thymeleaf 사용하기 (2) Layout 설정하기 | View(html) 코드 중복 관리하기
Jingni 징니 2021. 2. 19. 23:20
[Spring Boot] thymeleaf 사용하기 (2)
- Layout 설정하기
- View(html) 코드 중복 관리하기
Spring/Spring Boot로 웹 페이지 개발 시 View 부분을 구현할 경우 제일 많이 쓰는게 HTML/JS/CSS가 아닐까 합니다.
이번 포스팅에서는 Thymeleaf 템플릿 엔진을 사용하여 쉽게 layout 중복 코드를 설정하고 관리하는 것에 대해 작성해보려고 합니다.
쉬운 레이아웃 예시가 뭐가 있을까,, 고민하던 중에 티스토리 블로그 메인 화면이 생각났어요!
보시면 티스토리 블로그의 모든 게시물을 들어가봐도 저 Header 부분이랑 Footer 부분은 동일한 걸 알 수 있습니다.
물론 이 페이지가 완벽한 예시는 아니지만, 레이아웃 중복의 예시로 사용하기엔 적합한 것 같아 예시로 들어보았어요!
만약 중복 관리를 하지 않고 모든 페이지마다 Header와 Footer 코드가 들어갔다면,
만약 오타나 사소한 코드 실수가 발생했을 때 모든 코드에 복붙을 하거나 수정을 하기엔 너무 번거롭고 또 다른 실수가 이어지기 쉽지 않을까요??
레이아웃 중복 관리는 바로 이러한 점에서 정말 중요하다고 말할 수 있습니다!
정리하자면,
Layout 중복 코드를 분리하는게 편리한 이유?
1. 코드의 불필요한 중복 제거로 딱 핵심 코드만 확인할 수 있음.
2. 유지보수에 용이 -> 분리된 코드만 수정하면 모든 페이지에 적용됨.
이 두가지 이유를 들 수 있겠네요!!
이제 Thymeleaf 템플릿 엔진을 사용하여 레이아웃 세팅을 하는 방법에 대해 알아보겠습니다.
1. build.gradle에 dependency 코드 추가
dependencies {
// https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect
implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.5.2'
}- mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect/2.5.2 참고
2. 공통 부분 layout 템플릿 만들기 (src/main/resources/templates/fragments)
2-1. header.html (header 부분만을 작성한 코드 파일)
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="headerFragment" class="header navbar-fixed-top">
<!--header 부분 code -->
</div>
</html>
2-2. footer.html (footer 부분만을 작성한 코드 파일)
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footerFragment" class="header navbar-fixed-top">
<!--footer 부분 code -->
</div>
</html>
2-3. config.html (공통으로 사용할 css, js 파일 등의 선언 코드를 모은 파일)
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!-- configFragment -->
<th:block th:fragment="configFragment">
<!-- Style 예시 -->
<link th:href="@{/css/style.css}" rel="stylesheet">
<!-- Javascript file 예시 -->
<script th:src="@{/js/file.js}"></script>
</th:block>
</html>
2-4. layout.html (전체적인 틀을 작성한 코드 파일)
<!DOCTYPE html>
<!-- layout 관련 namespace 추가 선언 -->
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8">
<!-- config.html -->
<th:block th:replace="fragments/config::configFragment" ></th:block>
</head>
<!-- header.html -->
<header th:replace="fragments/header::headerFragment"></header>
<!-- 공통적이지 않은 부분이 들어가는 부분 -->
<body layout:fragment="content"></body>
<!-- footer.html -->
<footer th:replace="fragments/footer::footerFragment"></footer>
</html>
3. 레이아웃 적용 ( 개별 파일에 2번에 생성한 템플릿 적용하기 ) ex) index.html
<!DOCTYPE html>
<!-- 관련 Namespace 선언 및 layout:decorate 추가 -->
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/layout}">
<head>
<!-- layout.html 에 들어간 head 부분을 제외하고 개별 파일에만 적용되는 head 부분 추가 -->
<title>Page Title</title>
<!-- 필요하다면 개별 파일에 사용될 css/js 선언 -->
</head>
<!-- layout.html에 정의한 main page 부분 -->
<body layout:fragment="content">
<!-- code -->
</body>
</html>
이런식으로 레이아웃 템플릿을 생성한 후, 개별 파일에 만든 템플릿을 적용해주면
유지보수도 용이하고, 코드의 길이도 많이 줄일 수 있습니다!!
저도 thymeleaf를 최근에 알게 되어 써보고 있고, 이전에는 jsp를 사용해 템플릿 관리를 했었는데
thymeleaf가 spring boot에서는 자동 설정을 지원하고, JSP보다 편리한 점이 많아 자주 사용하고 있다고 합니다.
이 게시물을 보시는 분들도 thymeleaf를 사용해 손쉽고 편리하게 View를 구현해보시기 바랍니다!!
✨ Reference ✨
[Spring Boot Tutorial] 6. Thymeleaf layout 설정하기
Thymeleaf Layout Dialect 이전 게시글 [Spring Boot Tutorial] 5. Thymeleaf 템플릿 엔진 이용하기 공통 구성요소들(header, nav, footer)를 공유하고, 컨텐츠 관련요소(section)만 변경하고 싶을 때 layout을 사..
blog.jiniworld.me
[Spring Boot] thymeleaf template layout 사용하기
thymeleaf template layout은 thymeleaf를 이용하여 공통 page를 fragment, layout형식으로 조립할 수 있는 template engine입니다. thymeleaf template layout을 사용하는 간단한 예제 프로젝트를 진행해보도록..
bamdule.tistory.com