inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

msw 관련해서 궁금증이 있습니다.

해결된 질문

452

김치맨

작성한 질문수 1

0

안녕하세요 제로초님 강의 잘보았습니다!

본론부터 말씀드리자면 2가지 고민이 있습니다.

 

하나는 msw component가 필요한지 궁금합니다.

왜냐하면 현재 express로 하고 있어서 msw component가 없어도 mock 서버(express)를 키면 작동하는데 msw component가 관여하지 않은것 같아서요~

 

두번째는 localhost 9090 외에 실제로 사용하는 api를 모킹하고 싶은데 어떻게 해야할지 고민이 됩니다.

예를 들어주소가 naver.com이라면 이 백엔드 api를 넣는 방법을 모르겠습니다.~!

 

감사합니다!

react next.js react-query next-auth msw

답변 1

0

제로초(조현영)

msw express 서버는 next server에서 요청보내는 걸 모킹하는 것이고요. MSWComponent는 브라우저에서 요청을 보내는 걸 모킹하는 것입니다.

handlers.get('네이버주소', ...) 하시면 모킹됩니다. 완전 쉽죠?

0

김치맨

질문이 전달이 잘 되지 않은 것 같아서 정리해서 다시 말씀드립니다~!

 

  1. msw component

     


    // require("@/app/shared/mocks/browser");
    이 구문을 주석 처리하여도 use client인 모듈(브라우저)에서 요청했을 때 응답이 잘오더라구여

    worker를 start 하지 않으면, 안되는 걸로 알고 있는데 현재 모듈에서 불러오고 있고 start하지 않아서 사용하지 않는다고 생각했습니다. 그리고 msw 브라우저는 실행 시에

    콘솔로그에는 mocking enabled라는 문구가 안뜨고 있어서 여쭤봤어요~!

     

     

  2. 백엔드 api가 네이버인 경우 모킹

     

    현재 express에서 9090으로 작성하였고, handler에서

    http.get("/api/trends",...)

    라고 작성하는 경우에 불러올 때,

    http://localhost:9090/api/followingPosts

    위처럼 불러오는데, 만약 naver를 그대로 쓰면

     

    http://localhost:9090/naver

    위처럼 되는게 아닌가여~?

    react였으면 강사님 말씀하신 것처럼 naver를 적었을텐데 강사님이 작성하신 방법에 맞추어서 해보려고 하니 안되더라구여.

    강사님이 작성하신 방법은 express 9090으로 설정되어있는데 localhost를 활용하여서 모킹하였기 때문에 localhost 외에는 다른 주소가 불가능하다고 생각했는데 제가 놓치고 있는 부분이 있을까요~?

 

0

제로초(조현영)

  1. 지금 어차피 localhost:9090이 응답을 다 받고 있어서 돌아가는 걸 겁니다. worker.start()를 빠뜨렸네요. useEffect에서나 @/mocks/browser 쪽에서 한 번 호출해야 합니다.

  2. naver주소를 넣으시면 됩니다 localhost:9090이 아니라요. http.get(http://naver.com) 이렇게요.

     

0

김치맨

 

브라우저로 모킹하면 시작 시에 텀이 있어서 얄려주신 express 활용해서 로컬호스트로 모킹 해보려구여! 빠르게 답변해주셔서 감사합니다 유투브랑 강의 잘보고 있어여!

캡처링부분 질문있습니다.

0

74

2

깃에 소스코드를 찾을 수 없습니다.

0

113

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

109

2

css 라이브러리 추천 부탁드립니다

0

140

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

130

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

171

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

108

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

131

2

next.js 에서 로그인에 관하여

0

138

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

97

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

229

2

fetch 캐싱과 revalidate 관련

0

84

2