Axios는 자바스크립트에서 가장 인기있는 HTTP 클라이언트 라이브러리 중 하나입니다. 이 라이브러리는 간단하고 직관적인 API를 제공하여 HTTP 요청을 보내고 응답을 받을 수 있습니다. 이번에는 Axios와 함께 사용할 수 있는 캐싱 및 옵션 설정 방법을 알아보겠습니다.

캐싱 설정

Axios는 기본적으로 캐싱을 지원하지 않지만, 우리는 다른 라이브러리를 사용하여 캐싱 기능을 추가할 수 있습니다. 예를 들어, axios-cache-adapter라는 라이브러리를 사용하여 Axios에 캐싱 기능을 추가할 수 있습니다.

먼저, axios-cache-adapter 라이브러리를 설치해야 합니다.

npm install axios-cache-adapter

다음으로, Axios 인스턴스를 만들고 캐싱 옵션을 설정해야 합니다.

import axios from 'axios';
import { setupCache } from 'axios-cache-adapter';

const cache = setupCache({
  maxAge: 15 * 60 * 1000, // 캐시 만료 시간을 15분으로 설정
});

const axiosInstance = axios.create({
  adapter: cache.adapter,
});

export default axiosInstance;

이제 axiosInstance를 사용하여 HTTP 요청을 보내면, 해당 요청은 캐시에 저장되고 동일한 요청이 다시 발생하면 캐시에서 응답을 반환합니다. 만료 시간이 지나면 자동으로 캐시가 갱신됩니다.

옵션 설정

Axios는 다양한 옵션을 제공하여 HTTP 요청을 세부적으로 제어할 수 있습니다. 몇 가지 일반적인 옵션을 살펴보겠습니다.

• headers: HTTP 요청 헤더를 설정할 수 있습니다. 예를 들어, 인증 토큰을 포함한 헤더를 추가할 수 있습니다.

axios.get('/api/some-resource', {
  headers: {
    Authorization: 'Bearer my-token',
  },
});

• timeout: 요청이 일정 시간 초과될 경우 에러를 반환합니다.

axios.get('/api/some-resource', {
  timeout: 5000, // 5초로 타임아웃 설정
});

• params: 쿼리 매개변수를 설정할 수 있습니다.

axios.get('/api/some-resource', {
  params: {
    page: 1,
    limit: 10,
  },
});

• onUploadProgress 및 onDownloadProgress: 업로드 또는 다운로드 진행률을 추적할 수 있습니다.

axios.post('/api/upload', formData, {
  onUploadProgress: (progressEvent) => {
    const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percentage}%`);
  },
});

이 외에도 Axios는 여러 가지 옵션을 지원하므로 필요에 따라 공식 문서를 참조하시기 바랍니다.

참고 자료

• Axios 공식 문서
• axios-cache-adapter GitHub 레포지토리

Axios를 사용하여 HTTP 요청을 보낼 때는 캐싱과 옵션 설정을 통해 보다 효율적으로 작업할 수 있습니다. 위에서 제시한 방법을 참고하여 적절하게 활용해보세요!