[Thymeleaf] 타임리프 자동 리로드 방법

회사에서 Thymeleaf를 사용하는데 React에 익숙한 나로썬 html 파일을 편집할 때마다 서버를 재시작하는 과정이 매우 불편했다.

게다가 재시작 후 로그인 시 그 정보를 DB에 남기고 이게 화면에 표시되도록 만들었기 때문에 내가 쌓은 데이터만 10페이지가 넘어갈 때 쯤.. 서버 재시작 없이 리로드 할 수 있는 방법이 있다고 해서 적용하게 되었다!

 

 

1. cache: false 설정

타임리프 같은 템플릿 엔진은 파싱 후 결과를 캐시에 저장하게 된다. 프로덕션에서는 성능 향상에 기여하지만 개발 단계에서는 매우 불편하므로 이를 꺼준다.

 

  thymeleaf:
    cache: false

 

 

2. build.gradle에 의존성을 추가한다.

spring-boot-devtools는 리로드를 포함한 개발에 편리한 다양한 기능을 제공한다.

developmentOnly 'org.springframework.boot:spring-boot-devtools'

 

3. 프로젝트 자동빌드 옵션을 체크한다.

 설정 (Ctrl + Alt + S) > 빌드, 실행, 배포 > 컴파일러로 들어가면 된다.

 

4. Auto-make 시작 허용

설정 > 고급 설정 > 컴파일러에서 개발된 애플리케이션이 현재 실행 중인 경우에도 auto-make가 시작되도록 허용을 체크한다.

 

5. 라이브 리로드 설정 추가

LiveReload 서버 (포트 35729) 에서 제공하는 자바스크립트 파일을 불러와 브라우저와 개발 서버 간에 통신을 유지하다가, 파일이 변경되었다는 신호를 받으면 페이지를 리로딩 한다.

<script th:if="${@environment.acceptsProfiles('local')}" src="http://localhost:35729/livereload.js"></script>