[React] msw로 가짜 api 만들기

개발을 하다보면 백엔드 api 개발이 덜 된 경우가 많다. 해당 경우 마치 api가 개발된 상태인 것처럼 fetch를 날려서 거기에 해당되는 가짜 api를 받아오는 방법이 있다.

 

 

 

먼저 msw라이브러리를 설치해준다.

 npm install msw --save-dev

 

 

 

src폴더 내에 mocks 폴더를 만든 후에 worker.ts파일을 하나 생성해 주자.

 

 

 

파일의 내용은 아래와 같이 작성해준다.

import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

 

 

 

이후 아래 명령어를 쳐주면

 npx msw init public/ --save

 

 

public 안에 mockServiceWorker 파일이 생긴것을 확인할 수 있다.

 

 

 

 

import { worker } from './mocks/worker';

if (process.env.NODE_ENV === 'development') {
  worker.start();
}

이후 위 코드를 index.tsx에 추가해줘야한다.

 

 

이를 통해 .env 파일로 개발 환경과 개발환경이 아닌 경우를 구분할 수 있다.

 

 

 

이제 사용할 준비가 다 되었다. 예를들어 아래와 같이 테스트용 api응답을 handler.ts 파일에 설정해 주고

import { rest } from 'msw';

export const handlers = [
  rest.get('/test', (req, res, ctx) => {
    return res(
      ctx.delay(1500),
      ctx.status(200),
      ctx.json({
        test: '테스트지롱~',
      }),
    );
  }),
];

 

 

아래와 같이 fetch를 통해 요청하면 된다. (url의 경우 localhost:3000)

//테스트 api
export async function getTest() {
  console.log('in');
  const res = await fetch(url + `/test`);
  return (await res.json()) as testType;
}