웹팩에서 msw 설정
이번 팀 프로젝트는 CRA와 같은 보일러 플레이트 코드를 사용하지 못하게 제한이 있다. 또한 요즘 많이 사용된다는 Vite의 사용도 제한이 있고, 웹팩으로 프로젝트를 시작하도록 강제하고 있다.
팀원 모두 한 번도 웹팩을 통해 프로젝트를 시작해본 경험이 없어 프론트엔드 팀원 각자 개인 레포에서 웹팩 공부를 진행한 후 어느정도 진척이 있을 때 팀 레포에 프로젝트를 시작하기로 했다.
다행히 웹팩으로 시작하는 프로젝트에 대한 많은 참고 자료들이 있어 첫 리액트 프로젝트 화면을 띄우는데 까지는 그리 오랜 시간이 걸리지 않았다. 그렇게 모든 팀원이 첫 웹팩 프로젝트를 성공시킨 후 모여 팀 프로젝트 초기 설정을 시작해보았다.
eslint, prettier, 웹팩 등등 여러 설정들을 하고 필요한 패키지를 설치하는데 문제가 발생했다. 큰 데이터를 다루는 백엔드의 개발 속도를 고려해 프론트엔드 개발을 진행하기 위해서 미션중에 배웠던 MSW 라이브러리를 사용하기로 결정했는데, 이 라이브러리가 우리 팀의 개발 환경에서 동작하지 않았다.
왜 동작하지 않는지 원인을 찾아보니 MSW service worker 파일을 찾을 수 없다는 오류 메세지가 나오는 것을 확인할 수 있었다. 원인을 더 자세히 알아보니 public 폴더에 있는 파일들은 웹팩이 번들링을 진행할 때 포함이 되지 않는다는 것을 알 수 있었고, 이를 어떻게 해결할 지 팀원들과 방법을 찾아보았다.
약 한시간쯤 지났을 무렵 copy-webpack-plugin 패키지를 통해 public 경로에 있는 파일들도 빌드 폴더에 포함시킬 수 있다는 것을 알게 되었다. 하지만 이 copy-webpack-plugin에 대한 사용법이 미숙해 public 폴더에 있는 mockServiceWorker.js 파일만 빌드 폴더로 옮겼어야 했는데 index.html과 같은 다른 파일들 까지 한꺼번에 빌드 폴더로 옮겨지게 되었다.
이런 저런 방법들을 시도해보다 webpack.config.js 파일의 plugins에 아래와 같은 설정을 추가 해주어 MSW를 프로젝트에 적용할 수 있게 되었다.
new CopyWebpackPlugin({
patterns: [
{ from: 'public/mockServiceWorker.js', to: '.' }, // msw service worker
],
}),
설정을 간단히 보면 public 경로에 있는 mockServiceWorker.js 파일을 빌드 후 폴더의 루트 디렉토리에 추가해준다는 설정이다.
문제 상황과 해결 방법을 간단하게 다시 정리해보면 다음과 같다.
- MSW를 적용해보려고 함.
- 웹팩에서 개발 서버를 열었을 때 MSW 실행을 위해 필요한 mockServiceWorker.js 파일을 찾을 수 없다는 오류가 발생함.
- 문제의 원인은 웹팩에서 번들링을 진행할 때 public 폴더 하위 경로에 있는 파일들을 무시하기 때문이었음.
- 문제를 해결하기 위해 public 경로에 있는 mockServiceWorker.js 파일을 번들링 후 폴더의 루트 디렉토리에 저장하도록 하는 설정을 추가해줌.