폴더구조

src
├── mocks
│   ├── api
│   │   ├── api 명
│   │   │   ├── index.ts
│   │   │   └── data.ts
│   ├── handlers.ts
│   ├── browser.ts
|   └── index.ts

• /api: mock api 관련 로직
  • /api명:
    • index.ts: 해당 api 핸들러 작성
    • data.ts: response 데이터 작성
• handlers.ts: api 핸들러 통합
• browser.ts: 브라우저에서 msw 실행 시키는 코드
• index.ts: msw 실행

실행

import initMocks from "./mocks/index.ts";
****
if (process.env.NODE_ENV === "development") {
  await initMocks(); 
}

main.tsx 에서 위 코드로 현재 개발모드인지 확인후에 실행시킴

사용 예시

// api/data/searchResultData.ts

export const searchResultData = [
  {
    image: "https://...생략",
    title: "조각집",
    type: "rect",
  },
  {
    image: "https://...생략",
    title: "안녕",
    type: "rect",
  },

  {
    image: "https://...생략",
    title: "고고",
    type: "rect",
  },
];

// api/searchResult.ts
import { rest } from "msw";

import { searchResultData } from "./data/searchResultData";

const handlers = [
  rest.get("/kim", (req, res, ctx) => {
    return res(
      ctx.json({ status: 200, message: "success", data: searchResultData })
    );
  }),
];

export default handlers;

이렇게 데이터랑 핸들러를 생성해 주면 된다.

• rest: rest. 하고 get이나 post를 붙혀주면 됨
  • 첫번째 인자는 url임
  • return 값으로 위에서 만든 데이터 넘겨주면 프론트에서 이 url 로 요청보내면 msw 가 이 값을 return 해줄거임

이렇게 만든 핸들러를 handlers 에서 다 합쳐주면 됨.

// handlers.ts

import searchResultHandler from "./api/searchResult";

export const handlers = [...searchResultHandler];

사용 예시

내가만든 custom hook 사용해서 default 값 넣고 url 주소 넣으면 msw에 작성한 데이터 받아올 수 있음