프론트엔드 아키텍처에서 API 통신은 단순히 데이터를 가져오는 행위를 넘어, 불확실한 네트워크 환경 속에서 데이터의 무결성을 보장하고 통신의 가용성을 주도적으로 통제하는 과정이다. Next.js 공식 문서 역시 서버 측 호출 시 fetch 사용을 권장하며, 프레임워크의 핵심 예제들 또한 fetch를 표준으로 삼고 있다. muroom 프로젝트는 이러한 기술적 지향점에 발맞추어 기성 라이브러리인 Axios에 의존하지 않고, 브라우저와 Node.js 표준인 Fetch API를 래핑한 customFetch 를 직접 설계하여 통신의 신뢰도를 높였다.

설계 원칙: 표준에 대한 신뢰와 제어권의 내재화

1. 서버와 클라이언트의 일관성: Next.js 15 환경은 서버(RSC)와 클라이언트 간의 경계가 유연하다. 별도의 어댑터 없이 양쪽 환경에서 네이티브하게 동작하는 fetch는 환경에 구애받지 않는 최적의 선택지였다.
2. Minimalism & Control: 프로젝트에 꼭 필요한 기능(Timeout, Interceptor, GA Logging)만 선별하여 담고자 했다. 불필요한 의존성을 제거하고 네트워크 생명주기 전체를 직접 통제하는 것이 시스템 안정성 측면에서 더 효율적이라 판단했다.

📸 범용 라이브러리의 복잡한 내부 구조와 대비되는, Native Fetch 기반의 직관적인 customFetch 흐름도

구현: muroom 프로젝트의 통신 기반, customFetch

설계 원칙을 실현하기 위해 구현된 customFetch는 단순한 래퍼를 넘어 타임아웃 제어, 환경별 주소 분기, 표준화된 에러 처리 로직을 내재화했다.

import { BE_BASE_URL } from '@/config/constants';
import { ApiRequestError, type ApiResponse } from '@/types/api';
import