Axios를 이용해서 캐시 제어하기

Axios는 HTTP 클라이언트 라이브러리로, 요청에 대한 캐싱을 제어할 수 있는 기능을 제공합니다. 우리는 이를 활용하여 서버에서 온 응답이 변경되었을 때, 클라이언트에서 해당 응답을 새로 받아오도록 할 것입니다.

캐시 무효화(Cache Invalidation)

우선, 서버 응답이 변경되었을 때 클라이언트에서 해당 응답을 갱신하기 위해, Cache-Control 헤더를 이용하여 응답의 캐시 유효기간을 갱신할 수 있습니다.

예를 들어, 서버 응답의 캐시 유효 시간을 0으로 설정하여 응답을 캐시에 저장하지 않도록 할 수 있습니다. 이를 통해 클라이언트에서는 항상 새로운 응답을 받아올 수 있게 됩니다.

axios.get('/api/data', {
  headers: {
    'Cache-Control': 'no-cache'
  }
})

위 예제에서 no-cache 값은 캐시를 사용하지 않도록 하는 역할을 합니다.

캐시 삭제(Cache Clear)

또한, 클라이언트에서는 axios-cache-adapter와 같은 라이브러리를 사용하여 캐시를 직접적으로 제어할 수도 있습니다. 이를 통해 캐시를 명시적으로 삭제하고 새로운 요청을 보낼 수 있습니다.

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

// Create `axios` instance with pre-configured `axios-cache-adapter` using a pre-defined key
const cache = setupCache({
  maxAge: 15 * 60 * 1000
});

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

// ...

// Clear cache for a specific URL
cache.store.delete('/api/data');

// Make a new request to get fresh data
api.get('/api/data');

결과

Axios를 이용하여 요청에 대한 캐시를 무효화하는 방법에 대해 알아봤습니다. 이러한 캐시 제어 기능을 적절히 활용하여, 클라이언트에서는 항상 최신 데이터를 받아올 수 있게 됩니다.

컴퓨터 공학에서 캐싱과 관련된 토픽은 광범위한 주제이며, 이러한 접근 방법 외에도 다양한 방법들이 존재합니다. 더 많은 정보를 원한다면, Axios 및 캐시 제어에 대한 더 많은 자료를 찾아보시기 바랍니다.

이상으로 오늘은 타입스크립트와 Axios를 이용하여 요청에 대한 캐시를 무효화하는 방법에 대해 알아보았습니다. 감사합니다!