Tech/템플릿 엔진
타임리프 사용법
kimjingyu
2023. 2. 9. 15:44
728x90
핵심
- 순수 HTML을 그대로 유지하면서 View Template 도 사용할 수 있는 Thymeleaf의 특징을 Natural Template 이라 한다.
- th: ~~~ 가 붙은 부분은 서버사이드에서 렌더링되고, 기존의 것을 대체한다.
- 이 부분이 없으면 기존 html의 ~~~ 속성이 그대로 사용된다.
- HTML을 파일로 직접 열었을 때, th: ~~~ 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.
- 즉, 정적 HTML 리소스 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.
사용 선언
- <html xmlns:th="http://www.thymeleaf.org">
변수 표현식 - ${ ... }
- <td th:text="${item.price}">10000</td>
- 모델(Model)에 포함된 값이나, 타임리프 변수로 선언한 값(itemId=${item.id})을 조회할 수 있다.
- Property 접근법을 사용한다. ( item.getPrice() )
URL 링크 표현식 - @{ ... }
- no.1
- th:href="@{/css/bootstrap.min.css}"
- @{ ... } : 타임리프는 URL 링크를 사용하는 경우 @{ ... } 를 사용한다. 이것을 URL 링크 표현식이라고 한다.
- URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.
- no.2
- th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
- 상품 ID를 선택하는 링크
- 경로를 템플릿처럼 편리하게 사용할 수 있다.
- 경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.
- th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
- 생성 링크 : http://localhost:8080/basic/items/1?query=test
URL 링크 간단히
- th:href="@{|/basic/items/${item.id}|}"
- 리터럴 대체 문법을 활용해서 간단히 사용할 수 있다.
속성 변경 - th:href
- th:href="@{/css/bootstrap.min.css}"
- HTML 을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href로 대체되면서 동적으로 변경할 수 있다.
속성 변경 - th:onclick
- 정적 HTML -> onclick="location.href='addForm.html'"
- 뷰 템플릿 -> th:onclick="|location.href='@{/basic/item/add}'|"
리터럴 대체 - | ... |
- 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다. 이때, 리터럴 대체 문법을 사용하면 더하기 없이 편리하게 사용할 수 있다.
반복 출력 - th:each
- <tr th:each="item : ${items}">
- 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
- 컬렉션의 수 만큼 <tr> ... </tr> 이 하위 테그를 포함해서 생성된다.
내용 변경 - th:text
- <td th:text="${item.price}">1000</td>
- 내용의 값을 th:text의 값으로 변경한다.
- th:object="${modelName}"
- <form>에서 사용할 객체를 지정한다.
- 선택 변수 식 ( *{ ... } ) 을 적용할 수 있다.
- th:field="*{variableName}"
- th:field 는 id, name, value 속성을 모두 자동으로 만들어준다.
Spring Security 태그 사용 (로그인/로그아웃 화면 연동하기)
- 네비게이션 바에서 로그인 상태라면 '로그아웃' 이라는 메뉴가 나타나야 로그인 된 상태임을 알 수 있게한다.
- 다른 아이디로 로그인하려면 현재 계정으로부터 로그아웃하고, 다시 로그인 해야 한다.
- 상품 등록 메뉴의 경우, 관리자만 상품을 등록할 수 있도록 노출돼야 한다.
라이브러리 설정 (gradle)
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'선언
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">활용
<li class="nav-item" sec:authorize="hasAnyAuthority('ROLE_ADMIN')">
<a class="nav-link" href="/admin/item/new">상품 등록</a>
</li>
<li class="nav-item" sec:authorize="hasAnyAuthority('ROLE_ADMIN')">
<a class="nav-link" href="/admin/items">상품 관리</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cart">장바구니</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/orders">구매이력</a>
</li>
<li class="nav-item" sec:authorize="isAnonymous()">
<a class="nav-link" href="/members/login">로그인</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/members/logout">로그아웃</a>
</li>Thymeleaf 페이지 레이아웃
- Thymeleaf Layout Dialect를 이용하면 하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있다.
- Thymeleaf의 페이지 레이아웃 가능을 사용한다면 공통 요소 관리를 쉽게 할 수 있다.
라이브러리 설정 (gradle)
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.2.1'
728x90