Axios는 웹 애플리케이션에서 HTTP 요청을 처리하는 데 도움이 되는 JavaScript 라이브러리입니다. 이를 통해 클라이언트 측에서 서버와의 통신이 간편해지고, 데이터를 효율적으로 가져올 수 있습니다. 이번 글에서는 Axios를 사용하여 클라이언트 측에서 데이터를 캐싱하는 방법을 알아보겠습니다.

1. 데이터 캐싱이란?

데이터 캐싱은 이전에 요청한 데이터를 저장해 놓고, 나중에 동일한 요청이 들어올 때 저장된 데이터를 사용하는 기술입니다. 이를 통해 불필요한 서버 요청을 줄이고, 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

2. Axios로 데이터 가져오기

Axios를 사용하여 서버에서 데이터를 가져오는 코드는 다음과 같습니다.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    // 서버에서 받은 데이터를 처리하는 로직
  })
  .catch(error => {
    // 에러 처리 로직
  });

Axios의 get 메서드를 사용하여 /api/data 엔드포인트로 GET 요청을 보내고, 서버에서 받은 응답을 처리하는 로직을 작성합니다.

3. 데이터 캐싱하기

Axios는 자체적으로 데이터를 캐싱하는 기능을 제공하지 않습니다. 하지만 우리는 이를 직접 구현할 수 있습니다. 아래 코드는 Axios를 확장하여 데이터를 캐싱하는 코드입니다.

import axios from 'axios';

const cache = {};

const axiosWithCache = axios.create({
  baseURL: '/api',
});

axiosWithCache.interceptors.request.use(config => {
  const { method, url } = config;
  if (method === 'get') {
    if (cache[url]) {
      return Promise.resolve(cache[url]);
    }
  }
  return config;
});

axiosWithCache.interceptors.response.use(response => {
  const { config, data } = response;
  if (config.method === 'get') {
    cache[config.url] = data;
  }
  return response;
});

export default axiosWithCache;

위 코드에서는 axiosWithCache라는 Axios 인스턴스를 생성하고, interceptors를 사용하여 요청과 응답을 가로채서 캐싱을 처리합니다. interceptors.request에서는 GET 요청을 가로채어 캐시에 저장된 데이터를 반환하고, interceptors.response에서는 GET 요청의 응답을 받아와 캐시에 저장합니다.

4. 캐싱된 데이터 사용하기

Axios로 캐시된 데이터를 사용하는 코드는 일반적인 Axios 코드와 동일합니다. GET 요청을 보내고, 캐시된 데이터가 있으면 이를 사용하고, 캐시된 데이터가 없으면 서버에서 데이터를 가져옵니다.

import axiosWithCache from './axiosWithCache';

axiosWithCache.get('/data')
  .then(response => {
    const data = response.data;
    // 캐시된 데이터 또는 서버에서 받은 데이터를 처리하는 로직
  })
  .catch(error => {
    // 에러 처리 로직
  });

결론

Axios를 사용하여 클라이언트 측에서 데이터를 캐싱하는 방법을 알아보았습니다. 캐싱을 통해 불필요한 서버 요청을 줄이고, 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 참고로 이 예제는 단순한 데이터 캐싱 방법이며, 상황에 따라 더 복잡한 캐싱 전략을 구현해야 할 수도 있습니다.