인프런 커뮤니티 질문&답변

김치맨님의 프로필 이미지

작성한 질문수

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

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

해결된 질문

24.03.14 23:30 작성

·

342

0

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

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

 

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

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

 

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

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

 

감사합니다!

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 03. 14. 23:37

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

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

김치맨님의 프로필 이미지
김치맨
질문자

2024. 03. 15. 00:25

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

 

  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 외에는 다른 주소가 불가능하다고 생각했는데 제가 놓치고 있는 부분이 있을까요~?

 

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 03. 15. 00:53

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

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

     

김치맨님의 프로필 이미지
김치맨
질문자

2024. 03. 15. 01:17

 

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