MSW 2

[Issue] msw + webpack-dev-server

WEVOTE 프로젝트 리팩토링 중 mocking 시스템을 도입하기 위해 msw를 적용하는 과정에서 정상적으로 동작하지 않는 상황으로 시간을 소모했다. 서비스워커 미실행 이슈 (with webpack-dev-server) msw는 Web API의 Service Worker API를 사용한다. 공식문서에서 설명하듯 브라우저에서 사용할 때는 Mock Service Worker(mockServiceWorker.js)를 public 디렉토리에 설치하여 실행해야 한다. 나는 WEVOTE에 적용하기 전에 msw_test CRA 프로젝트를 만들어서 동작 방식을 이해하고 도입을 시도했다. public에 mockServiceWorker를 설치하여 실행했고, 정상적으로 동작하는 것을 확인했다. 문제의 발단 동작 방식을 가볍..

Development/Issue 2022.07.15

[Refactor] WEVOTE - 데이터 Mocking (with MSW)

본 포스팅은 msw(v0.42.3)을 사용합니다 1. 구동중인 서버가 없는데, API 없이 프론트엔드 리팩토링을 어떻게 하지? 이전 프로젝트를 혼자 리팩토링 하기로 결정하고 코드를 다시 확인하는데, 서버가 닫혀있으니 당연하게도 API 통신이 되지 않았다. 프로젝트 진행 당시에는 백엔드 개발자와 첫 협업이라 전체적인 업무 프로세스에 대한 이해가 부족했기 때문에 처음 나온 계획은 다음과 같았다. 1) 전체 팀원들과 회의를 통해 기능 기획 및 API 명세를 정함 2) 디자이너 : 기능을 디자인해서 FE에 전달 백엔드 : API 명세로 API 개발하여 FE에 전달 프론트엔드 : 디자인과 API를 통해 개발 3) 완성 문제는 위의 경우 업무의 흐름이 동기적이기 때문에 상당히 비효율적이라는 것이다. 실제 업무에서는..