Hot Module Replacement 삽질기

Webpack에 Hot Module Replacement를 적용하는 과정에서 발생한 삽질기 정리

  1. Express를 사용하는 Node 서버를 사용하기로 했기 때문에 Webpack dev server를 사용할 수 없었다.
    => Webpack Hot Middleware를 사용하였다.
  2. localhost/__webpack_hmr 파일 에러 발생
    => Express에서 API 변경 시 처리를 위해서 Nodemon이 적용되었는데 Nodemon이 업데이트하는 코드가 클라의 js 빌드 파일을 업데이트하면서 발생한 에러
  3. webpack-hot-middleware를 설치하였는데 리액트가 업데이트가 안되고 새로고침하라는 메시지가 나왔다.
    => React에서는 react-transform-hrm을 설치해줘야 했고 Component를 proxy로 교체해서 변경사항 발생 시, 이를 통해서 해당 컴포넌트와 관련 요소들을 업데이트해줬다. 기존에 React Component에서 Component를 상속받지 않고 함수로만 작성한 경우 HMR이 동작하지 않았다.
    => Redux에서는 store의 hot.accept()를 호출해서 reducer들을 교체하는 작업을 해줘야 했다. (store.replaceReducer())
  4. hmr 적용하고 서버 빌드시 에러가 발생하였다.
    => 서버 렌더링하는 코드에서 클라이언트 코드를 호출을 하는데 의존성있는 모듈에서 module && module.hot을 체크하는게 아니라 module.hot으로만 체크를 하다보니 서버 빌드에서는 포함이 안되어 있는 hot module 코드로 인해서 에러가 발생하였다.

모든 코드를 보진 못했지만 hmr에서 코드 변경시 스트림으로 변경된 코드를 클라이언트로 보내고 클라이언트에서는 수정된 모듈과 해당 모듈이 hot module에서 받아들일지를 체크한 후 받아들이지 않는 경우 에러를 발생시키는 코드가 재미있었다. 문제는 반영하는 노력보다 그냥 새로고침 하는게 빠르지 않을까 하는 생각이….

끝~

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중