MSW 셋업

[froggy1014]

PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )

• 기능 추가
• 버그 수정
• 의존성, 환경 변수, 빌드 관련 코드 업데이트
• 기타 사소한 수정

개요

기존에 사용하던 Postman Mock 서버가..

Request 제한이 있는줄 모르고.. 그냥 이참에 MSW 셋업해봤습니다.

변경 사항

App router에 맞게 세팅 찾아보고 적용하고 테스트해봤습니다.

코드 리뷰시 참고 사항

보통 목업서버를 파거나 그런거 같은데, 프로젝트도 작고, 급하게 만드느라

로컬에 json파일 가지고 반환하게 끔 만들었는데 이런식으로 하는건지 사실 의문이 들긴했습니다.

close #27

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fiesta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 17, 2024 8:12pm

[Zero-1016]

NextJS + msw에 관하여
NextJS를 할 때 msw를 설정을 하면 그때마다 변덕스럽게 설정이 되었던 것 같아요.

서버 컴포넌트에서 지원이 되고, 안되고 반복 NextJS의 서버컴포넌트를 아직 정식 지원을 하지 않기 때문에 해당 문제가 많긴 합니다.

mswjs/msw#1644

나중에 만약 서버로 띄우고 싶다면 해당 글 참고하시면 도움이 될 것 같아요.

목데이터 JSON 형식에 관하여
저는 목데이터를 만들 때 json 형식으로 하지 않고 객체 형식으로 만들었어요 만들 때 타입으로 인해 자동완성도 지원을 해서 좋은 경험이 있네요 만약 목데이터를 일일이 치기 귀찮으시면 faker.js 라이브러리 추천드립니다.

아래는 사용 예시에요

 http.get('/review', ({ request }) => {
    const url = new URL(request.url)
    const page = url.searchParams.get('page')
    const movieId = url.searchParams.get('movieId')
    if (!page || !movieId) {
      return HttpResponse.json(null, { status: 400, statusText: '잘못된 리뷰 요청입니다.' })
    }
    const cur_page = parseInt(page)

    const responseData: ContentResponse = {
      results: Array(faker.number.int(10))
        .fill('')
        .map((v, i) => {
          const data: Content = {
            id: cur_page + i,
            writer: {
              email: faker.internet.email(),
              profileUrl: faker.image.avatar(),
              nickname: faker.person.fullName(),
            },
            content: faker.lorem.text(),
            createAt: generateDate().toString(),
            updateAt: generateDate().toString(),
            isLike: faker.datatype.boolean(),
            isMine: faker.datatype.boolean(),
            likeCount: faker.number.int(10),
          }
          return data
        }),
      page: cur_page,
      total_pages: 10,
      total_results: 190,
    }
    return HttpResponse.json(responseData, { status: 201 })
  }),

[punchdrunkard]

안녕하세요! 이번에도 작업 수고 많으셨습니다.

보통 목업서버를 파거나 그런거 같은데, 프로젝트도 작고, 급하게 만드느라

로컬에 json파일 가지고 반환하게 끔 만들었는데 이런식으로 하는건지 사실 의문이 들긴했습니다.

이건 개인적인 경험이지만, 제가 예전에 프로젝트에서 msw 를 사용할 때는
api 명세에 맞게 객체를 만들고, 핸들러를 도메인 별로 나눠서 핸들러에서 그 객체를 리턴하게 해서 사용했던 것 같아요.

예를 들어, 올려주신 부분에 대해서는
mocks/handlers/Festival.ts 를 만들고 api 에 맞게 명세한 후

(제가 이전버전에서 사용해봐서, 공식문서보고 급하게 바꾸느라 코드에 틀린 부분이 있을 수도 있어요!)

import { http, HttpResponse } from "msw";

// 목 데이터
const hotFestivalList = {
  statusCode: 200,
  status: "OK",
  message: "스크랩 다건 조회 성공",
  data: {
    content: [
      {
        festivalId: 1,
        name: "한강 페스티벌",
        sido: "서울",
        sigungu: "광진구",
        thumbnailImage: "https://placehold.co/400.png",
        startDate: "2024-10-04",
        endDate: "2024-10-10",
      },
      {
        festivalId: 2,
        name: "쉬어강서",
        sido: "서울",
        sigungu: "광서구",
        thumbnailImage: "https://placehold.co/400.png",
        startDate: "2024-10-04",
        endDate: "2024-10-10",
      },
    ],
    offset: 0,
    pageNumber: 0,
    pageSize: 6,
    totalElements: 2,
    totalPages: 1,
  },
};

const FestivalHandler = [
  // 핫 페스티벌 조회
  http.get("/festivals/mostlike", async ({ request }) => {
    const url = new URL(request.url);

    const page = url.searchParams.get("page");
    const size = url.searchParams.get("size");

    if (/* validation 처리 */) {
      return HttpResponse.json(
        {
          statusCode: "400",
          status: "Bad Request",
          code: "C000",
          message: "잘못된 요청입니다.",
        },
        { status: 400 },
      );
    }

    // 페이지 네이션 관련 처리해서 리턴하기
    return HttpResponse.json(hotFestivalList, { status: 200 });
  }),
];

export default FestivalHandler;

// handler.ts

import festivalHandlers from './handlers/Festival';

const handlers = [
  ...festivalHandlers,
  // 각 도에인에 대한 핸들러 추가
];

export default handlers;

이런 식으로 사용했던 것 같아요!
더 조직화하자면, 목 데이터들도 모아서써볼 수도 있겠네요!

[punchdrunkard]

좋은 방법이네요!👍👍
항상 모듈화 하시는 습관을 본받고 싶습니다...

[froggy1014]

@punchdrunkard
@Zero-1016

두분 피드백받아서 더 수정해보았습니다. 아마 지금 작업브랜치에서 작업해볼 수 있을것 같네요. 감사합니다.