728x90
1. Thymeleaf
Template Engine이란?
가공한 데이터를 동적으로 만들기 위해, 미리 정의된 템플릿으로 동적 HTML을 만들어 클라이언트에 전달하는 방식
( == 서버 사이드 렌더링 방식 )
( JSP, Thymeleaf 등이 포함 )
- JSP와 달리
Thymeleaf는 html 파일을 서버 사이드 렌더링 없이 띄워도 상관 없음 - 이를
natyral template라고 한다.
2. Spring Boot Devtools
Spring Boot Devtools 기능
Automatic Restart: classpath에 있는 파일 변경 시마다 자동으로 재시작Live Reload: 정적 자원 수정 시 새로고침 없이 바로 적용Property Defaults: 캐싱 기능 사용
Gradle에서 사용하기
https://seolhee2750.tistory.com/193
3. Thymeleaf 태그
3.1 th:text
- 서버에서 전달 받은 값을 텍스트로 사용하고 싶을 때
<span th:text="${itemDto.itemNm}"></span>3.2 th:each
- 여러 개의 데이터를 가지고 있는 컬렉션 데이터를 화면에 출력할 때
<tr th:each="itemDto, status: ${itemDtoList}">
<td th:text="${status.index}"></td>
<td th:text="${itemDto.itemNm}"></td>
<td th:text="${itemDto.itemDetail}"></td>
<td th:text="${itemDto.price}"></td>
<td th:text="${itemDto.regTime}"></td>
</tr>- itemDtoList에 있는 데이터를 하나씩 꺼내 itemDto에 담아둠.
- status는 현재 반복에 대한 상태 데이터가 저장됨.
3.3 th:if, th:unless
- if, else 조건 처리할 때
<tr th:each="itemDto, status: ${itemDtoList}"> <td th:if="${status.even}" th:text="짝수"></td> <td th:unless="${status.even}" th:text="홀수"></td> <td th:text="${itemDto.itemNm}"></td> <td th:text="${itemDto.itemDetail}"></td> <td th:text="${itemDto.price}"></td> <td th:text="${itemDto.regTime}"></td> </tr>
3.4 th:switch, th:case
- java의 switch 구문을 사용할 때
<tr th:each="itemDto, status: ${itemDtoList}">
<td th:switch="${status.even}">
<span th:case=true>짝수</td>
<span th:case=false>홀수</td>
<td th:text="${itemDto.itemNm}"></td>
<td th:text="${itemDto.itemDetail}"></td>
<td th:text="${itemDto.price}"></td>
<td th:text="${itemDto.regTime}"></td>
</tr>3.5 th:href
Absolute URL: http:// 로 시작하는 URLContext-relative URL: 애플리케이션 서버 내부를 이동하는 URL
<!-- Absolute URL -->
<a th:href="@{http://www.thymeleaf.org/}">Thymeleaf 페이지 이동</a>
<!-- Context-relative URL -->
<a th:href="@{/thymeleaf/ex01}">예제1 페이지 이동</a>3.5.1 파라미터값을 전달할 경우
<a th:href="@{/thymeleaf/ex06(param1 = '파라미터 데이터1',
param1 = '파라미터 데이터2')}">thymeleaf 파라미터 전달</a>@GetMapping(Value = "/ex06")
public String thymeleafExample06(String param1, String param2, Model model){
model.addAttribute("param1", param1);
model.addAttribute("param2", param2);
return "thymeleafEx/thymeleafEx06";<div th:text="${param1}"></div>
<div th:text="${param2}"></div>4. Thymeleaf 페이지 레이아웃
- 레이아웃을 이용해서 각 페이지의 공통 요소를 한번에 관리해보자
header,content,footer세 가지 부분으로 나눠짐
[ Thymeleaf Layout Dialect ]
https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect
-> footer
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
footer 영역 입니다.
</div>
</html>-> Header
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="header" th:fragment="header">
header 영역 입니다.
</div>
</html>-> layout
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}">
<div layout:fragment="content">
본문 영역입니다.
</div>
</html>=> 실행 결과
header 영역 입니다.
본문 영역 입니다.
footer 영역 입니다.5. 부트스트랩 이용
- 직접 html, css, Js 수정 없이 만들어져있는 양식을 쉽게 사용할 수 있는
프레임워크
https://getbootstrap.com/docs/5.3/getting-started/introduction/
728x90
'🛠 백엔드 > 쇼핑몰 클론코딩' 카테고리의 다른 글
| [2] JPA (0) | 2023.01.08 |
|---|---|
| [7] Order (0) | 2023.01.07 |
| [6] Item 등록 및 조회 (0) | 2023.01.04 |
| [5] 연관매핑 (0) | 2022.12.30 |
| [4] Spring Security (1) | 2022.12.30 |
