Inflearn Community Q&A
asked
[next15] msw 질문드립니다.
Written on
·
351
0
기존에 강의로 msw로 코드만들었던 수강생입니다.
여러개의 질문과 에러?라고할만한 사항이 있는데요.
기존강의에는 http.js 파일에서 express 기반으로 서버를 만들어서 9090포트를 사용했는데요. 새로 강의하신 내용에서는 express를 배제하고 코드가 간결하게 바꿨는데 이렇게 바꾼 내용의 대해서 조금 설명 부탁드립니다. 간략히 알기로는 기존 MSW는 클라이언트(브라우저)에서 동작하기 때문에 서버에서 html 요청이 발생하기 때문에 요청을 가로챌수 없기 때문에 express썻다고 알고있습니다. 이게 맞을까요? 그리고 바뀐코드는 이런문제가 해결이 된건가요?
1번의 문제가 해결되었다면, 기존의 9090 서버포트와 더불어 npm run mock를 실행하여 서버를 동작했던걸로 알고있는데 이기능은 필요한가요?
msw 세팅과 .env 강의부분에서 환경변수를 api에 직접 넣도록 수정했는데, 이전꺼랑 차이가 뭔가요? 추가로 클라이언트컴포넌트에서는 환경변수가 콘솔로 읽히고있는데 handler에서는 읽히지 않고있습니다. 코드는 이전강의 코드(백엔드 db연결전까지)와 같고요. 추가로 nextjs나 react를 버전업을 하지는 않았습니다. 이유가뭔지 유추해주실수있을까요?
Answer 2
0
일단 넥스트 14로 하고계신다면 15로 올리셔야 합니다. 리액트는 19로요.
넥스트 14에서는 브라우저 msw가 안 돌아가는 문제가 있었습니다. 그래서 서버 msw를 켜서 서버 msw에 요청을 보냈습니다. 그런데 넥스트15에서 이 문제가 해결되어 서버 msw가 필요없어졌고요. ssr용 msw로 대체된 것입니다. 이 때 msw가 더이상 /api로 시작하는 주소를 인식하지 못하게 되어 앞에 baseUrl을 붙여주어야 합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
Choi 님의 질문에 대해서 명확한 답변을 제공하기 위해 몇 가지 유사한 질문과 답변 링크를 찾아보았습니다. 각 질문은 MSW(Mock Service Worker)의 실행 방식과 관련된 문제들을 다루고 있으며, Choi 님의 고민을 해결하는 데 도움이 될 수 있습니다.
msw 관련해서 궁금증이 있습니다.
이 질문에서는 MSW의 서버와 클라이언트 모킹 방식의 차이에 대해 논의합니다. MSW는 기본적으로 클라이언트 측에서 동작하며, express 서버를 사용해 SSR(Server Side Rendering) 환경에서도 모킹할 수 있었습니다. 최근 업데이트에서는 이러한 방식이 변경되어 express가 불필요해졌을 수 있습니다. 이는 최신 MSW 버전의 기능 개선이나 설정 변경에 의해 가능해졌을 수 있습니다.npm run mock의 실행 필요성에 대해 질문하셨는데, 이는 기존에는 SSR 환경에서 요청을 모킹하기 위해 express 서버가 필요했기 때문입니다. 최신 강의에서는 환경설정이 변경되어 이러한 실행이 필요 없을 수 있으니, 강의에서 제공되는 최신 실행 방법을 참고하세요.환경변수를 API에 직접 넣는 방식의 변경 및
.env파일 관련 문제는 주로 빌드 및 런타임 환경에서의 설정 차이에서 비롯됩니다. 클라이언트 컴포넌트에서 환경변수가 읽히고, 핸들러에서 읽히지 않는 것은 SSR과 CSR(Client Side Rendering)의 차이에서 발생할 수 있습니다. 환경변수 설정가 차이가 발생하지 않도록.env파일과 next.config.js 등이 올바르게 설정되었는지 확인해 보세요.
각 링크는 관련 문제에 대한 깊이 있는 통찰력을 제공하며, Choi 님의 질문에 대한 해결책을 찾는 데 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.