HTML 코드를 작성하다보면 대표적으로 <head></head>부분과 같이 공통적으로 작성하게 되는 코드가 발생합니다. 그렇기에 웹 개발에서 HTML 코드의 중복을 최소화하는 것은 개발의 효율성과 유지보수의 용이성을 높이는 중요한 작업입니다. 이번 포스트에서는 타임리프를 사용하여 템플릿 상속을 통한 코드 리팩토링을 어떻게 진행했는지에 대해 다루어보겠습니다.
타임리프란 무엇인가?
우선 간단하게 타임리프가 무엇인지 짚고 넘어가겠습니다.
타임리프(Thymeleaf)는 자바 기반의 서버 사이드 템플릿 엔진입니다. 스프링부트와의 연동이 간편하며, HTML과 XML 문서를 자바 객체로 처리할 수 있게 해줍니다.
즉, 타임리프를 통해 DB에서 가져와 여러가지 가공을 한 데이터(자바 객체)를 정적인 HTML문서에 넣어 동적인 뷰를 보여줄 수 있다는 의미입니다.
템플릿 상속이란?
템플릿 상속이란 한 HTML 파일에서 다른 HTML 파일의 특정 부분을 상속받아 사용하는 것입니다. 이를 통해 공통된 레이아웃을 재사용하고 중복을 제거할 수 있습니다.
타임리프를 이용한 템플릿 상속 구현
1) 공통 레이아웃 작성
먼저, 모든 페이지에서 공통으로 사용되는 레이아웃을 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 공통 헤더 정보 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 부트스트랩 CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
</head>
<body>
<!-- 상속받아 바꿀 부분 -->
<th:block layout:fragment="content"></th:block>
</body>
</html>
2) 템플릿 상속 적용
공통 레이아웃의 특정 부분을 상속받아 사용하고 싶은 페이지에서는 다음과 같이 적용할 수 있습니다.
<!-- 아래부분은 상속할 기본 html을 의미함 -->
<!-- 이 문서는 Layout.html이라는 템플릿을 상속한다 -->
<html layout:decorate="~{Layout}">
<!-- 상속한 템플릿의 content부분을 아래 div 컴포넌트로 바꾼다 -->
<div layout:fragment="content">
</div>
</html>
'웹개발' 카테고리의 다른 글
| 사용자 인증 (0) | 2023.09.22 |
|---|---|
| @ResponseStatus를 이용하여 커스텀 예외를 만드는 방법 (0) | 2023.09.02 |
| 서비스(Service) (0) | 2023.08.08 |
| 리다이렉트, 포워드 (0) | 2023.08.08 |
| 타임리프 템플릿에 데이터 전달하기 (0) | 2023.08.04 |
