[#13] Init: msw 설정

[ienrum]

💬 Issue Number

closes #13

🤷‍♂️ Description

작업 내용에 대한 설명

msw 를 구성하였습니다.
아직storybook 설정을 안하여 storybook 에서 사용은 불가합니다.

📷 Screenshots

작업 결과물

👻 Good Function

팀원에게 공유하고 싶은 함수나 코드 일부

axios, msw 를 추가하였습니다.

📋 Check List

PR 전 체크해주세요.

• Merge 하는 브랜치가 올바른가?
• 코딩컨벤션을 준수하는가?
• PR과 관련없는 변경사항이 없는가?

📒 Remarks

팀원이 코드리뷰 시 주의할 점 또는 말하고 싶은 점 특이사항

.env.local 변수가 필요합니다.

NEXT_PUBLIC_ENV='development' // production 혹은 msw 중지를 위해선 development 를 지워주시면 됩니다. 
NEXT_PUBLIC_URL='http://example.com' // 추후 실제 도메인으로 변경하실수있습니다.

// 꼭 prefix 로 NEXT_PUBLIC 을 붙여주셔야합니다.

msw 작업을 하기 위해선, mock handler 를 구성하셔야 합니다.

// src/mocks/handlers/post.ts

import { HttpResponse, http } from 'msw';

const getPostList = http.get(`${process.env.NEXT_PUBLIC_URL}/posts`, () => {
  return HttpResponse.json({
    content: [
      {
        postId: '1',
        nickname: 'testAccount',
        title: '제목일세',
        createAt: '2024-03-01T18:55:48.884Z',
        viewCount: 30,
        likeCount: 1,
        hashtags: ['#해시태그'],
      },
    ],
  });
});

export const handlers = [getPostList];

사용법은 같은 handler 와 같은 url 을 명시하시면 됩니다.

axios.get(`${process.env.NEXT_PUBLIC_URL}/posts`)

특이사항

msw + nextjs (app router) 가 공식적인 지원이 되지 않고있습니다.

maintainer 가 제시한 해결책으로 문제를 해결했습니다.
하지만 몇몇 문제가 있는것 같습니다..

따라서 nextjs 에서 직접 사용하지 말고, storybook 테스팅에서만 사용하는것이 어떨까 생각이듭니다. (storybook 에서는 문제가 발생하지않는다고합니다)

참고

한글 자료
depromeet/10mm-client-web#239
https://www.handongryong.com/post/msw/
msw 이슈
mswjs/msw#1644

[HoberMin]

추가로 궁금한점이 있어서 남겨둡니다 !

MSWComponent가 반드시 필요한 요소인지 궁금하네요.. !
Next와 msw가 조합하기 굉장히 쉽지않았을텐데 고생하셨습니다 :)

[ienrum]

추가로 궁금한점이 있어서 남겨둡니다 !

MSWComponent가 반드시 필요한 요소인지 궁금하네요.. ! Next와 msw가 조합하기 굉장히 쉽지않았을텐데 고생하셨습니다 :)

감사합니다!

MSWComponent 는 필요한 요소인것 같습니다.!
client side 에서 msw worker 가 실행되고 난후에 다른 컴포넌트가 렌더링되는것이 보장 되어야 msw worker를 사용할수있기때문입니다.

이때 해당 컴포넌트는 그역할을 해주는겁니다.

[HoberMin]

추가로 궁금한점이 있어서 남겨둡니다 !
MSWComponent가 반드시 필요한 요소인지 궁금하네요.. ! Next와 msw가 조합하기 굉장히 쉽지않았을텐데 고생하셨습니다 :)

감사합니다!

MSWComponent 는 필요한 요소인것 같습니다.! client side 에서 msw worker 가 실행되고 난후에 다른 컴포넌트가 렌더링되는것이 보장 되어야 msw worker를 사용할수있기때문입니다.

이때 해당 컴포넌트는 그역할을 해주는겁니다.

Next이기에 필요한 내용인것 같네요 .. ! 답변하느라 고생하셨습니다 :) 나중에 정리도 한번 깔끔하게 해주세요 !! 감사합니다

[YunSukHyun]

쉽지 않은 부분은 해주셨군요 수고하셨습니다