MSW 도입기

계기

서버 응답에 따라 굉장히 많은 분기 처리를 해줘야 하는 페이지를 개발 중이었다.

각 상태를 확인하려면 백엔드 개발자에게
시드 데이터를 심어달라고 부탁하거나, 클라이언트에서 직접 목 데이터를 끼워넣어야 했다.

계속 이렇게 하다간 비효율이겠다 싶었다.
그때부터 MSW를 한번 써봐야겠다고 생각했다.

기존에 나는 어떻게 작업했나

API 레이어에서 목 데이터를 직접 반환하는 식으로 처리했다.

getApplication: async (token: string) => {
  return { status: "expired", ... }; // 확인하고 싶은 상태로 교체
}

확인할 때마다 코드를 바꾸고, 끝나면 되돌리는 작업을 반복했다.

사실 이 방식이 크게 불편하다고 느낀 적은 없었다.
그런데 이번엔 달랐다. 확인해야 할 상태가 너무 많았다.

네트워크 레이어를 건드리는 게 아니라 실제 요청 자체가 발생하지 않으니
엣지 케이스를 제대로 검증하기도 어려웠다.

주의해야 했던 부분

우리는 서버 한 대에 pm2로 next dev를 돌리고 팀원들이 SSH로 함께 쓰는 구조다.

모킹을 켜면 다른 팀원도 영향을 받을 수 있어서, 확인 후 반드시 끄는 걸 규칙으로 정했다.

마무리

MSW가 뭔지는 알고 있었다. 근데 딱히 써야겠다는 생각이 든 적이 없었다.

이번에 처음으로 써볼 이유가 생겼고, 써보니 편했다.