[인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩 - 핫 로딩)

핫 로딩이 무엇인지 알아보고, 웹팩에서 직접 적용해보자.

핫 로딩

핫 모듈 리플레이스먼트

웹팩 개발서버의 한 기능으로, 코드 변경 사항이 있을 때 전체 화면을 갱신하지 않고 변경된 모듈의 화면만 갱신해준다. SPA(Single Page Application)은 브라우저에서 데이터를 담고 있기 때문에 리프레시 하면 모든 데이터가 초기화 된다. 내가 수정한 부분과 무관한 곳도 초기화되어 불편할 경우가 생긴다. 따라서 해당 기능을 사용하면 이러한 불편함도 줄이고, 개발 속도를 빠르게 할 수 있다.

 

devServer.hot 속성을 켜서 핫 로딩을 설정해보자.

webpack.config.js

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

이렇게 설정해주면 웹팩 서버의 HMR 인터페이스를 활성화시킨다는 의미이다. devServer.hot 옵션을 켜면 웹팩 개발 서버 위에서 module.hot 객체가 생성된다. 이 객체의 accept() 메서드는 감시할 모듈과 콜백 함수를 인자로 받는다. 이 내용을 적용하여 view.js 모듈 변경이 있을 때 해당 부분만 화면이 바뀌도록 만들어보자.

 

 

controller.js

...

if (module.hot) {
	module.hot.accept("./view" , async () => {
		view.render(await model.get(), controller.el)
	})
}

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

 

핫로딩을 지원하는 로더

이러한 HMR 인터페이스를 구현한 로더만이 핫 로딩을 지원하는데 style-loader, file-loader는 핫 모듈 리플레이스먼트를 지원한다. 그리고 React, Vue 프레임워크에서도 기본적인 세팅에 이 기능이 포함되어 있다.

 

 

 

 

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습