[React] MSW 잘 사용해보기

MSW란 서버의 API가 아직 개발 중인 단계일 때 프론트엔드에서 API 명세를 토대로 연동 작업을 할 수 있게 도와주는 

라이브러리이다. 

 

서버가 API를 완성하는 단계에서 프론트가 API 연동을 하는게 이상적이지만 현실은 일정을 완벽하게 맞추는게 

쉽지 않은 일이다. 이때 MSW는 정말 많은 도움이 되는 친구이다. 

 

프론트에서 보낸 body / params / query가 서버에 정상적으로 전달될지 테스트도 가능하고 명세에 따른 데이터를

실제로 받아서 테스트할 수 있기 때문이다.

 

하지만 개인적으로 한 가지 불편한 점이 있었는데, MSW를 사용하는 환경과 서버와 통신하는 환경을 

모두 동시에 사용할 수 없었던 것이다. 

내가 모르는 좋은 방법이 있을 지는 모르겠지만 MSW를 설정하면 모든 요청은 MSW를 타고 가기 때문에 

서버와 테스트를 하려면 해당 코드를 제거하거나 MSW를 꺼야하기 때문이다. 

 

그러다 문뜩 생각난 것이 있다. 

일반적으로 프로젝트는 development와 production 모드로 나뉠텐데 development 환경에서도 msw를 사용하는 환경과 

사용하지 않는 환경을 나누는 것이다! 

 

사용 방법도 아주 간단한데, 

// package.json

"scripts": {
    "start": "set REACT_APP_DEV=LOCAL&& set PORT=3123&& craco start",
    "dev": "set REACT_APP_DEV=SERVER&& set PORT=3000&& craco start",
    
    // ...
}

먼저 package.json에서 develop 환경에서도 구분할 수 있도록 .env를 설정하였다. 

REACT_APP_DEV가 LOCAL이라면 MSW를 사용하는 환경, SERVER라면 사용하지 않는 환경이다. 

 

또한 동시에 실행시키기 위해서 PORT를 다르게 주었다. 

PORT를 다르게 주면 실행할 때 사용하는 포트가 할당한 값으로 변경된다. 

// src/index.js

if (
  process.env.NODE_ENV === "development" &&
  process.env.REACT_APP_DEV === "LOCAL"
) {
  worker.start();
}

msw를 실행하는 index.js에서 NODE_ENV만 조건을 거는 것이 아닌 package.json에서 할당한 REACT_APP_DEV도 

추가로 조건을 거는 것이다. 

 

이것으로 LOCAL 환경에서는 msw를 사용하고 아니라면 사용하지 않게 되었다. 

 

생각보다 간단한데, 이것으로 실제 서버 API와 MSW를 동시에 테스트할 수 있는 환경을 만든 것이다. 

더 좋은 방법이 있다면 해당 방법을 사용하겠지만 그 전까지는 위와 같은 방법을 사용할 것이다.