개인프로젝트

[개인프로젝트] 가계부 프로젝트 step3.1 : Thymeleaf 레이아웃 만들기

ydin 2024. 5. 9. 21:59

1. 계기

이번 개인프로젝트는 서버 사이드 렌더링으로 만들었기에 Thymeleaf로 화면을 만들고 있다. 화면을 계속 만들다보니 몇가지 귀찮고 번거로운 작업들이 있는데, 그 중 하나가 중복된 <head> 태그를 똑같이 상단에 배치하는 것이었다. 

 

사용하는 헤더는 대략 다음과 같은데, 여기에서 새로운 <link>나 <script>를 추가해야하거나 변경해야하는 경우에는 모든 html 파일에 들어가서 수정해줘야 하는 번거로움이 있었고, 새로운 파일을 만들더라도 같은 내용을 계속 복붙을 해서 추가하는게 불필요한 작업이라고 생각했다. 그래서 이번에 레이아웃을 만들어서 적용해야겠다 싶었고, Thymeleaf를 적용하고 있으니 Thymeleaf 레이아웃 적용법을 공부해봐야겠다 싶었다.

 

일단 계속 사용하고 있는 헤더는 다음과 같다. 이거를 매번 새로운 html 파일 생성할 때마다 복붙하고, 변경이 생겼을 때 모든 파일에 적용하는 것이 얼마나 불편한지 겪어보지 않으면 모른다!

<head>
  <meta http-equiv="Content-Type" content="text/event-stream; charset=utf-8"/>
  <title>AccountBook</title>

  <!--아래 순서가 중요하다-->
  <script src="/webjars/jquery/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

  <script src="/static/js/index.js" type="text/javascript"></script>
</head>

 

 

2. 레이아웃 적용

일단 본 프로젝트에서는 Thymeleaf를 사용하기에 타임리프에서 레이아웃 적용법을 공부했다. 자세한 과정은 다음과 같다. 

 

2-1. 의존성 주입

gradle에서 타임리프와 타임리프 레이아웃 의존성을 추가해준다(타임리프 의존성이 있다면 생략 가능하다).

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

 

2-2. header와 footer 만들기

모든 html 파일에 적용할 헤더와 푸터를 만들어야 하는데, 위치는 스프링에서 /resources/templates/fragments 디렉토리를 만들어 저장하면 된다. 

/resources/templates/fragments/header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headerFragment">

    <head>
    적용할 <meta>, <script>, <link> 태그 정보를 추가하면 된다.
    </head>
    
</th:block>
</html>

 

/resources/templates/fragments/footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footerFragment">

    <head>
    적용할 <meta>, <script>, <link> 태그 정보를 추가하면 된다.
    </head>
    
</th:block>
</html>

 

 

2-3. 헤더와 푸터를 적용할 레이아웃 만들기

헤더와 푸터를 만들었으면 이들을 모든 html 파일에 적용할 수 있게 레이아웃 파일을 만들어야한다. 여기서는 default_layout이라고 명명했지만 이름은 상관 없다. 하지만 경로는 /resources/templates/layout이어야 한다.

 

/resources/templates/layout/default_layout.html

위 경로에 레이아웃 파일을 만들고 헤더위치에는 headerFragment를, 푸터 위치에는 FooterFragment의 <th:block>를 추가한다. 

중간에 들어갈 <body> 코드도 <th:block>으로 추가한다. 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:replace="fragments/header :: headerFragment"></th:block>

    <body>
        <th:block layout:fragment="content"></th:block>
    </body>
    
<th:block th:replace="fragments/footer :: footerFragment"></th:block>
</html>

 

 

3. 파일에 레이아웃 적용하기

만들어 놓은 레이아웃을 일반 파일에 적용하면 된다. 적용 구조는 다음과 같다.

파일명에 따라 아래에 layout:decorate의 값이 다를 수 있지만, 나머지 구조는 아래와 같이 동일하게 해야지 레이아웃이 적용된다. 마지막에 </th:block>과 </html> 태그 추가 하는 것을 까먹으면 안된다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layout/default_layout">
<th:block layout:fragment="content">

 내용(<body></body> 태그를 추가하지 않아도 된다)
 
</th:block>
</html>

 

 

위 과정을 거치면 이제 매번 헤더, 푸터를 복붙하지 않아도 된다!!

 

 

참고

https://zepettoworld.tistory.com/9