SpringBoot | HTML, CSS, JS 변경 시 실시간 반영 방법

 

스프링 부트 프로젝트 안에서 타임리프로 프론트 개발을 진행 했었는데 html, css, js 변경시 일일이 재빌드 해주는 것이 불편하여 수정이 발생하면 자동으로 리로드 되며 새로고침 되는 기능. OS 는 MAC 이며 ide 는 인텔리제이 기준.

 

1) dependencies 추가

build.gradle

dependencies {
  implementation 'org.springframework.boot:spring-boot-devtools'
}

 

2) Run/Debug Configurations 에서 설정 편집

2-1) 상단에 Application 에서 Edit Configurations 를 클릭하여 “Run/Debug Configurations” 설정 창을 띄웁니다.

2-2) 좌측에서 Spring Boot - Application 선택

2-3) Build and run 항목에서 Modify options 클릭하여 아래 옵션들을 추가

2-4) On ‘Update’ action: Update classed and resources 추가

2-5) On frame deactivation: Update classes and resources 추가

 

3) Preferences - Build, Execution, Deployment - Compiler 설정

Build project automatically 체크

 

4) application.yml 설정

application.yml

spring:
  devtools:
    livereload:
      enabled: true
    thymeleaf:
      cache: false
    restart:
      enabled: true

 

5) 크롬에서 확장프로그램 설치

5-1) LiveReload 를 설치합니다.

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

5-2) 상단에 고정시킨 후 해당 아이콘을 클릭하여 LiveReload 기능을 활성화합니다.

💡 가운데 원이 연한 회색이면 OFF 상태이며, 진한 회색이면 ON 상태입니다.

만약 위 LiveReload 확장프로그램이 작동하지 않는다면, 아래 링크의 RemoteLiveReload 를 대신 사용해보세요!
https://chrome.google.com/webstore/detail/remotelivereload/jlppknnillhjgiengoigajegdpieppei?hl=ko

 

 

이제 html, css, js 파일을 수정하고 나서 다시 브라우저의 포커싱이 활성화 되면 그 이후 약 4~5초 정도 후 새로고침 되면서 변경된 내용을 확인 가능 합니다.