타임리프(Thymeleaf) 초기세팅하고 기본 레이아웃(layout) 세팅하기-치트시트
스프링 부트를 공부하다보면 프론트엔드를 구성하기 위해 타임리프(Thymeleaf)를 사용하게 됩니다. 그런데 이 타임리프를 사용하기 위해서는 라이브러리를 설치하고 매번 반복된는 화면 세팅을 하기 위해서는 기본 레이아웃을 세팅해서 사용해야 합니다. 다만 이러한 초기 세팅은 프로젝트를 진행하는 동안 딱 한 번하기 때문에 자주 까먹기 마련입니다. 저는 이것을 외울까 아니면 어디서 복붙 할까 고민하다가 이렇게 기록을 남겨 복붙하는 방향을 선택 하였습니다.
그러면 이제부터 타임리프 초기 세팅과 기본 레이아웃을 세팅해보도록 하겠습니다.
1. 라이브러리 설치
타임리프와 레이아웃 기능을 사용하기 위해서는 라이브러리를 두개 설치해야 됩니다. 기본 타임리프 라이브러리는 인텔리제이 유료버전이나 스타터 사이트를 통해 만드실 경우 쉽게 추가하실 수 있지만 레이아웃 기능을 사용하기 위한 라이브러리인 thymeleaf-layout-dialect는 아래 코드에서 복사하여 붙여넣으시길 바랍니다.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'2. 기본 레이아웃 설정
스프링 부트 프로젝트를 통해 웹 화면을 구성하다보면 매번 반복되는 부분이 있기 마련입니다. 대표적으로 아래와 같은 기본 html 구조에서 <head> 부분은 모든 프로젝트 화면에서 똑같은 코드를 반복하는 일이 대다수 일것 입니다. 타임리프의 thymeleaf-layout-dialect 라이브러리는 이런 반복적인 코드를 줄여주는데 도움이 되는 라이브러리 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
이제 타임리프를 사용하기 위한 초기 세팅을 시작해보겠습니다. 우선 layout.html 의 코드는 다음과 같습니다.
이 중 <html> 태그에 있는 것은 어떤 html 파일에도 공통적으로 들어가야 하는 것 이니 복사 붙여넣기 해서 사용하시기 바랍니다. <th:block> 태그부분에 다른 파일에서 만든 html코드가 들어가는 부분입니다. layout:fragment="이름" 으로 사용합니다.
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<th:block layout:fragment="content"></th:block>
</body>
</html>3. 홈 화면에서 기본 레이아웃 사용하기
이제 만든 레이아웃을 사용할 차례입니다. 아래와 같이 간단한 웹사이트를 만들어 보았습니다. 이전 layout.html과 달리 layout:decrate="~{layout}" 부분이 추가 되었습니다. <div layout:fragment="content" class = "container> 부분에 이제 각 화면별로 원하는 구성을 하시면 됩니다.
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
<h1>home</h1>
<p> Welcome to my Home</p>
</div>
</html>마치며
초기 세팅은 프로젝트 초반 딱 한번만 하기 때문에 자꾸 까먹습니다. 사실 정보가 넘쳐 흐르는 세상에 구지 머리속에 다 외울 필요 없이 어딘가 기록되어 있으니 그거 보고 빨리 넘어가는 것도 방법인거 같습니다.
타임리프 레이아웃 관련 라이브러리 홈페이지
https://ultraq.github.io/thymeleaf-layout-dialect/
Home
A dialect for Thymeleaf that lets you build layouts and reusable templates in order to improve code reuse
ultraq.github.io
'프로그래밍사업 > 사이드 프로젝트' 카테고리의 다른 글
| [스프링부트/업무일지 만들기] 스프링 부트 초기 설정 하기 (0) | 2024.05.31 |
|---|---|
| [스프링부트/업무일지 만들기] 매일 회사에서 한 일 정리하는 업무일지 만들기 (0) | 2024.05.31 |
| [MySQL][23000][1062] Duplicate entry '1' for key 'doit_clusterindex.PRIMARY' 오류 해결 (0) | 2024.04.17 |
| [업무 자동화] 자바로 엑셀 파일 읽어서 데이터 모으자 (2) | 2024.04.10 |
| [자바] 맥에 설치된 자바 버전 확인 하는 법, 삭제하는 법, 버전 바꾸는 법(M1 맥, zsh, 버전 변경 안될 때) (0) | 2024.01.21 |
댓글