🤔Problem

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구인 Vite를 사용하는데 변경사항이 바로바로 반영이 안되고 캐시를 지워야만 반영되는 문제에 맞닥뜨렸다.

🧐Try to solve

1. 처음에는 그냥 캐시문제인가 하고 캐시를 지웠더니 변경사항이 반영됐다. → 그러나 다시 다른 곳 고치고 저장하면 반영이 안되었다.
2. 평소에는 잘되었는데 뭐가 그 전 프로젝트와 다를까? 라고 고민해보던 와중에 이번 프로젝트에서는 PWA를 도입했다는 사실을 떠올렸다. → 바로 구글링을 해보았고 PWA관련 코드를 주석화하였다.

🧙🏻Result

PWA관련 코드를 주석화하니 바로바로 변경사항이 적용되었고 개발환경에서는 계속 주석화한 상태로 진행하기로 했다.

그리고 이후 배포환경에서 주석을 풀고 진행할 예정이다,.

💡Learned

PWA 플러그인은 서비스 워커를 사용하여 오프라인 기능을 제공하며, 캐싱 전략을 관리한다. 이때, HMR과 충돌이 발생할 수 있다. 특히 서비스 워커가 이전 버전의 파일을 캐싱하고 있을 경우, 변경 사항이 즉시 반영되지 않을 수 있다.

→ 즉 PWA 플러그인(VitePWA)과 HMR의 상호작용이 문제의 핵심 포인트였다.