Axios는 자바스크립트에서 HTTP 요청을 보내는 데 사용되는 인기있는 라이브러리입니다. 이 라이브러리는 간편한 API와 다양한 기능을 제공하여 개발자들이 효율적인 네트워크 통신을 구현할 수 있도록 도와줍니다. 캐싱은 이러한 네트워크 통신을 최적화하고 성능을 향상시키는 중요한 요소입니다. 이번 블로그 포스트에서는 Axios와 함께 사용할 수 있는 캐싱 방법과 기법에 대해 알아보겠습니다.
1. 기본적인 캐싱 제어
Axios는 기본적으로 요청과 응답을 캐싱하지 않습니다. 하지만 ‘Cache-Control’ 헤더를 사용하여 캐싱 제어를 추가할 수 있습니다. 이를 위해 다음과 같은 방법을 사용할 수 있습니다:
axios.get('/api/data', {
headers: { 'Cache-Control': 'max-age=3600' }
})
위의 예제에서는 /api/data 엔드포인트에 GET 요청을 보냅니다. 요청 헤더에 ‘Cache-Control’ 헤더를 추가하여 캐싱 시간을 3600초로 설정합니다. 이를 통해 브라우저는 해당 응답을 캐싱하고 해당 시간 동안 캐시된 데이터를 사용하게 됩니다.
2. 인터셉터를 사용한 캐싱
인터셉터는 Axios에서 요청이나 응답을 가로채는 기능을 제공하는 도구입니다. 인터셉터를 사용하여 캐싱을 구현할 수도 있습니다. 예를 들어, 다음은 GET 요청의 응답을 캐싱하는 인터셉터의 예제입니다:
const cache = {};
axios.interceptors.request.use((config) => {
if (config.method === 'get') {
const key = JSON.stringify(config.url);
if (cache[key]) {
return Promise.resolve(cache[key]);
}
}
return config;
});
axios.interceptors.response.use((response) => {
if (response.config.method === 'get') {
const key = JSON.stringify(response.config.url);
cache[key] = response;
}
return response;
});
위의 예제에서는 GET 요청에 대해 인터셉터를 사용합니다. 요청이 발생할 때마다 해당 URL을 키로 사용하여 캐시 객체에 저장하고 응답이 도착했을 때 해당 응답을 캐시 객체에 저장합니다. 이후 동일한 요청이 발생하면 인터셉터에서 캐시된 응답을 반환합니다.
3. 외부 라이브러리 사용
Axios와 함께 캐싱 기능을 제공하는 많은 외부 라이브러리도 있습니다. 이러한 라이브러리는 캐싱 로직을 미리 구현하여 사용자가 간편하게 캐싱 기능을 적용할 수 있도록 도와줍니다. 예를 들어, axios-cache-adapter 라이브러리는 Axios에 캐싱 기능을 추가하는 데 유용한 옵션 및 기능을 제공합니다.
import axios from 'axios';
import { setupCache } from 'axios-cache-adapter';
const cache = setupCache({
maxAge: 15 * 60 * 1000 // 15분
});
const api = axios.create({
adapter: cache.adapter
});
api.get('/api/data').then((response) => {
console.log(response.data);
});
위의 예제에서는 axios-cache-adapter를 이용하여 Axios의 캐싱 기능을 활성화합니다. setupCache 함수를 사용하여 캐시 설정을 만든 다음, adapter 옵션을 통해 Axios 인스턴스에 캐시를 적용합니다. 이제 GET 요청을 보낼 때 해당 응답은 캐시로부터 반환됩니다.
결론
Axios와 함께 캐싱을 사용하여 네트워크 통신을 최적화할 수 있습니다. 이 블로그 포스트에서는 기본적인 캐싱 제어, 인터셉터를 사용한 캐싱, 그리고 외부 라이브러리를 활용한 캐싱 기법에 대해 알아보았습니다. 캐싱을 통해 불필요한 네트워크 요청을 줄이고 성능을 향상시킬 수 있으므로, Axios와 적절한 캐싱 기법을 활용하여 개발을 진행해 보시기 바랍니다.