MSW(Mock Service Worker)는 프론트엔드에서 사용하는 라이브러리로 네트워크 요청을 가로채서 Mocking할 수 있는 라이브러리이다. 백엔드 API 구현 전에 MSW를 이용해서 Mock API를 만들고 테스트할 수 있다. REST API, GraphQL 둘 다 지원한다.
서비스워커를 사용하기 때문에 서비스워커 구축을 해줘야 하는데 MSW 설정(msw init) 시 같이 진행해준다.
아래와 같이 API 작성이 가능하고 사용은 원래 하던 것처럼 AJAX 요청을 하면된다.
import { setupWorker, rest } from 'msw';
const worker = setupWorker(
rest.get('/me', async (req, res, ctx) => {
return res(
ctx.json({
email: "[email protected]",
name: "Foo Bar",
profile: "https://asdasdasd.asd/asd.png"
})
);
}),
);
worker.start();
JavaScript
복사
백엔드 서버만 구현해주는게 아니라 네트워크 요청을 가로채기 때문에 외부API도 Moking이 가능하다.
import { setupWorker, rest } from 'msw';
const worker = setupWorker(
rest.get('https://jsonplaceholder.typicode.com/todos/1', async (req, res, ctx) => {
return res(
ctx.json({
userId: 1000,
id: 200,
title: "Changed title",
completed: true
})
);
}),
);
worker.start();
/*
원래 API는 아래 데이터를 반환한다.
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
*/
JavaScript
복사