Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#13] Init: msw 설정 #14

Merged
merged 5 commits into from
Apr 26, 2024
Merged

[#13] Init: msw 설정 #14

merged 5 commits into from
Apr 26, 2024

Conversation

ienrum
Copy link
Collaborator

@ienrum ienrum commented Apr 24, 2024

💬 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

@ienrum ienrum added ✨Feature 새로운 기능 추가 ⚙️ Chore 의존성 변경, 설정변경 labels Apr 24, 2024
@ienrum ienrum added this to the 2주차 스프린트 milestone Apr 24, 2024
@ienrum ienrum self-assigned this Apr 24, 2024
Copy link
Contributor

@HoberMin HoberMin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

public/mockServiceWorker.js Show resolved Hide resolved
src/instrumentation.ts Outdated Show resolved Hide resolved
src/mocks/handlers/index.ts Outdated Show resolved Hide resolved
@ienrum
Copy link
Collaborator Author

ienrum commented Apr 24, 2024

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

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

감사합니다!

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

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

@HoberMin
Copy link
Contributor

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

감사합니다!

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

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

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

Copy link
Collaborator

@YunSukHyun YunSukHyun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/mocks/initMsw.ts Outdated Show resolved Hide resolved
@ienrum ienrum merged commit 9dc84de into main Apr 26, 2024
3 checks passed
@ienrum ienrum deleted the #13/init/msw branch April 26, 2024 13:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⚙️ Chore 의존성 변경, 설정변경 ✨Feature 새로운 기능 추가
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feat] msw 를 설정합니다
3 participants