axios-mock-adapter 사용해보기

최근에 진행중인 프로젝트에서 새로 도입해서 사용해 보는 것 중 axios-mock-adapter 라는 라이브러리가 있다. api의 임시 응답값을 개발시에 사용할 수 있도록 도와주는 라이브러리이다.

axios-mock-adapter를 도입하게 된 이유

1. 네트워크가 마비되는 상황이 오면 그 상황에 구애받지 않고 개발을 진행할 수 있다.
2. 원하는 상황을 재연하기 쉽다.
   가끔 고객사에서 화면과 관련된 버그 리포트를 받는데, 데이터를 바꿔치기만 하면 해당 상황을 쉽게 재현할 수 있다.
3. storybook에서 활용하기 위해서
   이번 프로젝트는 storybook도 사용하고 있는데, mocking을 사용하지 않으면 데이터를 표현하는 컴포넌트는 반드시 데이터를 props로 넘겨받는 형태가 되어야 story 문서를 작성할 수 있다.
   하지만 mocking 시스템이 구축되어 있다면 그 상황에서 좀 더 자유로워질 수 있다.
4. 원하는 에러 상황을 재현할 수 있다.

설정 방법 (axios + axios-mock-adapter)

1. 라이브러리 설치

   npm i axios
   
    npm i axios-mock-adapter --save-dev

2. mocking 모드 script 추가
   mocking 용 npm script를 추가한다.
   mocking data를 사용하고 싶을때는 해당 script를 사용하고, 일반 개발 환경에서는 api 통신을 사용하기 위해 mode를 분리했다.

// package.json
  {
    // ...
    "scripts" : {
      "start:mock" : "vite --mode mock
    }
  }

3. axios instance와 mocking adapter 객체 생성

    // src/api/insatnce.ts

    export const baseURL = import.meta.env.VITE_MOCKING_USE == true ? "" : apiServerUrl

    const instance = axios.create({
      baseURL,
    })

// src/api/mock/index.ts
import {instance} from "../instance.ts";

export const mock = import.meta.env.VITE_MOCKING_USE == true ? new AxiosMockAdapter(instance)

4. 실제 사용할 api fetch 함수 추가

// src/api/users.ts
export function getUsers(){
  const {data} =
    await instance.get<AxiosResponse<{id: number; name: string}[]>>(
      "/api/users",
    )
  return data
} 

5. api 함수와 똑같은 경로를 가지도록 mocking data 추가

// src/api/mock/users.mock.ts
import {mock} from "."

if (mock) {
  mock.onGet("/api/users").reply(200, {
    data: [
      {id: 1, name: "Test User1"},
      {id: 2, name: "Test User2"},
    ],
  });
}

도입 후기

장점

에러 상황을 재현할 때 데이터를 살짝만 바꿔서 바로 확인해 볼 수 있어서 정말 간편하다.
컴포넌트 내부적으로 api 처리 로직을 가지고 있는 경우도 문제 없이 story로 표현할 수 있어서 정말 좋다.

단점

수정, 삭제와 같은 mutation 동작들을 mocking은 mocking 데이터를 어느정도 구조화 해야된다.
api 하나 수정할때 mocking 데이터까지 같이 고쳐야해서 살짝 번거롭다.

마치며

사실 단점이라고 적긴 했지만 저런 단점을 커버할 수 있을 정도로 장점이 더 크기 때문에, 개인적으로는 안 쓸 이유가 없는 라이브러리 2순위가 되었다. storybook을 쓴다면 더더욱 써야하는 라이브러리라고 생각한다.