0. 들어가며...
웹개발을 하면서 접해본 기술을 적어보고자 한다.
현재 프로젝트는 전자정부프레임워크를 바탕으로 Thymeleaf 템플릿 웹엔진을 사용하고 있다.
아래는 글을 작성하며 참고한 블로그들이다.(감사합니다!)
1. Thymeleaf란?
비교적 최근에 만들어진 템플릿 엔진이며 서버사이드 자바 템플릿 엔진의 한 종류
JSP와 Thymeleaf의 가장 큰 차이점은 JSP와 달리 Servlet Code로 변환되지 않다는 점이다. 따라서 비즈니스 로직과 분리되어 오로지 View에 집중가능
👏 장점
1. 서버상에서 동작하지 않아도 된다.
톰캣같은 서버가 동작하지 않아도 HTML 페이지가 잘 보이기 때문에 마크업을 쉽게 수정할 수 있다.
2. 전체적인 마크업 구조를 흐트려트리지 않는다.
다른 view Template-Engine처럼 문법을 사용하여 전체적인 마크업 구조를 흐트러 트리지 않는다.
3. 효율적 개발
애플리케이션을 개발할때 디자인과 개발이 분리되어 작업 효율을 향상시킬 수 있다.
2. Layout 사용법
Thymeleaf를 이용한 레이아웃을 간단히 살펴보도록하자.
들어가기에 앞서, 아래 3가지 구성요소로 정의해보고자 한다.
🙄 Fragments : 공통적, 반복적 구성요소
🙄 Layouts : 틀, 레이아웃으로 사용
🙄 Contents : 내용물
대부분의 html은 head, header, body, footer로 구성되어진다.
이때, 각 구성요소들을 어딘가에서 가져와 사용하는것을 Tymeleaf layout이라고 할 수 있겠다.
(노란 박스들이 body이다.)
기억해야할 부분은 아래와 같다.
교체를 당할 부분은 th:replace="경로 :: 구분자"로 표시한다.
교체가 되어 보여질 부분은 th:fragment="구분자"로 표시한다.
layout의 틀을 만들때는 꼭 xmlns:layout="http://경로/thymeleaf/layout" 네임스페이스를 적어주어야 한다!
(만들어진 레이아웃을 나중에 가져다 사용하므로 레이아웃이 무엇인지 알려주는게 필요하다.)
예제
🎈 교체가 이루어지는 틀 layout
layout/default.html
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- [head] 영역 시작 -->
<head th:replace="fragments/head :: headFragment">
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">default</title>
</head>
<!-- [head] 영역 끝 -->
<body>
<!-- [header] 영역 시작 -->
<header th:replace="fragments/header :: headerFragment"></header>
<!-- [header] 영역 끝 -->
<!-- [content] 영역 시작 -->
<div layout:fragment="content"></div>
<!-- [content] 영역 끝 -->
<!-- [footer] 영역 시작 -->
<footer th:replace="fragments/footer :: footerFragment"></footer>
<!-- [footer] 영역 끝 -->
</body>
</html>🎈 교체가 되어 보여질 head 내용(headFragment)
fragments/head.html
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headFragment">
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE"></title>
<meta charset="UTF-8" />
<!-- 공통적인 css -->
<link rel="stylesheet" href="css/commons.css" />
<!-- 개별적인 css -->
<th:block layout:fragment="css"></th:block>
</head>
</html>default.html의 head가 head.html로 교체된다.
🎈 레이아웃을 가져와 사용할 Contents
default.html을 살펴보면 layout:fragment="content"부분이 있을 것이다. 이 부분에 원하는 "알맹이"를 넣으면 된다.
아래 예제에서 알맹이는 content.html의 layout:fragment="content 부분이 될 것이다.
content.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<head>
<title>content1</title>
</head>
<!-- 페이지의 개별적인 css -->
<th:block layout:fragment="css">
<link rel="stylesheet" href="css/content1.css" />
</th:block>
<div layout:fragment="content" style="width: 100%; height:100px; background: #f2d299;">
this area is content1
</div>
</html>주의해야할 점은 content.html에 layout:decorator="layout/default" 를 넣어 어느 레이아웃을 사용할 것인지 알려주어야 한다.
3. 마치며...
간단히 th:replace와 th:fragment 등만 다뤄봤지만 이 밖에도 제공되는 여러 속성이 있다.
배워야 하는점도 해야하는 것들도 많지만 하나씩 하다보면 언젠가 필요할때 사용할 줄 아는 사람이 되지 않을까 생각해본다.
