[frontend] HMR란 무엇이고 프론트엔드 개발에서 왜 중요할까?

Swagger UI 를 수정하는 오픈 라이브러리 개발을 하면서 계속 콘솔에 HMR이라는 단어가 뜨는걸 발견했다. 그리고 vite로 react 프로젝트를 생성하니 또다시 ‘HMR’ 이라는 단어가 등장했다. 이를 보고 HMR이 정확히 무엇인지 궁금해졌다.
 

chatGPT가 만들어준 이상한 HMR 이미지

HMR 이란?

‘Hot Module Replacement’의 줄임말로 개발 환경에서 내가 수정한 코드의 결과를 브라우저로 바로 확인할 수 있도록 하는 기능이다. 그리고 브라우저 전체를 새로고침하지 않고도 변경된 모듈만 업데이트해준다.

Hot Module Replacement | 웹팩

이는 프론트엔드 개발자에게 꼭 필요한 기능이기 때문에 현재는 대부분의 리액트나 웹팩 등 라이브러리, 번들러, 프레임워크들은 모두 이 기능을 지원하고 있다고 한다. 
 
이를 통해 평소에는 인식하지 못했지만 내가 항상 사용하고 있던 기술이 바로 HMR이라는 것을 알게 됐다.
 
 
이 단어를 가장 많이 본 Vite 문서에서도 검색해보니

Vite

API를 만들고, 이를

interface HmrContext {
  file: string
  timestamp: number
  modules: Array<ModuleNode>
  read: () => string | Promise<string>
  server: ViteDevServer
}

 

handleHotUpdate({ server, modules, timestamp }) {
  server.ws.send({ type: 'full-reload' })
  // 모듈을 수동으로 무효화합니다
  const invalidatedModules = new Set()
  for (const mod of modules) {
    server.moduleGraph.invalidateModule(
      mod,
      invalidatedModules,
      timestamp,
      true
    )
  }
  return []
}

 
이런식으로 커스텀 이벤트를 위 커스텀 이벤트는 HMR API를 사용하여 핸들러를 등록해 구현하는 것 같았다.
 
 
 
평소에는 당연하게 사용했는데 문서들을 읽고 찾아보니 구현이 어렵고, vite 등 여러 라이브러리, 번들러, 프레임워크에서도 더 정확하게 이를 제공하기 위해 노력 중이라는걸 알게되었다.
 
 
그리고 찾던 중 관련된 흥미로운 글을 발견했다!

redux 는 HMR 때문에 만들어졌다

Redux가 만들어지게 된 시작점이 바로 HMR 구현이라는 것이다!
 
HMR을 로직을 직접 구현해봐도 좋을 것 같다.