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.

Sign up for GitHub

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

Jump to bottom

Feat/#38 MSW 적용 #40

Merged
merged 2 commits into from Oct 13, 2022
Merged

Feat/#38 MSW 적용 #40

merged 2 commits into from Oct 13, 2022

Conversation

jinist94
Copy link
Contributor

@jinist94 jinist94 commented Oct 12, 2022 •
edited

close #38

✅ 작업 내용

  • msw를 사용하여 미리 api를 정의하여 사용할 수 있도록 하였습니다.
  • 데이터는 아직 임시로 한 개의 배열에 3개만 넣어놓았습니다..ㅎㅎ
  • 사용해보니 더미데이터 사용하는 것은 비슷한데 api 세팅을 미리 해놓을 수 있다는 점이 장점인 것 같아요.

📌 이슈 사항

image

  • 처음 페이지에 들어오면 (새로고침) mocking enabled 처리되는데 mocking enabled 되기 전에 api호출이 되는 경우 404를 반환합니다. 제가 마지막으로 테스트했을 때는 제대로 작동되는데 간혹(?) useEffect에 api호출을 할 경우 먼저 실행이 되기도 하는 것 같습니다.
  • 최신 버전의 msw사용 시 저희 프로젝트 환경에서 에러가 있어서 확인해 보니 아직 해결되지 않은 부분인 것 같아서 버전을 0.42.0 정도로 낮추었는데 또 다른 에러가 발생했고 그 에러가 최신 버전에서 해결된 부분이라 그냥 버전을 안전하게 많이 낮추는 방법으로 해결하게 되었습니다. 이 부분은 이후에 조금 더 알아봐야 할 것 같습니다.

관련 글 mswjs/msw#1267 (comment)

✍ 궁금한 점

  • 현재 요청 값에 따른 에러응답은 전혀 하지 않은 상태인데 체크를 해주어야 할 지 고민이 되었습니다...😅 클라이언트의 요청 값에 따른 에러 처리까지 구현을 하는 것이 조금 애매하다고 느꼈습니다. 아니면 빈 값 체크 정도의 간단한 구현으로 처리하면 좋을까요?

@jinist94 jinist94 self-assigned this Oct 12, 2022
@vercel
Copy link

vercel bot commented Oct 12, 2022 •
edited

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

Name Status Preview Updated
fe ✅ Ready (Inspect) Visit Preview Oct 13, 2022 at 1:07PM (UTC)
fe-develop ✅ Ready (Inspect) Visit Preview Oct 13, 2022 at 1:07PM (UTC)

YuHyun-P
YuHyun-P reviewed Oct 13, 2022
View reviewed changes
Copy link
Contributor

@YuHyun-P YuHyun-P left a comment

Choose a reason for hiding this comment

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

지니어스의 지니님
아주 빠르게 MSW를 적용해주셨군요. 랜덤 api까지,,수고하셨습니다👍

현재 요청 값에 따른 에러응답은 전혀 하지 않은 상태인데 체크를 해주어야 할 지 고민이 되었습니다...😅 클라이언트의 요청 값에 따른 에러 처리까지 구현을 하는 것이 조금 애매하다고 느꼈습니다. 아니면 빈 값 체크 정도의 간단한 구현으로 처리하면 좋을까요?

음 MSW가 처음이라 어디까지 목업을 해야 할지 잘 모르겠네요..
일단 에러 응답 없이 가고, 레이아웃 + msw api 연결 후에도 실제 api 완성이 안 된 상태라면 그 때 제가 추가해서 사용하겠습니다!

src/pages/_app.tsx Outdated
@@ -7,6 +7,10 @@ import { theme } from '~/types/theme';
import Header from '~/components/common/Header';
import MainContainer from '~/components/common/MainContainer';

if (process.env.NODE_ENV === 'development') {
Copy link
Contributor

Choose a reason for hiding this comment

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

개발환경에서 실제 API로 연결할 때 MSW 비활성화 할 방법이 있나요??

src/mocks/handlers.ts
import { rest } from 'msw';

export const handlers = [
rest.get('/random', (req, res, ctx) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

😍👍👍👍

@jinist94 jinist94 merged commit 329a8e2 into develop Oct 13, 2022
@jinist94 jinist94 deleted the feat/#38 branch October 19, 2022 13:14
@Chanki-Min
Copy link

msw 에러 잡아내는데 도움이 되었습니다. 좋은 하루 되세요~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@YuHyun-P YuHyun-P YuHyun-P left review comments

Assignees

@jinist94 jinist94

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feat: MSW 적용
3 participants
@jinist94 @Chanki-Min @YuHyun-P