1. Thymeleaf
- Template Engine 이며, Web Service 만들때 Server의 Data와 정적자원(HTML, CSS, Image)를 조합 해줌
- Server에서 Data를 보내 Web Service를 만드는 방법에 2가지가 있으며 SPA(Single Page Application) 모던 Web의 패러다임을 이용함
- 최초 한번 전체 페이지를 다 불러오고 응답 데이터만 페이지 특정 부분 Rendering 되며, SSR(Server Side Rendering) 방식으로 페이지를 보여줌
- Traditional Web Application Method.
- 요청시 마다 Server에서 처리한 후, Reload로 Page에 대한 응답을 해줌
- JAVA에서 Web 개발시 JSP(Java Server Page)를 이용하여 진행하는데, JSP를 사용하면
<% %> Type의 Script를 사용하여 개발되며, Script와 HTML Tag의 반복적인 사용으로 인하여 수정하기 어려운 상황이 되기도 하는데, 이때 해결을 위해 탄생한 템플릿 엔진이 -> Thymeleaf 임
// Thymeleaf Dependency => Gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
// html file => Thymeleaf Template
<html lang="ko" xmlns:th="<http://www.thymeleaf.org>">
2. Thymeleaf - 용어정리
- xmlns:th
- Thymeleaf의 th 속성을 사용하기 위해 선언된 네임 스페이스임
- 순수 HTML로만 이뤄진 페이지의 경우, 선언하지 않아도 무관함
- th:text
- JSP의 EL 표현식인 ${ } 와 마찬가지로 Thymeleaf도 ${ } 표현식을 사용해 Controller에서 전달받은 Data에 접근 할 수 있음
- 해당 속성은 일반적인 Text Type으로 View에 출력함
- th:fragment
- <head> Tag에 해당 속성을 사용해서 fragment의 이름을 지정함
- fragment는 다른 HTML에서 replace속성을 사용해서 적용할 수 있음
- th:block
- layout:fragment 속성에 이름을 지정해서 실제 Content page의 내용을 채우는 기능임
- 해당 기능은 **Dynamic(동적)**인 처리가 필요할 때 사용됨
- th:replace
- JSP의 <include> tag와 유사한 속성임
- th:fragment를 통해 설정한 이름을 찾아 해당 코드로 치환함
- th:href
- <a> Tag의 href 속성과 동일함
- Web Application을 구분하는 Context Path를 포함함
- xmlns:layout, xmlnslayout:decorator
- xmlns:layout : Thymeleaf의 layout 기능을 사용하기 위한 선언임
- xmlnslayout:decorator : Decorator layout으로 basic.html을 사용하겠다는 의미임
- th:block layout:fragment
- layout:fragment 속성에 이름을 지정해서 실제 Content page의 내용을 채움
- page마다 title을 다르게 처리하고 싶을 때 해당 속성을 이용해서 Title을 **Dynamic(동적)**으로 처리할 수 있음
- th:action
- <form> tag 사용시 해당 경로로 요청을 보낼때 사용함
- th:object
- <form> tag에서 submit을 할때 Data가 th:object에 설정해둔 Object로 받아준다는 의미
- Controller와 View사이의 DTO Class의 Object임
- th:field
- th:object속성을 이용하면, th:field를 이용해서 HTML tag에 Member Variable를 Mapping할 수 있음
- th:field를 이용한 User 입력 필드(input, textarea등)는 id, name, value 속성 값이 자동으로 Mapping됨
- 각 속성을 따로 지정할 필요가 없음
- th:field는 **${ }**표현식이 아닌, *{ } 표현식을 사용함
- th:object와 th:filed는 Controller에서 특정 Class의 Object를 전달 받은 경우에만 사용 가능함