#1. Request intercept하기 (composable)

Axios 인스턴스는 한번 만들어서 여러 페이지에서 재사용되기에, composable로 생성했다. *상태 저장 로직를 캡슐화하고 재사용하는 함수

// composables/useAxios.ts
export function useAxios() {
    const { SERVER_MODE, BASE_URL } = useRuntimeConfig().public;

    const API = axios.create({
        baseURL: BASE_URL,
    });

    return API;
}

여기서 액세스 토큰이 있으면 헤더에 자동으로 넣어주게끔 request interceptor도 추가해 두었다.

API.interceptors.request.use(
        (config) => {
            const { accessToken } = useUserStore();

            if (accessToken) {
                config.headers["Authorization"] = `Bearer ${accessToken}`;
            }
            return config;
        },
        (error) => {
            return Promise.reject(error);
        },
    );

#2. BaseResponse 정의하기

인턴이나 여러 프로젝트를 하면서 API 시트는 개발하면서 생각보다… 더러워지고… 최신화도 되지 않는 상황들을 겪었었는데, 이때 API 호출 관련 부분이라도 typescript를 사용하여 모델로 정의해 두면 처음 투입되는 작업자가 파악하기에 & 에러 잡기에 훨씬 수월하다는 점을 깨닫게 되었다.

interface BaseResponse<T> {
    success: boolean;
    status_code: number;
    message: string;
    data: T;
}

const GET = async <T>(
    url: string,
    config?: AxiosRequestConfig,
): Promise<BaseResponse<T>> => {
    const response: AxiosResponse<BaseResponse<T>> = await API.get(
        url,
        config,
    );
    return response.data;
};

특히, 타입스크립트는 컴파일 시에 바로 문제가 되는 부분을 파악할 수 있어서 좋았다.