설정 인텔리제이에서 브라우저 화면 갱신 처리 방법

[주인장]

방법 1. 대체 웹 확장 프로그램 사용 (가장 간단)

공식 extension이 동작하지 않는 경우, 웹 스토어의 타사 확장 프로그램이나 대체 도구를 활용할 수 있습니다.

1. 대체 확장 프로그램 설치

   • 크롬 웹 스토어에서 LiveReload++ 또는 Live Server Web Extension 등을 검색하여 설치합니다.

2. 동작 원리

   • Spring Boot 앱을 실행하면 백그라운드에서 35729 포트로 LiveReload 서버가 뜹니다.

   • 크롬에서 해당 확장 프로그램 아이콘을 클릭해 활성화(On)하면 내장 LiveReload 서버와 연결되어 자동 갱신이 진행됩니다.

방법 2. HTML 내부에 스크립트 직접 삽입 (확장 프로그램 미사용)

브라우저 확장 프로그램을 전혀 쓰지 않고, 개발 환경(DevTools)일 때만 LiveReload 스크립트가 실행되도록 HTML에 넣어주는 방법입니다.

• Thymeleaf 등 템플릿 엔진을 사용하는 경우

  HTML 파일 하단(</body> 직전)에 아래 스크립트를 추가합니다.

  HTML

  <!-- LiveReload 스크립트 (DevTools 포트 35729 연결) -->

  <script src="http://localhost:35729/livereload.js?mindelay=10"></script>

  (참고: spring-boot-devtools가 실행 중일 때만 작동하며, 운영 환경 배포 시에는 스크립트 경로가 닿지 않거나 제거해 주시면 됩니다.)

방법 3. 인텔리제이 자체 Built-in Preview 기능 활용 (추천)

IntelliJ IDEA Ultimate 버전을 사용 중이라면, 별도의 브라우저 대신 인텔리제이 내장 브라우저 및 Live Preview 기능을 사용하는 것이 가장 깔끔합니다.

1. HTML/HTML 템플릿 파일을 연 상태에서 편집기 우측 상단의 브라우저 아이콘 목록을 확인합니다.

2. Built-in Preview 아이콘을 클릭하여 인텔리제이 내부 패널로 화면을 띄웁니다.

3. 소스 코드를 수정하고 저장(Ctrl + S / Cmd + S)하면 내장 브라우저 화면이 즉시 갱신됩니다.

⚠️ 필수 확인: IntelliJ 자동 빌드(Auto-Build) 설정

어떤 방법을 사용하든 IntelliJ에서 파일 수정 시 클래스패스가 업데이트되어야 DevTools가 변경을 감지합니다. 아래 설정을 먼저 확인해 주세요.

1. Build project automatically 활성화

   • Settings (또는 Preferences) > Build, Execution, Deployment > Compiler

   • Build project automatically 체크

2. 앱 실행 중에도 자동 빌드 허용

   • Settings > Advanced Settings

   • Allow auto-make to start even if developed application is currently running 체크

3. 템플릿 캐시 비활성화 (application.properties)

   Properties

   # Thymeleaf 사용 시 캐시 끄기 (DevTools 사용 시 기본 적용되나 명시 가능)
   spring.thymeleaf.cache=false