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

처음끝

작성한 질문수

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

[Next 15] Form 컴포넌트

서버 액션에서 msw의 핸들러를 호출하는 이유?

작성

117

제가 알기로는 서버 액션은 현재 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로 폼 제출이 정상적으로 이루어지는지 궁금합니다.

react next.js react-query next-auth msw

답변 2

제로초(조현영)

지식공유자

서버액션을 거쳐서 백엔드에 요청을 보내는 겁니다. 현재는 msw가 백엔드 요청을 가로채게 해놨으므로 msw 핸들러가 호출됩니다.

인프런 AI 인턴

안녕하세요, 인프런 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: