[Feat] MSW 세팅

[wade3420]

🤔 해결하려는 문제가 무엇인가요?

🎉 변경 사항

• msw 패키지 install
• 도메인마다 각각 handler 정의
• clinet 환경에서 mocking -> MSWInitComponet 에서 실행
• sever mocking -> instrumentation.ts 에서 실행

🙏 여기는 꼭 봐주세요!

mocking 에 대한 파일들은 /msw 에 있습니다.
도메인마다 각각 다른 파일에서 handler 정의

SSR 시점에서도 모킹된 데이터를 받아오는 것 확인했습니다만, app router + msw 는 처음 사용해봐서 사용하다가 이슈가 생길수도 있을 것 같아요.

다.

사용 방법

src/msw/handlers/mission.ts 의 핸들러 정의 법을 참고하시거나 공식문서에 나오는 예시 코드를 참고하시면 mock api 만들기 수월하실 겁니다!

🌄 스크린샷

📚 참고

msw getting started
https://mswjs.io/docs/getting-started

msw nextjs 13 지원 이슈
mswjs/msw#1644

app router 13 msw example
https://github.com/mswjs/examples-new/pull/7/files#diff-36f843d6f46ae2284e5767c3ed46cdadb2d5a296e3a4016e7ad7d1460c03ab2d

instrumentation 에 대한 설명
https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation

[vercel]

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

Name	Status	Preview	Updated (UTC)
10mm-client-web	✅ Ready (Inspect)	Visit Preview	Jan 2, 2024 7:02pm

[github-actions]

🚀storybook: https://656f59f07b8e48bf741b98e6-kgldehgxfc.chromatic.com/

[woobottle]

use client가 추가 되었는데도 ssr에서 동작한다는게 참으로 신기하고만용

[sumi-0011]

use client가 추가 되었는데도 ssr에서 동작한다는게 참으로 신기하고만용

이거 붙어서 안되지 않을까요.. 되면 진짜 신기할것 같아요 👀

[woobottle]

제가 했던건 msw1이라 리뷰 불가능 이슈 ㅜㅜ

• 응답들에 대한 인터페이스를 정의하고 이걸 서비스 쪽에서도 쓰고싶은데 투머치 할 것 만 같은 이슈 ㅠㅠ

[wade3420]

제가 했던건 msw1이라 리뷰 불가능 이슈 ㅜㅜ

• 응답들에 대한 인터페이스를 정의하고 이걸 서비스 쪽에서도 쓰고싶은데 투머치 할 것 만 같은 이슈 ㅠㅠ

응답에 대한 인터페이스 정의가 어떤식일까요?

[woobottle]

응답에 대한 인터페이스 정의가 어떤식일까요?

return HttpResponse.json({
    content: [
      {
        missionId: 0,
        name: 'DFS 문제 풀기',
        content: 'DFS 동작 원리 이해 및 문제 풀어보기',
        category: 'STUDY',
        visibility: 'ALL',
        status: 'NONE',
        sort: 1,
      },
    ],
    first: true,
    last: true,
    pageable: {
      pageNumber: 0,
      pageSize: 0,
      sort: {
        empty: true,
        sorted: true,
        unsorted: true,
      },
      offset: 0,
      paged: true,
      unpaged: true,
    },
    size: 0,
    number: 0,
    numberOfElements: 0,
    empty: true,
  });
});

위 부분에서 응답의 형태가 인터페이스로 정의되어 있고 이를 훅이나 서비스에서도 활용하는 것을 의미했었어요!

[wade3420]

제가 맞게 이해했다면 서버에서 받아오는 타입을 정의 하는 것으로 이해했습니다.

/msw 파일에서 서버리스폰스의 인터페이스를 정의하는 건 좀 어색하다고 생각하는데 어떻게 생각하시나요? 따로 types 파일이나 apis에서 정의해보면 좋을 것 같아요

[github-actions]

🚀storybook: https://656f59f07b8e48bf741b98e6-ksdenscjzw.chromatic.com/