[thymeleaf] layout decorate 조건 부여 - @{}, @{||}, 개발 공부하기

프로젝트 유지보수를 위한 리팩토링 작업 도중

하나의 페이지에서 사용자 권한에 따라

thymeleaf의 layout decorate의 경로가 조건에 따라 달라지도록 처리해야 했다.

처음엔 layout:decorate 작성하는 html 태그 부분을

th:block으로 감싸 th:if를 이용해 처리하려 했다.

<!-- 사용자 권한이 판매자 권한일 경우 '/seller/layout/default' 경로로 설정 -->
<th:block th:if="${session.STYPECODE == 'mem_type_02'
                    || session.STYPECODE == 'mem_type_03'
                    || session.STYPECODE == 'mem_type_04'}">
                    
    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="~{'/seller/layout/default'}">
    
</th:block>

<!-- 사용자 권한이 관리자 권한일 경우 '/admin/layout/default' 경로로 설정 -->
<th:block th:if="${(session.STYPECODE == 'mem_type_01')}">

    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="~{'/admin/layout/default'}">

</th:block>

그러나 이렇게 처리할 경우 500 에러가 뜬다.

java.lang.IllegalArgumentException: layout:decorate/data-layout-decorate must appear in the root element of your template

문제의 오류는 layout:decorate나 data-layout-decorate가 템플릿의 최상위 엘리먼트에 나타나야 한다는 것이다.

결국 해당 방법으로는 th:block 쪽을 제대로 읽지 못하는 것으로 추정

일단 html 태그에 있는 xmlns:th, xmlns:layout, layout:decorate 가 먼저 작성 되어 있어야 th:block이나 th:if도 읽을 수 있는 것인데 th:if가 읽히기 전에 이러한 선언부가 작성되지 않아서 안되는 것 일까?

두 번째 해결 방법으로 삼항 연산자를 이용해 작업해보기로 했다.

<html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="@{|${(session.STYPECODE == 'mem_type_02'
                              || session.STYPECODE == 'mem_type_03'
                              || session.STYPECODE == 'mem_type_04')? '/seller/layout/default'
                               :(session.STYPECODE == 'mem_type_01')? '/admin/layout/default':''}|}">

이런식으로 처리했더니 정상적으로 출력된다.

좀 더 알아보다보니

내가 사용한 @{| |} 표현식은 서버 내부에서 체크하지 않고

클라이언트로 직접 전달하는 표현식,

@{ } 로 작성할 경우 서버에서 조건을 평가 후 클라이언트로 전달하는 식이라는 것을 알았다.

서버의 로직에 따라 동적으로 레이아웃을 선택해야 할 때는 @{ }로 작성하는 것이 유용하고

이미 조건에 따른 문자열이 서버에서 생성되어 있고

클라이언트로 그대로 전달하려면 @{| |} 표현식이 유용할 것으로 보인다.

<!-- 예제 1 -->
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="@{${session.STYPECODE == 'mem_type_02'
                        or session.STYPECODE == 'mem_type_03'
                        or session.STYPECODE == 'mem_type_04'} ? '/seller/layout/default'
                       : ${session.STYPECODE == 'mem_type_01'} ? '/admin/layout/default' : ''}">

<!-- 예제 2 -->
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="@{|${session.STYPECODE == 'mem_type_02'
                         or session.STYPECODE == 'mem_type_03'
                         or session.STYPECODE == 'mem_type_04'} ?'/seller/layout/default'
                        : ${session.STYPECODE == 'mem_type_01'} ? '/admin/layout/default' : ''}|">

상황에 따라 예제1 혹은 예제2 형태로 작성이 가능하다는 것

나는 이미 컨트롤러에 경로가 정해져 있으니 예제 2번으로 선택해 작업했다.

+ 수정

예제 2번으로 했을 때 로컬 서버에서는 문제가 없으나

jenkins를 이용해 배포 했을 경우 정상적으로 연결되지 않았다....

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{|${(session.STYPECODE == 'mem_type_02'
                                || session.STYPECODE == 'mem_type_03'
                                || session.STYPECODE == 'mem_type_04')? 'seller/layout/default'
                                :(session.STYPECODE == 'mem_type_01')? 'admin/layout/default':''}|}">

~{ | | } 로 바꿔서 해결했다.

'개발 이야기 > Springboot' 카테고리의 다른 글

springboot - 스프링부트 교재 추천 << Do it! 점프 투 스프링부트3 >> 후기 / 서평 (2)	2023.12.29
[thymeleaf] th:if 조건 안에 배열의 길이 가져오기 / #arrays.length() (0)	2023.11.28
[thymeleaf] property or field name cannot be found on null 오류 (0)	2023.11.24

0_0

[thymeleaf] layout decorate 조건 부여 - @{}, @{||}

'개발 이야기 > Springboot' 카테고리의 다른 글

티스토리툴바

[thymeleaf] layout decorate 조건 부여 - @{}, @{||}

'개발 이야기 > Springboot' 카테고리의 다른 글

관련글

티스토리툴바