수유산장

SpringBoot + Thymeleaf 로 작업 시 

html 변경이 바로 적용되지 않는 문제가 있다.

html 부분이나 스크립트 부분이나 고치면서 계속 확인 해야 하는 작업이 필요한 경우 

재실행하는거는 여간 귀찮은 일이 아니다.

applicatoin.properties에 아래와 같이 설정을 하면 바로 변경된 html을 확인 할 수 있다.

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=file:src/main/resources/templates/

인텔리제이 Community 버전도 잘 된다.

Thymeleaf 적용한 프로젝트에서 title 부분을 전체 똑같이 적용해 달라는 요청이 있었다.

Thymeleaf Layout 이 적용된 상태에서

layout.html 

의 <title> 부분이 없는 상태였고

각 페이지에서 <title> 값을 설정한 상태였다.

layout.html 에 <title>LAYOUT</title> 을 추가해도

각 페이지의 <title> 이 layout.html 의 title을 대체하게 된다.

layout:title-pattern 속성을 이용하면 전체 페이지의 title을 패턴화 할수 있다.

lauout.html 에 아래 태그를 추가하면

<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">MY SITE</title>

$LAYOUT_TITLE - 레이아웃의 타이틀 (구버전 : $DECORATOR_TITLE 는 deprecated 됨)

$CONTENT_TITLE - 각 페이지의 타이틀

실제 각 페이지에서는

<title>MY SITE - 각페이지 타이틀</title> 과 같이 된다.

해당 요청 사항은

<title layout:title-pattern="$LAYOUT_TITLE">MY SITE</title>

로 해결했다.

참고 : title-pattern - Thymeleaf Layout Dialect (ultraq.github.io)

이번 프로젝트에서 뷰단을 스프링부트의 기본 템플릿 엔진인 thymeleaf을 사용하게 되었다.

처음에는 조금 어색하였지만 사용하다 보니

jsp보다 오히려 더 편한거 같다.

thymeleaf에서 model로 내려온 변수를 자바스크립를 사용하는 방법을 보면 다음과 같다.

1. script 영역에서 사용시 CDATA 블럭으로 묶어서 ${모델변수}를 이용

controller에서 

model.addAttribute("result", "성공하였습니다.");

로 뷰단으로 result를 내린 경우

<script th:inline="javascript">

    /*<![CDATA[*/

var result = /*[[ ${result} ]]*/;

/*]]*/

    $(document).ready(function(){

alert(result);

    });

</script>

CDATA로 묶어서 사용

2. 태그내에 onclick이벤트 등 함수에 파람값 설정시

<button th:attr="onclick=|pageMove('${nowPage}', '${pageSize}')|">

th:attr 사용