타임리프
웹 및 스탠드얼론 환경 모두에서 사용할 수 있는 모던 자바 템플릿 엔진.
주로 웹 애플리케이션에서 HTML 뷰를 생성하는 데 사용되며, XML, JavaScript, CSS, 텍스트 등 다양한 형태의 뷰를 생성하는데에도 사용할 수 있다
타임리프의 주요 특징
네추럴 템플릿
: 타임리프의 가장 큰 특징 중 하나. HTML 파일이 브라우저에서 그대로 보여질 수 있도록 지원하는 것이다
HTML 파일을 그대로 사용하기 때문에 서버에 배포하지 않고도 화면을 즉시 확인해볼 수 있어서 화면 디자인 및 테스트에 용이하다
스프링 MVC와의 완벽한 통합
:스프링 MVC 애플리케이션에서 뷰 레이어로 흔히 사용되며, 스프링 시큐리티, 스프링 데이터 등과 같은 스프링의 다양한 모듈과도 잘 작동한다. 그 이유는 타임리프는 JSP와 달리 별도의 추가 설정없이 의존성만 추가하면 되기 때문
표현식 지원
: 변수 표현식, 선택 변수 표현식, 메시지 표현식, 링크 URL 표현식 등 다양한 표현식을 지원하여 템플릿에서 동적인 데이터를 쉽게 처리할 수 있다
보안
: 타임리프는 XSS(Cross Site Scription) 공격을 방지하기 위해 기본적으로 텍스트를 이스케이프 처리합니다. 이를 통해 보다 안전환 웹 애플리케이션을 개발할 수 있다
타임리프의 장점
유지보수성
: 타임리프의 자연 템플릿 덕분에 HTML 파일을 그대로 유지하면서 동적인 부분만 추가할 수 있다. 이는 유지보수시 HTML 구조를 파악하기 쉽고, 디자인 변경이 필요할 때도 편리하다
높은 가독성
: 타임리프의 문법은 HTML 태그 안에 자연스럽게 들어가므로, 동적인 부분이 어디에 위치하는지 쉽게 파악할 수 있다
높은 호환성
: 순수한 HTML 파일로 작업하기 때문에, 스프링 뿐만이 아닌 다른 웹 기술이나 라이브러리와 호환성이 매우 높다
사용예시
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Example</title>
</head>
<body>
<h1 th:text="${message}">Welcome to our site!</h1>
</body>
</html>
위 예시는 th:text 속성을 사용해서 모델로부터 전달받은 message 변수의 값을 <h1> 태그의 내용으로 동적으로 변경하게 하는 예시다
타임리프의 주요 기능
1. 프래그먼트 교체 및 타입
th:fragment
th:fragment 속성을 사용하여 HTML 코드 조각(프래그먼트)을 정의하고, 이를 다른 템플릿이나 템플릿의 다른 위치에서 재사용할 수 있다
프래그먼트를 정의할때 해당 HTML 요소에 th:fragment 속성을 추가하고 이름을 지정하면 된다
<div th:fragment="exampleFragment">
<!-- 재사용하고자 하는 코드 -->
<p>이것은 프래그먼트 예제입니다.</p>
</div>
여기서 fragment의 이름은 exampleFragment 이다
th:replace
th:replace는 현재 태의 내용을 지정된 프래그먼트로 완전히 대체한다. 이를 사용하면, 현재 태그는 지정된 프래그먼트의 내용으로 교체되고, 원래의 태그는 사라진다. 웹페이지에서 공통으로 사용되는 영역에 주로 사용한다
<div th:replace="~{파일경로 :: 조각이름}"></div><div th:replace="fragments/header :: headerFragment"></div>
th:insert
지정된 프래그먼트의 내용을 현재 태그 안에 포함시킨다. 태그의 내용을 유지하면서 추가적인 내용을 포함시킬 때 유용하다.
<div th:insert="~{파일이름 :: 조각이름}"></div>
2. 기본 명령어
th:text
HTML 태그 없이 요소의 텍스트 내용을 동적으로 설정
(비슷한 태그인 th:utext도 있는데 이건 HTML 코드를 포함한 텍스트를 출력한다)
<p th:text="${message}">기본 메시지</p>
th:each
반복문을 처리하여 컬렉션의 각 아이템에 대해 HTML 요소를 반복 생성한다
<ul>
<li th:each="item : ${items}" th:text="${item.name}">항목 이름</li>
</ul>
th:if, th:unless
조건에 따라 HTML 요소를 포함하거나 제외한다
<div th:if="${condition}">조건이 참일 때 보여줄 내용</div>
<div th:unless="${condition}">조건이 거짓일 때 보여줄 내용</div>
th:attr
HTML 요소의 속성을 동적으로 설정한다
<a th:href="@{/login}" th:attr="title=${loginTitle}">로그인</a>
th:switch, th:case
여러 조건 중 하나를 선택하여 출력한다
<div th:switch="${user.role}">
<p th:case="'admin'">관리자입니다.</p>
<p th:case="'user'">사용자입니다.</p>
<p th:case="*">알 수 없는 역할입니다.</p>
</div>
3. 기타
th:object
모델 객체에 대한 참조를 설정하는데 사용되는 속성이다. form 데이터를 바인딩하거나, 특정 객체의 데이터를 템플릿 내에서 접근하기 위해서 사용한다.
웹 애플리케이션에서 사용자 입력을 받기 위한 폼을 처리할 때, th:object를 사용하면 폼을 통해 받은 데이터를 객체에 직접 매핑하여 서버로 전송할 수 있다
폼과 객체 바인딩 예시
<form action="#" th:action="@{/submitForm}" th:object="${formObject}" method="post">
<input type="text" th:field="*{username}" />
<input type="password" th:field="*{password}" />
<input type="submit" value="Submit" />
</form>
예시에서 th:object="${formObject}" 는 formObject 라는 이름의 모델 객체를 현재 폼의 컨텍스트 객체로 설정한다.
그리고 th:field="*{username}", th:field="*{password}" 와 같이 *{...} 표현식을 사용하여 객체의 속성 (username, password) 에 접근하고, 이를 입력필드와 바인딩한다
객체 데이터 표시 예시
<div th:object="${userInfo}">
<p>Name: <span th:text="*{name}">Name</span></p>
<p>Email: <span th:text="*{email}">Email</span></p>
</div>
이 예시에서는 userInfo 객체를 th:object 를 통해 지정하고, *{name}, *{email} 을 통해 userInfo 객체의 name, email 속성 값을 표시한다
'Web' 카테고리의 다른 글
| JSTL(JSP Standard Tag Library) (0) | 2024.02.21 |
|---|---|
| EL(Expression Language) (0) | 2024.02.19 |
| 프로젝트에서 톰캣설정 (0) | 2024.01.26 |
| JDBC 프로젝트 개발순서 (0) | 2024.01.26 |
| Web_Servlet (0) | 2024.01.15 |
