[ Remix ] fetch로 서버 사이드 액션 호출 테스트

요즘 회사에서 프로젝트를 진행할 때 주로 Remix 풀스택 프레임워크를 사용하고 있다.

그런데 사용하면서 불편한 점이 하나 있다.바로 서버 사이드 액션을 호출할 때 반드시 action 함수를 사용해야 한다는 점이다.

물론 Remix의 구조는 장점도 많지만,
개인적으로는 그 장점을 상쇄할 만큼 불편한 부분도 있다.
예를 들어, 복잡한 코드 흐름 속에서 useFetcher()를 사용한 뒤,
그 상태 값을 useEffect 내부에서 다시 검증해야 한다는 점이 매우 번거로웠다.

간단한 프로젝트라면 상관없지만,
파일 하나에 코드가 길어질수록 A 함수에서 서버에 요청을 보내고,
응답을 B 영역(useEffect 등)에서 따로 처리해야 하는 구조는
코드의 흐름이 끊겨 보여서 읽고 쓰기 모두 어려웠다.

 

그러다가 문득 생각했다.

action 함수도 결국 내부적으로는 fetch가 래핑돼 있을 텐데,
그렇다면 직접 fetch로 호출해도 되지 않을까?

테스트를 해봤고, 실제로 클라이언트 측에서 fetch를 사용해도
Remix의 서버 사이드 액션을 동일하게 호출할 수 있었다.

🧪 테스트 방식

1. 서버 사이드 액션 생성

app/routes/api.test.ts

import { json } from "@remix-run/react";

export const action = async () => {
	console.log("hello world in server");
	return json("hello world");
};

2. 클라이언트 사이드에서 호출

useEffect(() => {
    const test = async () => {
        const res = await fetch("/api/test", {
            method: "POST",
        });

        console.log(await res.json());
    };

    test();
}, []);

 

action을 사용하지 않고도 서버 사이드 액션을 성공적으로 호출할 수 있다.