[SPRINGBOOT] Thymeleaf 에 대해서 (개념, 활용팁)

Thymeleaf는 웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진이다.

HTML 기반 Spring Framework 용 모듈이며 , HTML5 JVM 웹 개발에 가장 이상적인 템플릿 엔진이라고도 한다.

 

HTML에서만 서버로부터 받은 데이터를 활용하여 화면에 동적 렌더링이 가능하다.

그래서 HTML을 JS처럼 사용해야 하는 번거로움이 있었다.

 

JSP(java Server Pages)는 서블릿으로 변환되어 실행되고, JSP 내에서 java 코드를 작성가능하고 html, js 등 자유롭게 개발이 가능한 반면, Thymeleaf는 java코드를 직접 사용 불가능하고, jsp처럼 커스텀이 원활하지 않습니다.

 

@ Thymeleaf 개발 프로젝트를 하면서 정리한 내용입니다.

- SPA (Single Page Application) : 최초 한번 전체 페이지를  다 불러오고 응답데이터만 페이지 특정 부분 렌더링
- SSR (Server Side Rendering) : 전통적인 웹 요청방식
- 표현식 : 변수 $ , 선택 변수 * , 메시지 # , link url : @   {...}
- 조건 연산 : 삼항연산자 사용 if ? then : else
- default : value ?: defaultvalue
- src/main/resources/templates 경로에 작업
- html 작성 - VO 작성 - controller 작성 - html th태그로 서버자원 삽입
- 다양한 유틸리티
- 날짜 : #temporals, #dates, #calendars, 
- 그 외 : #strings, #numbers, #objects, #bools, #lists, #sets, #maps, # aggreates, #ids ....
- index : 0, count : 1 시작

@ 조건문 :  if, unless, switch, case
ex) <th:block th:if="${result.data} == 'Y''"></th:block>
<th:block th:unless="${result.data} == 'Y''"></th:block>

 

@ 공통 레이아웃 설정 시 필요한 fragment

<th:block th:replace="파일경로 :: 사용할Fragment"></th:block>

2가지 방법이 있다. 단, layout 보단 fragment로 사용하는 게 유지보수에 용이하다고 판단된다.

JSP 때 사용했던 Tiles 와 같은 기능이라고 봐도 무방하다.

1. <th:block layout:fragment=""></th:block>

→ maven 에 thymeleaf-layout-dialect 의존성 추가 후 사용가능

2. <th:block th:fragment=""></th:block>

 

@ contextPath 가져오는 방법

<link id="id" th:data-contextPath="${#httpServletRequest.getContextPath()}"/>

var context_path = $('#contextPathHolder').attr('data-contextPath') ? $('contextPathHolder').attr('data-contextPath') : '';

 

@ 스크립트 호출

1. <script th:src="|${#httpServletRequest.getContextPath()}/resource/...|"> </script>

2. inline 호출

<script th:inline="javascript">

    var user = /*[[ ${seesion.USER} ]]*/ null;

 </script>

@ 스크립트 변수 선언
/*<![CDATA[*/
      var result =/*[[${data}]]*/ null;  
/*]]*/

 

@ 그 외 정보

- detail과 같이 단일 object는 th:object 선언 후 th:value=" *{title} " 선택변수 사용
- 수정화면은 서버로 보내기 위해 th:object의 th:field로 처리
- textarea는 th:inline="text" 속성 추가 후 값은 태그사이 선언 ->[[*{content}]]