개요

백엔드 API가 구현되기 전에도 프론트엔드 개발을 진행하기 위해 mock API를 구현한다. 서버로부터 실제 데이터를 받아오는 것처럼 동작하는 Mock(가짜) API로, 프론트엔드 개발 단계에서 실제 서버 없이도 데이터 요청과 응답을 시뮬레이션할 수 있다.

기존에는 fetch를 사용해 mock API를 구현했으나, axios와 axios-mock-adapter로 변경하고자 한다. fetch는 별도의 타입 정의나 인터셉터 설정이 어렵고, 응답을 가로채서 조작하는 기능도 제한적이다. 반면 axios-mock-adapter는 실제 HTTP 요청을 가로채서 미리 정의된 응답을 반환할 수 있고 TypeScript 지원과 함께 인터셉터, 타임아웃 등 axios의 다양한 기능을 그대로 활용할 수 있다는 장점이 있다.

특히 프로젝트에서 이미 axios를 사용하고 있어 기존 axios 설정(인스턴스, 인터셉터 등)을 그대로 활용할 수 있고, 추후 실제 API 연동 시에도 mock 관련 코드만 제거하면 되므로 코드 변경을 최소화할 수 있다는 이점이 있어 axios-mock-adapter 라이브러리로 진행하게 되었다.

axios-mock-adapter는 크게 두 단계로 동작한다. 먼저 초기 설정 단계에서는 애플리케이션의 진입점인 main.tsx에서 개발 환경을 확인하고 mock 설정을 초기화한다. 이때 필요한 mock 핸들러를 설정하고 테스트용 데이터를 준비한다.

그다음 요청 처리 단계에서 사용자의 행동에 따라 컴포넌트가 API를 호출하면, axios-mock-adapter가 이 HTTP 요청을 가로채서 미리 준비된 mock 데이터로 응답한다. 이렇게 반환된 데이터는 다시 컴포넌트로 전달되어 화면에 렌더링된다. 간단하지만 위 방식으로 실제 서버 없이도 API 통신 흐름을 시뮬레이션할 수 있다.

sequenceDiagram
    participant App as 진입점 (main.tsx)
    participant Instance as Axios 인스턴스 (instance.ts)
    participant Mock as Mock 설정 (mockSetup.ts)
    participant Handler as Posts 핸들러 (handlers/posts.ts)
    participant Data as Mock 데이터 (data/posts.ts)
    participant API as Posts API (posts.ts)
    participant Component as LatestSection 컴포넌트

    Note over App: 개발 환경 체크
    App->>Mock: Mock 설정 초기화
    Mock->>Handler: Posts 핸들러 설정
    Handler->>Data: Mock 데이터 불러오기

    Note over Component: 사용자 스크롤
    Component->>API: postsApi.fetchPosts() 호출
    API->>Instance: HTTP 요청 생성
    Instance->>Handler: Mock Adapter가 요청 가로채기
    Handler->>Data: 페이지 데이터 요청
    Data-->>Handler: 데이터 반환
    Handler-->>Instance: Mock 응답 반환
    Instance-->>API: 데이터 전달
    API-->>Component: 게시글 렌더링

사진과 함께 글을 읽으면 머릿속에 더 잘 그려질 것이다.

요구 사항

라이브러리 설치 및 설정

main.tsx