https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
강의를 수강하며 공부한 것을 정리한 글입니다.
템플릿과 레이아웃
웹 페이지 상의 공통되는 영역들을 일일이 복붙으로 개발하는 것은 비효율적이다. 중복이 발생하기도 하고 변경사항이 생기면 하나하나 찾아다니며 수정해야하기 때문이다. 타임리프에서는 이를 해결하기 위해 템플릿, 레이아웃 기능을 제공해서 효율적으로 개발할 수 있도록 도와준다.
템플릿
템플릿 예시 코드는 다음과 같다
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
footer
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
<div th:fragment="hello">
<h1>hello div!</h1>
</div>
</body>
</html>th:fragment = "이름" 으로 만들어놓고 다른 html 파일에서 가져다 쓰면 된다.
가져다 쓰는 방법은 2가지다
1.
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
th:insert를 넣은 div 태그 안에다 템플릿 코드를 넣는 방식. ~{ 경로 :: 템플릿이름 }
2.
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
th:replace를 넣은 div 태그 자체를 replace 하는 방식
추가. 파라미터 전달
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>파라미터를 넣으려면 함수를 호출하듯이 소괄호 열고 파라미터를 입력한다. 인자의 갯수는 맞춰줘야한다.
레이아웃
템플릿은 필요한 부분을 가져다가 쓰는 것이라면 레이아웃은 이보다 더 큰 개념이다. 큰 틀이 정해져있고 그 틀에 페이지마다 원하는 인자를 전달해서 쓰는 방식이다.
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links, div)">
<title th:replace="${title}">레이아웃</title>
<th:block th:replace="${links}" />
<th:block th:replace="${div}"></th:block>
</head>레이아웃의 코드이다. title, links, div 를 인자로 넘겨주면 된다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link}, ~{::div})">
<title>메인</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
<div style="width:100px; height:100px; border: 1px solid red;"></div>
</head>
<body>
<div style="width:100px; height:100px; border: 1px solid blue;"></div>
</body>
</html>
~{::title} 은 title 태그 자체가 인자로 넘어가고 ~{::link} 는 link 태그들이 인자로 넘어간다. 수업의 예제에서 추가로 div 태그도 해봤는데 당연히 th:replace 태그 내에 있는 태그들만 넘어간다고 생각했는데 body에 있는 div도 인자로 넘어갔다. 그래서 결과는 다음과 같았다.
템플릿 vs 레이아웃
템플릿은 레이아웃에 비해 간단하다. 하지만 간단한 만큼 중복이 좀 생긴다. 그렇기 때문에
페이지가 적으면 템플릿 !
페이지가 많으면
레이아웃!
'백엔드 > 스프링' 카테고리의 다른 글
| 스프링 부트 배너 멋있게 바꾸기 (0) | 2021.10.06 |
|---|---|
| 타임리프 정리2 (0) | 2021.09.13 |
| 타임리프 사용법 정리 (0) | 2021.09.13 |
| 스프링 No serializer found for class 에러 해결 (0) | 2021.08.24 |
| PRG (Post Redirect Get) (0) | 2021.08.19 |
