본문 바로가기
개발/스프링 FIreBase Neo4j

webflux Thymeleaf3.1 template, Layout 변경된 부분 마이그레이션 (feat LiveReload++)

by 꿈트리꿈트리 2023. 1. 23.

Thymeleaf 3.1

스프링 6.0을 지원하게 되었다. webflux 초기에 한번 사용해 보았는데 sec태그가 잘 작동하지 않아서 난감했던 기억이 있는데 이제 그런 건 없을 거라 기대한다.

현재 스프링 부트 3.0대의 버전을 사용중인데 스프링은 6점대인지라 3.1을 사용하면 될 거 같다.

전에는 Thymeleaf Page Layouts 를 같이 사용해서 공통으로 묶이는 부분을 또 템플릿 해서 사용했는데 아마 이것도 잘 작동하겠지?

spring initialzr에서 thymeleaf를 선택하면 현재 버전에선 thymeleaf와 thymeleaf-security까지 같이 종속성이 추가돼서 예전처럼  thymeleaf-security를 추가해 주지 않아도 sec 태그를 쓸 수 있습니다.

thymeleaf-layout은 추가를 해줘야 하는 거 같은데 종속성을 추가해 줘도 제대로 작동이 되지 않네요.

 

LiveReload

ide.windowSystem.autoShowProcessPopup

thymeleaf layout 설정 중에 테스트하려고 화면을 매번 새로고치는것이 불편하여 LiveReload 기능을 활성화하려고 해 보았으나 기존 방법으로 되지가 았았다. 찾아보니 기존에는 크롬에

liveRelaod

liveRelaod를 설치하여 사용했었는데

확장 프로그램 더 보기를 눌러보면

LiveReload++

LiveReload++ 가 나오게 되고 저 같은 경우 플러스 모델을 설치 하여 사용하면 잘 작동이 되었습니다.

설치 후 크롬에 고정해 주고 클릭하면 활성화가 되어 잘 작동되네요

template의 html파일들을 변경해 주면 저장을 하면 작동이 되고 변경 후 바로 적용되게 설정할 수도 있습니다.

 

그러고 나서 다시 thymeleaf layout 설정을 다시 세팅하러 갑니다.

 

hotswap

Hot Swap 옵션

개발 설정을 하면서 클래스 파일이 변경되었을 때 서버가 다시 재 시작은 잘 되나 재시작으로 로그인이 풀려버리고 하는 문제들이 발생해 Hot Swap을 알아보았다.

예전에는 JRevel이라는 유료 플러그인을 무료로 쓸 수 있는 이벤트가 있어 사용했었는데 상당히 만족스러웠다 근데 유료가격이 너무 비싸서 재시작만 하거나 했는데 빌드 및 실행 옵션에 핫스왑 기능이 있고 Intellij에도 기능이 있긴 하나 잘 작동이 되지 않았다.

 

Thymeleaf3.1Layout Spring 변경된 점

스프링 4,5 시절 mvc에서 타임리프 레이아웃을 잘 사용하였다. 템플레이트 엔진에 자주 쓰는 레이아웃을 만들어서 공통적인 배치를 적용해 사용했는데 요번에 새로운 버전을 받으니 작동이 되지 않는 것이었다.

내가 공홈에 가서 열심히 살펴보아도 크게 어떻게 하라는 내용을 보지 못했는데. 구글링을 하다 보니 발견된 내용이 보였다 이 사람은 어디서 보고 적용한 건지 궁금해하다 찾아보니 마이그레이션 쪽에서 봐야 나오는 것이었다. 그렇다 이제는 마이그레이션도 눈여겨봐야 하는 것이다. ㅠㅠ 버전 올라갈 때마다 새로운 기술 배울 때마다 볼 문서가 너무 많다 그래도 어쩔 수 없지 받아들여야지 암튼 전에 사용하던 코드와 비교해 내 경우엔 두 가지 정도를 해결해 주었다.

  • @Bean
    public LayoutDialect layoutDialect() {
      return new LayoutDialect();
    }
  • decorator processor renamed to decorate
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:lang="${#locale.language}"
      layout:decorate="layout"
>
<head>
    <meta charset="UTF-8">

    <title>Home Page</title>

</head>

<body>

<div layout:fragment="content">
    <div sec:authorize="isAuthenticated()" sec:authentication="name"></div>
    decorator -> decorate로 된다 돼
</div>

</body>
</html>

 

버전 변경 되면서 자동등록되던 게 안되어 빈으로 등록해 주고

decorator가 decorate로 변경된 것이다

마이그래이션 문서를 2.0 , 3.0 다 봐야 알 수 있는 내용들이었다 ㅠㅠ

그리고 컨트롤 단에서 @RestController를 사용해 주었는데 이러면 리턴에 텍스트를 요청한 곳으로 던져 주어 템플릿 페이지로 가지 않아 @Controller를 사용하고 데이터면 넘겨주고 싶으면 메서드에 @ResponseBody로 바디에 메시지를 던져 주면 됩니다.

아무튼 빈등록과 decorator를 decorate로 변경해 주니 원하는 대로 작동이 되었다 타임리프는 여기서 끝.

 

여기까지 하고 이제 다시 핫스왑 문제로 돌아 가려한다. 클래스 소스 수정할 때마다 권한이 있는 부분은 다시 로그인하고 테스트하고 이럴 순 없기에 테스트 코드를 짜도 되겠지만 그것도 일이라 간단한 건 그냥 눈으로 보고 확인하려 하지만 자꾸 재로그인 재시작하면 번거로우니 JREBEL을 쓰고 싶지만 비용이 너무 비싸고 무료 버전을 알아보려 한다.