타임리프 레이아웃( ThymeleafLayout)
타임리프에는 레아이웃이라는 기능이 존재한다. 우리가 어떤 웹사이트를 만들때, 각 창에 헤더나 풋터처럼 공통된 부분이 상당부분 존재하게 된다. JS에서는 jQuery의 load함수를 이용해 이런 공통되는 부분들을 코드로 작성하지 않고, html파일 통째로 끌고오는 식으로 구현했던 것과 같이, 타임리프 레이아웃 역시 이를 위한 기능이다.
다만 역시 JAVA답게 그 적용방식이 JS보다 훨씬 복잡하다.
사용법
1. 타임리프와 타임리프 레이아웃을 html파일 상단에 끌고온다.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">2. 공통 양식 코드만 작성한 html 파일을 만든다. 공통적인 부분의 html은 각각 다른 파일을 만들어 코드를 작성하자. 그렇게 만들어진 파일에 구현된 태그에 th:fragment="headerFG" 처럼 적당한 이름으로 프레그먼트로 지정해주자.
이렇게 만들어진 파일들은 templates의 하위 폴더를 만들어 그곳에 보관하자.
<header th:fragment="headerFG">3. 모든 공통 태그에 2의 과정을 거친뒤, 만들어둔 공통 html폴더로 웹을 구현할 html폴더를 하나 더 만든다. 이후, 만들어둔 html을 구현하고 싶은 태그에 th:replace="경로명" :: 'fragment이름' 형식으로 만들어둔 코드를 적용시킨다.
<header th:replace="fragments/header :: headerFragment"></header>4. 3번 과정이 끝났으면 이제 공통 태그들은 모두 구현되었을 것이다.이제 이 파일은 일종의 무한히 복제되는, 내용물없는 붕어빵이 된다. 우리가 원하는 콘텐츠만 추가하면 되는 것이다. 함수와 객체의 관계와 상당히 유사하다.
따라서 웹의 개별적인 컨텐츠 역시, 기존의 다른 공통태그들이 그런것처럼 fragment로 받을수 있다.
웹에 넣고자 하는 컨텐츠를 작성한 html파일을 따로 만들고, 구현된 태그에 th:fragment="content" 처럼 프레그먼트로 지정해주자. 그리고 그 프레그먼트를 받아야 하는 공통파일의 태그에는, 경로를 지정해두지 말고 프레그먼트 이름만 적으면 된다. ::를 이용한 프래그먼트 태그 역시 표기하면 안된다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{ layout }">
<!-- 콘텐츠페이지(first.html)의 head내용이 layout.html의 head에 자동으로 추가된다. -->
<head>
<title>index.html 타이틀</title>
<link rel="stylesheet" href="/css/first.css"> css적용
</head>
<div layout:fragment="content">
<h2>first.html 화면</h2>
</div>
</html>
<!-- 공통 태그들을 전부 구현한 파일 -->
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<th:block th:replace="fragments/head :: headFragment"></th:block>
</head>
<body>
<header th:replace="fragments/header :: headerFragment"></header>
<div layout:fragment="content"></div>
<footer th:replace="fragments/footer :: footerFragment"></footer>
</body>
</html>5. 이제 파일만 옳바르게 열면 끝난다. controller 클래스에서 맵핑해주면 되는데, 이때 열리는 html파일을 공통 파일이 아닌, content만 넣어둔 파일로 열어야 한다. 말하자면 여지껏 다른 태그들은 전부 공통 태그 파일로 가져왔지만, content는 그렇게 완성된 공통태그 파일을 자기한테 가져오는 것이다. 이 점이 클래스와 객체와 약간 다르기도 하고, 기존의 fragment적용 방식과 다른점이다.
비유를 들어 설명하면 content는 결국 그 웹사이트의 주인공이다. 공통 태그 파일은 결국 조연에 불과하다. 그러니 주인공 사정에 맞추기 위해 조연들이 한데 모여 움직이는 것이다.
완성된 사이트의 화면은 아래와 같다.
'공부 > springboot' 카테고리의 다른 글
| MVC -- Model(2) : 데이터 받아오기 (0) | 2023.01.25 |
|---|---|
| 데이터의 전송 타입( Get/ Post) (0) | 2023.01.25 |
| MVC -- Model(1): 데이터 전송하기 (0) | 2023.01.25 |
| 46일차 복습 (1) | 2023.01.19 |
| 45일차 복습 (0) | 2023.01.17 |
