타임리프 구문을 잘 모르겠다면
이전에 간단하게 정리해놓은 글이 있으니 먼저 보기 바란다.🤬
(타임리프와 jsp를 고민하고 있는 AA나 PL이 있다면 아래 타임리프 벤치마크 성능 링크도 남겨놓았으니 참고하면 좋을 듯)
아마 JSP에 익숙한 사람은 금방 손에 익을 것 같다.
개인적인 생각으로 자바스크립트로 동적으로 데이터 렌더링 하는 코드를 줄일 수 있으나 예외처리에는 조금 불편함이
있는 것 같다.
이번에 내가 맡게 된 업무는
동영상을 업로드 하여 광고 소재로 내보낼 수 있게 되었으니
해당하는 동영상을 자체적으로 만들거나 또는 수정할 수 있게
이미지를 이용하여 동영상을 만들거나 수정할 수 있는 웹 스튜디오를 만드는 것이였다.🤔
진행상황
서버에서 받은 데이터 조회 및 가공(포맷) 처리
기존 자바스크립트로 데이터 append 하여 렌더링 하는 부분 타임리프로 처리
이슈 & 고민 및 해결
1. 타임리프는 서버 사이드 렌더링(SSL)이지 CSR이 아니라는 점
한 html에 두개 이상 fragment 정의 했을 경우
서버에서 받는 html 아닌 클라이언트에서 받으면 th:block 이 두개 나와 당황했다..
html 을 서버에서 받아 처리하는 방법과 th:if 로 조건 처리 하는 방법으로 명확하게 replace 할 수 있다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="fragmentA">
<div class="djlife">
퇴근하고싶다.
</div>
</th:block>
<th:block th:fragment="fragmentB">
<div class="djlife">
집가고싶다.
</div>
</th:block>
</html><!-- 불러오는 페이지 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:replace="/fragments/fragmentTest :: fragmentA"></th:block>
</head>
<body>
<h1>개발자는 어디까지 공부해야할까?</h1>
</body>
</html>2. 프론트 프레임워크 (react,vue ...) 처럼 상태 관리가 되지 않는다.
데이터 변동 시 수동으로 데이터 처리를 해주어야 한다.. 😇
3. 자바스크립트에서 동적 렌더링 할 때 처리를 보다 쉽게 가능
자바스크립트로 키워드 강조하는 것보다 타임리프로 키워드 강조하는게 더 간단하다 😁
<div>
<em th:utext="'상품코드 ' + (${#strings.isEmpty(keyword) ? rowData.prdtCode : #strings.replace(rowData.prdtCode, keyword, '<b class=highlighted-text>' + keyword + '</b>')})">상품코드</em>
<p th:utext="(${#strings.isEmpty(keyword) ? rowData.prdtName : #strings.replace(rowData.prdtName, keyword, '<b class=highlighted-text>' + keyword + '</b>')})">상품명</p>
</div>
backend 코드는 생략!
이 글은 타임리프 스터디하면서 작성한글
TO DO List
1. 화면 fragment 공통으로 쪼갤 수 있는 컴포넌트는 최대한 분기
2. 타임리프 디버깅 방법 스터디
참고 레퍼런스
타임리프(Thymeleaf) 사용 방법 및 문법 정리
들어가기 전 🔥 지금 있는 회사는 view 템플릿 엔진으로 thymeleaf 를 사용하고 있기에 간단하게 정리하여 글을 남긴다. "아니 나는 백엔드 개발자인데 ?" "이거 몰라도 되는 거 아니야?" 🤦♂️
djlife.tistory.com
https://dzone.com/articles/modern-type-safe-template-engines-part-2
Modern Type-Safe Template Engines (Part 2) - DZone
We wrap up this quick two-part series on modern template engines that introduce type-safety to the world of HTML by doing feature and performance comparisons.
dzone.com
https://smarterco.de/java-benchmark-thymeleaf-2.1.4-vs-thymeleaf-3.0-snapshot/
Java: Benchmark Thymeleaf 2.1.4 vs Thymeleaf 3.0 SNAPSHOT
Page of Kamil Wozniak, a freelance software architect / developer working in and around Hamburg, Germany.
smarterco.de
https://github.com/thymeleaf/thymeleaf
GitHub - thymeleaf/thymeleaf: Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf is a modern server-side Java template engine for both web and standalone environments. - GitHub - thymeleaf/thymeleaf: Thymeleaf is a modern server-side Java template engine for both web ...
github.com
'Develop > Back-End' 카테고리의 다른 글
| Spring Boot 환경에서 Appium을 통해 모바일 환경 테스트 하기 + 플러그인 (09.19 수정) (66) | 2023.09.17 |
|---|---|
| Selenium 을 이용하여 특정 URL 요청과 응답 값 모니터링 하는 기능 만들기 (77) | 2023.09.07 |
| JAVA 에서 FFMPEG를 통한 영상 정보 읽기 및 영상 인코딩(압축) 처리 도전기 (61) | 2023.08.16 |
| 타임리프(Thymeleaf) 사용 방법 및 문법 정리 (35) | 2023.08.08 |
| [Java] 스트림(Stream) API 사용 방법 / 외부반복 내부반복 차이점 (4) | 2023.08.05 |