Thymleaf
Thymeleaf는 웹뿐만 아니라 다른 환경을 위한 최신의 서버-사이드 자바 Template Engine이며, HTML, CSS, XM, JS 및 Text까지 수용(이는 다른 템플릿 엔진과 동일)한다.
타임리프의 주 목표는 유지관리가 쉬운 템플릿 생성 방법을 제공하는 것이며, 실제로 템플릿에 영향을 주지 않는(HTML의 구조를 깨지 않는, 기존 HTML 코드를 변경하지 않고 덧붙이는 코드) 방식을 사용한다. 즉, Natural Templates 개념을 기반으로 한다. 이를 통해 디자인 팀과 개발 팀간 갈등, 격차 해소가 기대된다.
짧게 요약하면,
클라이언트가 동적으로 그리는 방식이 아니라 서버가 html 그려서 내려주는 방식
서버에서(유저마다 달라질 수 있는 동적) 데이터들을 구해서 미리 정의된 템플릿에 넣는다
서버에서 직접 html을 그려서 클라이언트(브라우저)에게 전달
th : 라는 문법으로 보통 html에 값을 주입하기 때문에 직관적이며 진입장벽이 낮음
html 작성하기 때문에 서버를 띄울필요 없음, 브라우저에서 바로 확인가능
Spring WebMVC와 통합이 비교적 쉽고 spring-boot-starter-thymeleaf를 따로 만들어 두었을 정도로 호환성이 좋음
Spring Security 결과물 바로 확인가능
springboot 환경, html 파일에 아래의 코드를 각각 추가해주어야 한다
dependency
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'html
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
문법
xmlns:th
- 타임리프의 th속성을 사용하기 위해 선언된 네임스페이스이다.
- 순수 HTML로만 이루어진 페이지의 경우, 선언하지 않아도 무관하다.
th:text
- JSP의 EL 표현식인 ${}와 마찬가지로 타임리프도 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다.
- 해당 속성은 일반적인 텍스트 형식으로 화면에 출력한다.
th:fragment
- <head>태그에 해당 속성을 사용해서 fragment의 이름을 지정한다.
- fragment는 다른 HTML에서 include 또는 replace 속성을 사용해서 적용할 수 있다.
th:block
- layoutL:fragment 속성에 이름을 지정해서 실제 Content 페이지의 내용을 채우는 기능이다.
- 해당 기능은 동적(Dynamic)인 처리가 필요할 때 사용된다.
th:replace
- JSP의 <include> 태그와 유사한 속성이다.
- th:fragment을 통해 설정한 이름을 찾아 해당 코드로 치환한다.
th:href
- <a> 태그의 href 속성과 동일하다.
- 웹 애플리케이션을 구분하는 콘텍스트 경로(Context Path)를 포함한다.
xmlns:layout, xmlnslayout:decorator
- xmlns:layout은 타임리프의 레이아웃 기능을 사용하기 위한 선언이다.
- xmlnslayout:decorator 레이아웃으로 basic.html을 사용하겠다는 의미이다.
th: with
- 변수값 지정
th:fragment="".
<body>
<footer th:fragment="footerFragment">
<p>안녕하세요</p>
</footer>
</body>- 웹페이지에 메뉴 탭이나 네비게이션바와 같이 공통으로 반복되는 영역이 존재한다. 이 공통의 역영들을 매 페이지마다 HTML코드를 반복해서 쓰면 굉장히 지저분 해지는데 fragment가 바로 공통 영역을 정의하여 코드를 정리해준다.
- 특히, header와 footer에 삽입하여 조각화 한다. 이렇게 만들어진 조각을 삽입하고자 하는 대상 HTML 파일에서 th:replace"[파일경로 :: 조각 이름]"을 통해 삽입한다.
아래는 Form과 관련된 Thymeleaf 문법들이다
서버가 뷰로 전달되는 제일 중요한 동작을 실행하는 부분이다
" " 앞에 들어가는 기호도 다르니 대표적인 예시를 하나 보고 이해해보자
<body>
<form th:action="@{/join}" th:object="${joinForm}" method="post">
<input type="text" id="userId" th:field="*{userId}" >
<input type="password" id="userPw" th:field="*{userPw}" >
</form>
</body>
th:action="@{}"
- <form> 태그 사용시, 해당 경로로 요청을 보낼 때 사용한다.
th:object="${}"
- <form> 태그에서 데이터를 보내기 위해 Submit을 할 때 데이터가 th:object 속성을 통해 object에 지정한 객체에 값을 담아 넘긴다. 이때 값을 th:field속성과 함꼐 사용하여 넘긴다.
- Controller와 View 사이의 DTO클래스 객체라고 생각하면 된다.
th:field="*{}"
- th:object속성과 함께 th:field를 이용해서 HTML 태그에 멤버 변수를 매핑할 수 있다.
- th:field을 이용한 사용자 입력 필드는 id, name, value 속성 값이 자동으로 매핑된다.
- th:object와 th:field는 Controller에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능하다.
mapping과 연관된 예시를 보자
GetMapping해줄 때 model에 담은 값들을 해당 URL로 리턴해준다
그럼 model에 담긴 데이터를 html의 th: each, text, value 등이 받아준다
이게 서버사이드 template engine의 매력..인 것 같다
간단하게 알아봤지만 실제로 구현하면서 많은 애를 먹었다.. 좀 더 다양하게 삽질을 아니 활용을 해봐야겠다
😭
References:
https://velog.io/@alicesykim95/Thymeleaf
'프로그래밍 > Spring' 카테고리의 다른 글
| ORM, Hibernate, JPA (0) | 2022.08.07 |
|---|---|
| AOP & Logging (slf4j) (0) | 2022.08.05 |
| [SPRING BOOT]JWT, Thymleaf, form (1/2) (2) | 2022.08.04 |
| [DI, IoC, Bean] 개념 박살내기 (0) | 2022.08.01 |
| Spring MVC Architecture (0) | 2022.07.27 |