[Spring Framework - Thymeleaf] Decoupled Logic

🌿Spring/Spring Framework

[Spring Framework - Thymeleaf] Decoupled Logic

Boom's 2024. 1. 21. 19:14

인터넷 강의를 수강하다가 Thymeleaf의 Decoupled Logic 에 궁금하여 알아보기 위해서 작성을 하려고 한다.

Decoupled logic이 무엇일까?

decoupled (분리된) logic은 thymeleaf의 기능 중 하나이다.
HTML와 XML 템플릿에 마크업과 로직이 들어간 부분을 분리시키는 기능
- 따라서 디자이너와 협업이 쉬워짐
주요 아이디어는 템플릿 로직이 별도의 로직 파일(파일일 필요는 없으므로 더 정확하게는 로직 resource에 해당)에 정의
기본적으로 이 로직 리소스는 템플릿 파일과 같은 위치(예: 폴더)에 있는 추가 파일로, 이름은 같지만 확장자가 .th.xml인 파일

/templates
+->/home.html
+->/home.th.xml

예제

예를 들어 home.html 파일은 완전히 로직이 없기 때문에 하단의 코드처럼 보일 수 있다.

<!DOCTYPE html>
<html>
  <body>
    <table id="usersTable">
      <tr>
        <td class="username">Jeremy Grapefruit</td>
        <td class="usertype">Normal User</td>
      </tr>
      <tr>
        <td class="username">Alice Watermelon</td>
        <td class="usertype">Administrator</td>
      </tr>
    </table>
  </body>
</html>

Thymeleaf 코드가 전혀 없으며, 이 템플릿 파일은 Thymeleaf & 템플릿에 대한 지식이 없는 디자이너가 생성, 편집 등 이해 할 수 없는 템플릿 파일이다.

<?xml version="1.0"?>
<thlogic>
  <attr sel="#usersTable" th:remove="all-but-first">
    <attr sel="/tr[0]" th:each="user : ${users}">
      <attr sel="td.username" th:text="${user.name}" />
      <attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />
    </attr>
  </attr>
</thlogic>

여기서는 논리 블록 안에 많은 <attr> 태그가 있는 것을 볼 수 있다.
이러한 <attr> 태그는 Thymeleaf 마크업 선택기(실제로는 AttoParser 마크업 선택기)가 포함된 sel 속성을 통해 선택된 원본 템플릿의 노드에 속성 주입을 수행함
<attr> 태그는 중첩되어 선택기가 추가될 수 있다.
- 예를 들어 위의 sel="/tr[0]"은 sel="#usersTable/tr[0]"로 처리된다.
- 그리고 사용자 이름 <td>에 대한 선택기는 sel="#usersTable/tr[0]//td.username"으로 처리된다.

Spring에서 thymeleaf의 사용하기 위한 사전작업

코드를 작성하기 전에 application.yaml에 옵션을 추가해줘야 한다.

thymeleaf3:
	decoupled-locig: true

build.gradle에서 디펜던시에 spring configuration prosser를 추가해야 한다.
- thymeleaf3와 IDE를 더 매끄럽게 연동하는 방법

annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'

Spring에서 thymeleaf의 사용하기 위한 공통 Config 파일

스프링 부트 프로퍼티에서 설정 할 수 있도록 제공되지 않았기 때문에 세팅을 따로 진행
ThymeleafConfig 라는 Config 클래스를 생성 해줘야 한다.

@Configuration
public class ThymeleafConfig {

    @Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver(
            SpringResourceTemplateResolver defaultTemplateResolver,
            Thymeleaf3Properties thymeleaf3Properties
    ) {
        defaultTemplateResolver.setUseDecoupledLogic(thymeleaf3Properties.isDecoupledLogic());

        return defaultTemplateResolver;
    }


    @RequiredArgsConstructor
    @Getter
    @ConstructorBinding
    @ConfigurationProperties("spring.thymeleaf3")
    public static class Thymeleaf3Properties {
        /**
         * Use Thymeleaf 3 Decoupled Logic
         */
        private final boolean decoupledLogic;
    }

}

위 config 파일까지 생성 하게 되면 기존의 HTML에서 decoupled logic으로 하여 분리해봐야한다.
resource > templates > articles에서 index.html 파일에 동일한 이름으로 index.th.xml 파일을 생성

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thyemleaf.org">
<head>
    <title>게시판 페이지</title>
</head>

<body>

<header id="header"></header>

<main class="container">
  
</main>

<footer id="footer"></footer>

</body>
</html>

위에 index.html에 header 및 footer로 로직을 분리해줘야 한다.

<?xml version="1.0"?>
<thlogic>
    <attr sel="#header" th:replace="header :: header"/>
    <attr sel="#footer" th:replace="footer :: footer"/>
</thlogic>

그렇게 동일한 name을 가진 index.th.xml 파일에 html 파일에서 분리 된 header와 footer를 attr 구문으로 해서 값을 넣어준다.
분리된 header 구문을 클릭 하게 되면, 공통으로 사용 할 수 있도록 작성한 header.html 파일로 이동하게 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header class="p-3 bg-dark text-white">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a id="home" href="#" class="nav-link px-2 text-secondary">Home</a></li>
            </ul>

            <div class="text-end">
                <a role="button" class="btn btn-outline-light me-2">Login</a>
                <a role="button" class="btn btn-warning">Sign-up</a>
            </div>
        </div>
    </div>
</header>
</body>
</html>

위의 이미지 처럼 여러 곳에서 사용 할 수 있도록 클래스 관리가 된다.

https://github.com/94-c/project-board/commit/1d3bcb50dcecea63f2220fcbf004fdf66110f22e