Mocking 이란? msw 사용해서 모의 데이터 만들어보기!
현재 Final 프로젝트에서 개발 설계를 위한 회의를 진행중이다!
아직 서버가 구축되지 않은 상황이라 프론트에서 임의로 API 통신을 하거나, 데이터를 생성, 수정, 삭제 할 수 있는 방법을 이야기 하던 중 POSTMAN, msw, firebase 등의 의견이 나왔다.
그 중 내가 찾아본 MSW 방법에 대해 포스팅해보고자 한다!
Mocking 이란?
Mock(모의 데이터)를 만들어 활용하는 방식
서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나,
서버의 역할을 해주는 무언가가 필요할 때 활용
Service Worker는 일종의 대리 서버라고 할 수 있다. Service Worker를 활용하면, 리소스 요청을 가로채 수정할 수 있고, 리소스를 세부적으로 캐싱해 조작할 수 있다. 즉, 네트워크를 사용하지 못할 때에도 개발자가 개발하고 있는 웹앱이 어떻게 동작해야 하는지 조작할 수 있다는 것이다!
즉, msw는 유저의 request를 서버까지 보내지 않고 네트워크레벨에서 인터셉트해 임의의 데이터를 응답해주는 라이브러리라고 요약해볼 수 있겠다!
마치 이산들의 아이스크림처럼 인터셉트하기,,,
이제부턴 Mocking을 할 수 있는 msw 라이브러리 사용법을 알아보자!
msw 모킹 사이트
1. msw 설치하기
$ npm install msw --save-dev
2. browser.js 생성
import { setupWorker } from "msw";
import { handlers } from "./handler";
export const worker = setupWorker(...handlers);3. handler.js 생성
가짜 데이터를 넣어줄 파일
import { rest } from "msw";
export const handlers = [rest.get("/login", async (req, res, ctx) => {})];4. public 폴더에 Mock Service Worker 만들기 (msw초기화)
$ npx msw init public/ --save
5. index.js
import { worker } from "./mocks/worker";
if (process.env.NODE_ENV === "development") {
worker.start();
}개발환경인 경우에는 mocks 폴더의 browse.js 에서 worker 가져와서 실행!
⇒ 콘솔에 [MSW] Mocking enabled. 찍히면 성공!
6. handler.js 에 원하는 가짜 데이터 입력하여 사용
method (url )
서버로 보내지 않을 url을 적는다.
그러면, get 방식으로 위의 url로 요청하는 모든 API는 아래에 적은 데이터 응답을 받는다.
rest.get(
"https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json",
async (req, res, ctx) => {
const id = req.url.searchParams.get("id");
console.log(req);
return res(
ctx.json({
data: {
people: [
{
name: "joy", // get 주소까지 가지 않고, 여기서 수정한 내용 받아온다.
age: 135,
},
{
name: id,
age: 13,
},
{
name: "cindy",
age: 15,
},
{
name: "judy",
age: 25,
},
{
name: "marry",
age: 64,
},
{
name: "tommy",
age: 109,
},
],
},
})
);
}
),