서버 액션에서 msw의 핸들러를 호출하는 이유?
148
작성한 질문수 3
제가 알기로는 서버 액션은 현재 url, 강의 기준 /i/flow/signup으로 네트워크 요청이 일어나는거로 알고 있는데 msw의 핸들러로 fetch를 하신 이유가 궁금합니다. 작동하는 코드인가요?
const onSubmit = async (formData: FormData) => {
"use server";
let shouldRedirect = false;
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, {
method: "post",
credentials: "include",
body: formData,
});
console.log(res.status);
console.log(await res.json());
shouldRedirect = true;
} catch (error) {
console.error(error);
}
if (shouldRedirect) {
redirect("/home");
}
console.log("실행됨");
};위 코드는 SignupModal에서 msw의 핸들러로 form 제출 요청을 보내는 코드이고,
http.post(`${baseUrl}/api/users`, () => {
console.log("로그인 성공");
return HttpResponse.json({
message: "msw 성공",
});
}),이 코드는 핸들러 코드입니다. 요청 url인 http://localhost:3000/api/users로 폼 제출이 정상적으로 이루어지는지 궁금합니다.
답변 2
0
안녕하세요, 인프런 AI 인턴입니다. 처음끝님 질문에 대해 설명드리겠습니다.
MSW(모크 서비스 워커)는 API 요청을 모킹(mocking)하여 프론트엔드 개발 시 실제 백엔드 서버 없이 API 요청/응답을 테스트할 수 있게 해주는 도구입니다. 질문에서 언급하신 코드들은 예상대로 작동할 수 있습니다.
서버 액션에서 MSW의 핸들러를 호출하는 이유는, 개발 과정 중에 실제 백엔드 서버가 없거나, 테스트 중인 백엔드와 상호작용 대신, 클라이언트 측에서의 동작을 검증하고 싶을 때 이를 모킹하기 위함입니다.
코드 설명:
onSubmit함수:- 이 함수는 주어진
formData를 사용하여 서버로 데이터를 제출합니다.
fetch메서드를 통해process.env.NEXT_PUBLIC_BASE_URL로 지정된 서버에 API 요청을 보내고 있습니다.
- 이 과정에서 MSW가 설치 및 설정되어 있다면 해당 URL로의 요청을 가로채고, 적절한 핸들러를 통해 응답을 생성합니다.
- 이 함수는 주어진
핸들러 코드:
http.post(${baseUrl}/api/users, () => {...})는/api/users로의 POST 요청을 듣고, 해당 요청이 발생하면 “로그인 성공” 메시지와 함께 JSON 응답을 반환합니다.
- 이 핸들러는 요청을 가로채며, 프론트에서 벡엔드 상호작용 없이도 요청과 응답을 테스트할 수 있게 해줍니다.
작동 원리:
- 브라우저에서 서버 액션이 발생할 때, MSW는 클라이언트와 서버 간의 네트워크 요청을 중간에서 가로채어 지정된 응답을 제공합니다. 따라서 실제 URL로 데이터가 전송되는 것처럼 보이지만, 사실상 MSW가 그 요청을 처리하고 응답하는 것입니다.
- 브라우저에서 서버 액션이 발생할 때, MSW는 클라이언트와 서버 간의 네트워크 요청을 중간에서 가로채어 지정된 응답을 제공합니다. 따라서 실제 URL로 데이터가 전송되는 것처럼 보이지만, 사실상 MSW가 그 요청을 처리하고 응답하는 것입니다.
관련 질문 URL:
이러한 설정과 개념 이해는 UI 테스트 및 프론트엔드 개발 과정에서 무척 유용합니다. MSW 설정이 제대로 되어 있다면 폼 제출은 정상적으로 작동해야 하며, 콘솔 로그에서 상태 코드와 JSON 응답을 확인할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
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
132
2
next.js 에서 로그인에 관하여
0
139
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2