핫 로딩 - 웹팩 심화편 | 김정환

[출처 : https://jeonghwan-kim.github.io]

3. 핫 모듈 리플레이스먼트

3-1. 배경

웹팩 개발서버는 코드의 변화를 감지해서 전체 화면을 갱신하기 때문에 개발 속도를 높일 수 있다. 하지만 어떤 상황에서는 전체 화면을 갱신하는 것이 좀 불편한 경우도 있다. 싱글페이지어플리케이션은 브라우져에서 데이터를 들고 있기 때문에 리프레시 후에 모든 데이터가 초기화 되어 버리기 때문이다. 다른 부분을 수정했는데 입력한 폼 데이터가 날아가 버리는 경우도 있고 말이다.

 

전체 화면 갱신 하지 않고 변경한 모듈만 바꿔치기 한다면 어떨까? 핫 모듈 리플레이스먼트는 이러한 목적으로 제공되는 웹팩 개발서버의 한 기능이다.

 

3.2 설정

설정은 간단하다. devServer.hot 속성을 켠다.

webpack.config.js :

module.exports = {
  devServer = {
    hot: true,
  },
}

view.js를 사용하는 컨트롤러 코드를 잠깐 읽어보자.

src/controller.js :

import model from "./model";
import view from "./view";

const controller = {
  async init(el) {
    this.el = el
    view.render(await model.get(), this.el);
  }
}

export default controller;

컨트롤러는 model과 view에 의존성이 있는데 이 둘을 이용해 데이터를 가져와 화면을 렌더한다. 만약 view 모듈에 변화가 있을 경우 전체 화면을 갱신하지 않고 변경된 view 모듈만 다시 실행하는 것이 핫 모듈의 작동 방식이다.

 

이 기능을 만들기 위해 컨트롤러 하단에 다음 코드를 추가해 보자.

src/controller.js :

// 중략
export default controller;

if (module.hot) {
  console.log('핫모듈 켜짐')

  module.hot.accept('./view', () => {
    console.log('view 모듈 변경됨')
  }) 
}

devServer.hot 옵션을 켜면 웹팩 개발 서버 위에서 module.hot 객체가 생성된다. 이 객체의 accept() 메소드는 감시할 모듈과 콜백 함수를 인자로 받는다. 위에서는 view.js 모듈을 감시하고 변경이 있으면 전달한 콜백 함수가 동작하도록 했다.

 

웹팩 개발 서버를 재 시작하면 브라우져에 다음과 같이 로그가 찍힌다.

후에 view.js 파일을 수정하면 다음 로그가 찍히는 것을 확인할 수 있다.

이 콜백 함수 안에서 변경된 view 모듈을 이용하면 view 모듈을 교체할 수 있을 것 같다.

 

model로 데이터를 부르고 다시 변경된 view 모듈로 렌더 함수를 실행했다.

src/controller.js : 

export default controller;

if (module.hot) {
  module.hot.accept('./view', async () => {
    view.render(await model.get(), controller.el); // 변경된 모듈로 교체 
  }) 
}

view.js 코드를 변경하고 저장하면 브라우져 갱신 없이 화면이 변경된다.

 

3.3 핫로딩을 지원하는 로더

이러한 HMR 인터페이스를 구현한 로더만이 핫 로딩을 지원하는데 웹팩 기본편에서 보았던 style-loader가 그렇다. 잠깐 코드를 보면 hot.accept() 함수를 사용한 것을 알 수 있다. (참고: style-loader 코드)

style-loader 코드

이 외에도 리액트를 지원하는 react-hot-loader, 파일을 지원하는 file-loader는 핫 모듈 리플레이스먼트를 지원하는데 여기를 참고하자.

 

---

 

TODO

핫로딩을 설정하세요

webpack.config.js : 

module.exports = {
  devServer: {
    hot: true    // 핫로딩 설정
  }  
}

핫 로딩이 필요한 파일에서

if (module.hot) {
  module.hot.accept('./view', async () => {
    view.render(await model.get(), controller.el); // 변경된 모듈로 교체 
  }) 
}

* ./view 파일의 코드를 변경하고 저장하면 view 파일을 렌더링한다.