[리액트] 프로젝트에 웹팩을 적용해보자 #3 (feat.타입스크립트)

2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트)

2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #2 (feat.타입스크립트)

이전 포스트에 이어서 이번 포스트에서는 리액트를 개발하기 위한 webpack-dev-server의 새로운 모습인 webpack serve를 적용하고 핫로딩을 적용해보도록 하겠다.

---

Webpack 4에서는 webpack-dev-server를 설치하여 사용했었다. 하지만 Webpack 5부터는 별도의 라이브러리를 설치하지 않고 Webpack에서 바로 사용한다.(하지만 아직 공식문서에는 webpack-dev-server를 설치하라고 나와있다. 굳이 필요없다)

npx webpack serve

해당 스크립트를 실행하면 바로 dev-server가 실행된다. 아무것도 설정하지 않으면 8080 포트에 자동 생성된다.

그리고 해당 url로 가면 정상 동작하는 프로젝트를 확인할 수 있다.

---

우리가 webpack-dev-server를 사용한 이유는 무엇인가? 바로 수정된 코드가 바로 적용되는 Hot Module Replacement(또는 HMR) 때문이다.

그래서 핫로딩 기능을 사용하는 값을 설정해보도록 한다. 이번에도 어김없이 공식문서를 통해 설정을 하면 된다.

https://webpack.kr/guides/development/#using-webpack-dev-server

Development | 웹팩

설정을 하고 나면 webpack.config.js는 아래와 같은 상태가 되어있다.

그리고 실행하여 react 코드를 변경했는데

바로바로 적용이 안된다. 원래 코드를 save 하면 reloading 되면서 딱 변경되야 하는데 안된다..

---

자연스레 구글링 해보니 이슈가 많이 있고 이를 위해서 Webpack4로 가라는 글도 보인다.

대부분의 개발 이슈, 버그는 내가 모르기 때문이다. 그러니 더 찾아보자.

계속 방법을 찾아보니 여러가지 답변이 보인다.  

webpack.config.js에  new webpack.HotModuleReplacementPlugin(), 을 또는  target: "web", 해주는 방법

App.tsx에서  export default hot(App); 감싸라는 방법도 있고 

index.tsx에서 module.hot.accept();  선언하라는 방법도 있다.

---

마구잡이로 동작하다보니 어느순간 동작함을 확인했다..?

그리고 어떤 코드가 동작했는지 확인하기 위해 하나씩 제거해보니  target: "web", 코드가 기준으로 나뉜다.

해당 코드를 선언하니 드디어 프로젝트 콘솔 창에서 사용할 수 있다고 뜬다.

이제 확인해보자.

바뀌는 모습을 확인할 수 있다. 근데 이게 여기서 끝이 아니다.  나는 현재 프로젝트에서 react-router-dom를 사용하고 있다.

그래서 url path에 따라 랜더링할 컴포넌트가 정해진다. 근데 HMR를 쓰면 Router의 history가 날아가는 상황이 발생했다.

아마도 수정은 바로바로 되는 듯한데 다시 로딩하는 과정에서 Router History 정보가 날아가고 어떤 exact path에서 들어와서 현재 path로 이어지는지 알수 없어 터지는 것으로 생각된다.

예를 들어 CreatePage.tsx에서 특정 값을 지우게 되면 아래와 같이 뜨게 된다.

그래서 이 정보를 유지하도록 webpack에 추가 옵션을 설정해서 값을 유지해야한다.( 웹팩은 다 있다. 없는 건 우리 뇌 속에 지식뿐..)

이렇게 옵션을 추가 설정하면 history가 살아남아서 HMR이 정상적으로 동작한다.

이로써 최종 webpack.config.js 파일이 완성되었다.

---

"프로젝트에 웹팩을 적용해보자 시리즈"를 통해 리액트, 타입스크립트 환경에 웹팩을 적용하고 빌드(컴파일)해보고 개발에 용이한 webpack serve (webpack-dev-server)를 설정해보았다. 

생각보다 오래걸려서 당황스럽지만 이번 기회에 Webpack5를 처음부터 설정했다는 점에 의의를 두고자 한다.

그리고 React의 랜더링, Router history를 위한 추가 설정까지 하여 개발 환경 세팅도 완성하였다.

3편의 시리즈 동안 언급한 방법, 코드는 정답이 아닐 것이라 생각하고 더 올바른 방법이 있으리라 확신한다. 하지만 아직 못찾았으며 공부를 덜했으니 추후에 올바른 방법을 알게된다면 업데이트 하도록 하겠다.