💻본 포스팅은 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 김영한'님의 강의를 듣고 작성되었습니다.
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
[템플릿 조각과 레이아웃의 등장배경]
- 웹페이지 개발에 공통영역이 많이 있다.
- 이를 위한 코드를 복사해서 붙여 넣기하는 일은 상당히 비효율적이다.
이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 thymleaf에서는 지원하고 이를 어떻게 사용하는지 보도록 하자.
[템플릿 조각]
[공통으로 사용되는 부분을 따로 조각(파일)로 만든 코드]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<footer th:fragment="yaloo">
푸터 자리입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text = ${param1}></p>
<p th:text = ${param2}></p>
</footer>
</body>
</html>- footer같은 경우엔 페이지마다 코드를 복사해서 붙이기가 아주 번거롭기 때문에 하나의 조각(파일)을 따로 둔 채로 원할 때 마다 조각을 불러오는 방식을 사용하는 것이 바람직합니다.
[조각난 공통 코드를 thymleaf에서 불러오는 여러 방법]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<!--추가-->
<div th:insert="~{template/fragment/footer :: yaloo}"></div>
<!--현재 테그를 완전히 대체-->
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: yaloo}"></div>
<!--~{}로 진행해야 하지만 단순하면 이러게도 진행 OK-->
<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: yaloo"></div>
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html>- 템플릿을 조각으로 내놓은 채로 재사용하는 것들을 불러서 추가하거나 대체하거나 하는 방식으로 사용하면 된다.
- 일부 코드 조각을 가지고 와서 사용할 때 = 템플릿 조각
- 템플릿 조각보다 더 큰 개념으로 확장해서 코드 조각을 레이아웃에 넘겨 사용하는 방법 = 템플릿 레이아웃
[결과 화면]
- 위의 주석으로 설명해뒀으니 이해가 안 된다면 다시 읽어보자
[정리]
'Back-End > Spring' 카테고리의 다른 글
| [Spring MVC2][메시지, 국제화] - 메시지, 국제화 (0) | 2022.04.25 |
|---|---|
| [Spring MVC2][타임리프] - 템플릿 레이아웃 (0) | 2022.04.15 |
| [Spring MVC][웹 페이지 만들기] - 2. 상품 도메인 개발과 HTML (0) | 2022.04.04 |
| [Spring MVC][웹 페이지 만들기] - 1. 요구사항 분석 (0) | 2022.04.04 |
| [Spring MVC][HTTP 요청] - 3. 요청 메시지 - 단순 텍스트, JSON (0) | 2022.03.29 |