Axios를 사용하여 클라이언트 측에서 데이터 캐싱하기

10 Nov 2023

javascript

많은 웹 애플리케이션이 서버에서 데이터를 가져와서 클라이언트에 표시합니다. 이 때, 매번 같은 데이터를 서버에 요청하는 것은 비효율적입니다. 이러한 상황에서 Axios를 사용하여 클라이언트 측에서 데이터를 캐싱할 수 있습니다. 이를 통해 요청을 줄이고 성능을 향상시킬 수 있습니다.

Axios는 JavaScript에서 많이 사용되는 HTTP 클라이언트 라이브러리입니다. 이를 사용하여 서버에 HTTP 요청을 보내고 응답을 받을 수 있습니다. 데이터를 캐싱하기 위해 Axios의 인터셉터(interceptor) 기능을 활용할 수 있습니다.

인터셉터는 Axios의 요청과 응답에 대해 중간에서 작업을 수행할 수 있는 기능입니다. 이를 사용하여 서버로의 요청을 가로채고 캐싱된 데이터를 반환할 수 있습니다. 만약 캐싱된 데이터가 없을 경우에는 서버로 요청하고 응답을 캐싱합니다.

아래는 Axios를 사용하여 클라이언트 측에서 데이터를 캐싱하는 예제 코드입니다.

import axios from 'axios';

const cache = {};

axios.interceptors.request.use((config) => {
  // 요청을 가로채서 캐시된 데이터가 있는지 확인
  const cachedData = cache[config.url];
  if (cachedData) {
    // 캐시된 데이터가 있으면 응답을 변경하여 반환
    return Promise.resolve({
      data: cachedData
    });
  }
  return config;
});

axios.interceptors.response.use((response) => {
  // 응답을 받으면 데이터를 캐싱
  const { config, data } = response;
  cache[config.url] = data;
  return response;
});

// 데이터를 가져오는 함수
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// 데이터 요청
fetchData();

이 예제에서는 Axios의 interceptors를 사용하여 요청과 응답을 가로채고 캐싱된 데이터를 반환하고 저장합니다. 캐시된 데이터가 없을 경우에는 서버에 요청하고 응답을 캐싱합니다.

Axios를 사용하여 클라이언트 측에서 데이터를 캐싱하는 방법에 대해 알아보았습니다. 이를 통해 요청을 줄이고 애플리케이션의 성능을 향상시킬 수 있습니다.

#References

Axios GitHub Repository