[typescript] 타입스크립트에서 Axios를 이용하여 요청에 대한 캐싱 및 저장소 관리하기

22 Dec 2023

typescript

웹 애플리케이션을 개발하다 보면 API 요청에 대한 캐싱(caching)이 필요한 경우가 있습니다. 캐싱은 반복적인 요청을 줄이고 응답 속도를 향상시키는 데 도움이 됩니다. 이번 포스트에서는 타입스크립트에서 Axios를 이용하여 요청에 대한 캐싱 및 저장소 관리하는 방법에 대해 알아보겠습니다.

Axios 및 캐시 라이브러리 설치

먼저, Axios와 캐시 라이브러리를 설치해야 합니다. Axios는 HTTP 클라이언트 라이브러리이며, axios-cache-adapter는 Axios 요청에 대한 캐싱을 지원하는 라이브러리입니다.

npm install axios axios-cache-adapter

캐시 설정

Axios 캐시 어댑터를 이용하여 간단히 캐시를 설정할 수 있습니다. 예를 들어, LocalStorage를 캐시 스토어로 사용하는 방법은 다음과 같습니다.

import axios from 'axios';
import axiosCacheAdapter from 'axios-cache-adapter';

const adapter = axiosCacheAdapter.setupCache({
  maxAge: 15 * 60 * 1000,
  store: {
    get: (key: string) => Promise.resolve(window.localStorage.getItem(key)),
    set: (key: string, value: any) => Promise.resolve(window.localStorage.setItem(key, value)),
    reset: () => Promise.resolve(window.localStorage.clear())
  }
});

const api = axios.create({
  adapter
});

api.get('/data'); // 요청이 캐시에 저장됨

위 코드에서 maxAge는 캐시의 최대 지속 시간(밀리초)을 나타내며, store는 캐시 저장소로, 여기서는 LocalStorage를 사용했습니다.

커스텀 저장소 구현

원하는 경우, 커스텀 저장소를 구현하여 캐시 관리를 더욱 효율적으로 할 수 있습니다. 예를 들어, 메모리 캐시 또는 Redis를 사용할 수 있습니다.

class CustomCacheStore {
  cache: Record<string, any> = {};

  get(key: string) {
    return Promise.resolve(this.cache[key]);
  }

  set(key: string, value: any) {
    this.cache[key] = value;
    return Promise.resolve();
  }

  reset() {
    this.cache = {};
    return Promise.resolve();
  }
}

const customAdapter = axiosCacheAdapter.setupCache({
  maxAge: 15 * 60 * 1000,
  store: new CustomCacheStore()
});

const customApi = axios.create({
  adapter: customAdapter
});

// customApi.get('/data');

결론

타입스크립트에서 Axios를 이용하여 API 요청에 대한 캐싱 및 저장소 관리는 간단하게 구현할 수 있습니다. 캐싱을 통해 서버 요청 횟수를 줄이고 성능을 향상시킬 수 있으며, 적절한 저장소 선택과 커스터마이징을 통해 프로젝트 요구에 맞는 캐시 시스템을 구축할 수 있습니다.

참고: axios-cache-adapter GitHub