프론트엔드 개발을 할 때 api 서버에서 데이터를 불러오는건 반드시 필요한 일입니다. 하지만 아직 통신해야 할 api 서버가 준비되지 않았거나 개발 작업 중이라면 데이터를 불러 올 수가 없게 됩니다. 물론 json 파일처럼 static한 dummy 데이터로 개발 할 수도 있겟지만 비동기 처리 등을 할 수 없습니다. 이럴 때 필요한게 API server 모킹 입니다.
1. msw란?
MSW란 Mock Service Worker의 약자로 서비스 워커를 활용하여 API를 모킹해주는 라이브러리입니다. 즉 브라우저에 있으면서 마치 api server인 척 프론트엔드와 통신해서 가짜 데이터를 전해주는 역할을 합니다. 브라우저에서 나가는 요청을 가로 채서 method나 URL에 기반하여 모의 응답을 해 줍니다. MSW는 서비스 워커라는 웹 표준 기술에 기반했기 때문에 React 뿐만 아니라 VueJS나 Svelte.js등 javascript 기반 프레임워크라면 모두 사용 가능 합니다.
2. MSW 시작하기
저는 React.js에서 MSW를 사용해 보겠습니다. 먼저 React 프로젝트에서 MSW를 설치해 줍니다.
npm i -D msw그리고 msw cli를 통해 기본적인 msw 코드들을 셋팅 해 줍니다
npx msw init public/ --save
3. handler.js 만들기
MSW에서 사용되는 api endpoint는 handler에서 정의하여 사용하게 됩니다. handlers.js 파일을 만들고 endpoint들을 추가해 줍니다. 저는 mock이라는 파일 하위에 만들어 주었습니다.
/mock/handlers.js
import { rest } from "msw";
const skills = ["React", "JavaScript", "CSS"];
export const handlers = [
// 내 스킬
rest.get("/skills", (req, res, ctx) => {
return res(ctx.status(200), ctx.json(todos));
})
];
4. 서비스 워커 만들기
next js는 브라우저 환경과 server 환경 모두 worker를 만들어 줘야 합니다. 그래서 저는 브라우저 환경은 worker.js파일에, server 환경은 server.js 파일에 만들어 주었습니다.
/mock/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);
5. worker 삽입하기
이제 방금 만든 서비스 워커를 client가 시작되는 시점에 삽입해 주도록 하겠습니다. 저는 React 프로젝트이니 index.js 파일에 넣어주도록 하겠습니다.
index.js
...
const { worker } = require("./mock/browser")
worker.start()
...
6. 데이터 호출해보기
mock api를 만들었으니 이제 엔드포인트를 가지고 호출해 보도록 하겠습니다. 저는 fetch를 이용하여 api를 호출 해 보았습니다.
const res = await fetch('http://localhost:3000/skills').then(res => res.json());
setSkills(res)
console.log(res);
7. 실행 결과
get method가 잘 처리 된 것을 볼 수 있습니다.
8. 마무리
이것으로 msw를 활용한 api mocking 방법에 대해서 알아보았습니다. 이로서 api server가 준비되어 있지 않더라도 api server와 통신한것처럼 개발을 할 수 있고, api server의 res 데이터가 바뀔 예정이더라도 backend의 개발을 기다릴 필요 없이 미리 데이터 dummy data를 만들어 놓고 개발을 진행 할 수 있게 되었습니다.
이상한점이나 개선사항이 있다면 언제든지 댓글 달아주시면 참고 하도록 하겠습니다. 감사합니다