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

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

안녕하세요, 인프런 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가 그 요청을 처리하고 응답하는 것입니다.

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

코드 설명:

관련 질문 URL: