[Web] Webpack HMR과 풀 페이지 리로드 (+IE9 해결 방법)

1. 계기

이전 프로젝트 진행 시, IE9을 대응해야 했다. 그리고 이 프로젝트를 기반으로 브랜치를 따 새로운 프로젝트를 진행하게 되었는데, 이로 인해 기존 개발 환경을 그대로 유지하고 있었다.
이전에는 눈치채지 못했으나, 스타일을 수정할 일이 잦아지면서 자동으로 반영되지 않는 문제를 발견하게 되었다.
특히 저장할 때마다 페이지를 새로고침하지 않아도 바로 적용되던 HMR(Hot Module Replacement) 기능이 제대로 작동하지 않아 큰 불편함을 느꼈다.

개발에 직접적으로 WebSocketServer를 쓰는 것이 아니라서, 구현 상의 문제는 없으나, 스타일 수정이 잦아 개발 시의 불편함을 해결하고 싶었다.
(개발 시 자동 새로고침 이슈가 발생한다면 HMR 문제가 아닌지 확인하길 추천합니당.)

같은 보일러플레이트를 사용하는 다른 프로젝트들과 비교한 결과, IE 대응했던 부분만 차이가 있다는 것을 발견하게 되었다. 다양한 설정을 점검하는 과정에서 `webSocketServer: false` 설정이 문제가 된다는 것을 파악했고, 관련 내용을 정리하여 공유하고자 한다.

 

---

2. HMR과 풀 페이지 리로드 기본 개념

찾아본 결과, HMR이 꺼져있어 새로고침이 즉각적으로 반영되지 않았음을 알 수 있었다. 그래서 HMR 대신 IE9에서도 적용 가능한 다른 방법이 있을지 찾아보다가 풀 페이지 리로드에 대해서도 알게 되었다.

// vue.config.js
module.exports = {
  devServer: {
    hot: false,            // HMR 비활성화
    liveReload: true,      // 변경 사항 발생 시 자동 새로고침
    websocketServer: true, // 웹소켓 서버 활성화 (이게 false일 경우, 위의 두 가지 모두 적용 X)
  },
};

 

🔥HMR (Hot Module Replacement)

HMR은 수정된 모듈을 빠르게 교체하여 브라우저를 새로고침하지 않고도 업데이트할 수 있는 기능이다.
Webpack Dev Server를 사용하면 기본적으로 HMR이 활성화되어 있어서, 코드 수정 후 저장하면 자동으로 반영이 된다.

HMR은 WebSocket을 통해 서버와 브라우저가 실시간으로 통신하여 변경 사항을 반영한다. 따라서 브라우저가 WebSocket을 지원하지 않으면 HMR 자체가 동작하지 않는다. (!!)

🔄 풀 페이지 리로드 (Full Page Reload)

HMR과 달리, 파일이 수정되면 브라우저가 전체 페이지를 새로고침하는 방식이다. 상태가 초기화된다는 단점이 있지만, 모든 변경 사항이 반영된다는 점에서 HMR의 대안으로 사용할 수 있다.

풀 페이지 리로드는 기본적으로 liveReload: true 설정을 통해 활성화된다. 파일이 수정되면 서버에서 이를 감지하고 브라우저로 새로고침 명령을 전달한다. 하지만 liveReload도 WebSocket을 이용하여 명령을 전송하기 때문에, IE9에서는 동작하지 않았다.

IE9...

 

---

3. IE9에서 HMR과 풀 페이지 리로드가 안 되는 이유

🚫 WebSocket 미지원 문제

결과적으로 IE9는 WebSocket을 지원하지 않아, WebSocket 기반으로 동작하는 HMR과 풀 페이지 리로드가 모두 불가능하다. 이로 인해 IE9에서 HMR을 활성화하면 브라우저 콘솔에 WebSocket 연결 실패 에러가 발생하게 된다.

 

---

4. 현실적인 대안

💡 대안 1: 수동 새로고침

IE9에서는 자동 새로고침이 안 되므로, 변경 사항이 있을 때마다 수동으로 새로고침을 해야 한다.
(내가 IE9를 개발하며 진행했던 방식이다.😂)
비효율적이지만 WebSocket 미지원으로 인해 어쩔 수 없는 방안인 것 같다.

💡 대안 2: 간단한 새로고침 스크립트 사용

HMR을 대신할 수는 없지만, 주기적으로 페이지를 새로고침하는 간단한 스크립트를 추가하는 방법도 있다.

<script>
  setInterval(() => {
    location.reload();
  }, 3000); // 3초마다 새로고침
</script>

이 방법은 무작정 새로고침하는 단점이 있지만, 수동으로 새로고침하는 번거로움을 줄일 수 있다.
(변경사항이 잦을 때는 매크로마냥... 이렇게 새로고침 하는 방법도 있음을 알려드립니다...)

 

---

결론

결론!
IE9에서는 WebSocket 미지원으로 인해 HMR뿐 아니라 풀 페이지 리로드까지 정상적으로 동작하지 않는다.
그래서, IE를 대응하는 프로젝트에서는 IE9 이하를 테스트할 때는 WebSocketServer를 비활성화해, 에러를 방지하고, 그 이상알 때만 활성화하여 개발의 편의성을 주었다.

결국 현실적인 대안은 수동 새로고침 또는 간단한 자동 새로고침 스크립트를 활용하는 것이다.(대안인지는 모르겠으나...)
IE9와 같은 구형 브라우저를 지원해야 하는 프로젝트에서는 이러한 한계를 인지하고 적절한 대안을 마련하는 것이 중요한 것 같다. (예를 들면 마음가짐?)

혹시 더 나은 해결책이나 개선 아이디어가 있다면 댓글로 공유 부탁드립니다!