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

10 Nov 2023

axios

웹 애플리케이션을 개발하다 보면 서버로부터 데이터를 받아와야 할 때가 있습니다. 그런데 매번 서버에 요청을 보내면 성능 저하와 서버 부하가 발생할 수 있습니다. 이를 해결하기 위해 클라이언트 측에서 캐싱을 적용하여 이전에 받아온 데이터를 재사용하는 방법을 알아보겠습니다.

Axios란?

Axios는 자바스크립트에서 HTTP 클라이언트를 다루는 라이브러리입니다. 간단한 API와 다양한 기능을 제공하여 AJAX 요청을 보내고 응답을 처리할 수 있습니다. 이번 예제에서는 Axios를 사용하여 서버로부터 데이터를 받아오고 캐싱을 적용하는 방법을 알아보겠습니다.

설치

먼저 Axios를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 설치할 수 있습니다.

npm install axios

캐싱 적용하기

Axios를 사용하여 서버로부터 데이터를 받아올 때, 요청을 보내기 전에 캐싱된 데이터가 있는지 확인하고, 있다면 캐싱된 데이터를 반환하는 방식을 사용할 수 있습니다. 이를 위해 Axios 인스턴스를 생성하고, interceptors를 사용하여 요청과 응답을 가로채고 처리할 수 있습니다.

import axios from 'axios';

// Axios 인스턴스 생성
const instance = axios.create();

// 캐시 객체 생성
const cache = {};

// 요청을 가로채고 캐싱된 데이터가 있는지 확인
instance.interceptors.request.use(config => {
  const key = config.url;

  if (cache[key]) {
    config.headers['If-None-Match'] = cache[key].etag;
  }

  return config;
});

// 응답을 가로채고 캐싱
instance.interceptors.response.use(response => {
  const key = response.config.url;

  if (response.status === 200 && response.headers.etag) {
    cache[key] = {
      etag: response.headers.etag,
      data: response.data
    };
  }

  return response;
});

// 캐싱된 데이터를 사용하여 요청 보내기
instance.get('/api/data')
  .then(response => {
    // 데이터 사용
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위 예제에서는 Axios 인스턴스를 생성하고 interceptors를 사용하여 요청과 응답을 가로챘습니다. 요청을 보내기 전에 캐싱된 데이터가 있는지 확인하고, 캐싱된 데이터가 있다면 요청 헤더에 If-None-Match를 추가하여 서버에 데이터가 변경되지 않았는지 확인합니다. 응답이 304 상태 코드가 아니고 서버 응답에 ETag가 포함되어 있다면, 캐싱된 데이터를 업데이트합니다.

마무리

Axios를 사용하여 클라이언트 측에서 캐싱을 적용하는 방법을 알아보았습니다. 이를 통해 이전에 받아온 데이터를 재사용하여 성능을 향상시킬 수 있습니다. Axios의 다양한 기능을 활용하여 더욱 강력한 캐싱 전략을 구현할 수도 있으니 관심있는 개발자들은 공식 문서를 참고해보세요.

참고 문서:

Axios 공식 문서: https://axios-http.com/
Axios GitHub 저장소: https://github.com/axios/axios

#Axios #캐싱