🙋 이 문서를 보고 나면
- MSW를 활용한 Mocking 작업을 할 수 있다.
- 백엔드의 API 작업을 기다리지 않고 구현할 수 있다.
- 임의적으로 API를 만들고 데이터를 넘겨받을 수 있다.
👨🚀 이 기능이 필요한 이유는?
백엔드에서 데이터를 받을 수 없는 상황은 종종있었는데요, 과거에는 기다리다보면 언젠가는 API 개발 작업이 끝나기 때문에 다른 작업을 하면서 API를 기다렸습니다.
하지만 이제는 그럴 수 없게 되었습니다. 바로 서버 비용이 없어서 백엔드 서버 자체를 돌릴 수 없게 되었기 때문입니다.
그래서 백엔드에서 데이터를 받는 것이 아닌, 임의의 데이터를 가져오기로 했습니다.
임의로 데이터를 가져오는 방법은 여러가지가 있는데,
- 임의로 Mock Data 만들기
- React-Query 사용하기
- API 모킹 라이브러리 사용하기
저는 MSW를 활용한 Mocking으로 구현해봤습니다. 세팅에는 시간이 좀 걸리지만 세팅만 하면 API 호출 부분 코드는 거의 수정하지 않고도 그대로 사용할 수 있기 때문입니다.
하지만 API 불러오는 모든 부분에 Mocking을 하는 것은 무리가 있어서, 딱 구현이 필요한 부분에만 Mocking을 진행하고 구현 및 테스트를 하였습니다.
👨🚀 어디에 사용했을까?
Bottom Sheet를 구현했습니다. Bottom Sheet 안에는 데이터 리스트가 보여져야 합니다. 데이터를 Mocking을 통해서 불렀습니다. 그리고 정상적으로 보여지고 이벤트가 동작하는지 확인했습니다.
📝 MSW 기본 Setting 하기
🚨 Parcel로 빌드 시 MSW를 파일을 무시하는 버그 해결하기
문제
정상적으로 MSW 기본 Setting을 마쳤는데, 콘솔창에 [MSW] Failed to register the Service Worker이 표시되었습니다.
mockServiceWorker.js 파일이 없어서 읽을 수 없다는 에러입니다.
해결방법
MSW와 Parcel를 함께 써서 문제가 발생했습니다. mockServiceWorker.js를 Parcel이 빌드하는 과정에서 빼게 되어 Dist 폴더에 들어가지 않게 되기 때문입니다.
Dist 폴더에 들어가보면 빌드하는 과정에서 해당 파일만 빠지게 된 것을 확인할 수 있습니다.
강제로 Dist 폴더에 mockServiceWorker.js를 넣으면 에러가 발생하지 않고 [MSW] Mocking enabled 문구가 출력되며 정상적으로 동작합니다.
하지만 강제로 하는 것은 좋은 방법은 아니니 위에 첨부한 GitHub Discussions에 들어가서 따라하며 문제를 해결하도록 합시다.
📝 임의의 데이터 생성하기
📘 정리
🍵 참고
