[typescript] 타입스크립트에서 REST API 호출 시 캐시 제어 방법

12 Dec 2023

typescript

웹 애플리케이션을 개발할 때, 서버에서 데이터를 가져와야 하는 경우가 많습니다. 이때 캐시를 사용하면 이전에 가져온 데이터를 재사용하여 응답 시간을 단축하고 서버의 부하를 줄일 수 있습니다. 타입스크립트에서 REST API를 호출하면서 캐시를 제어하는 방법을 알아보겠습니다.

1. HTTP 캐시 헤더 활용

HTTP 요청과 응답 헤더에 캐시 제어를 위한 여러 가지 옵션이 있습니다. 이 중에서 Cache-Control 헤더를 활용하여 캐싱을 제어할 수 있습니다.

import axios from 'axios';

async function fetchData() {
  const response = await axios.get('https://api.example.com/data', {
    headers: {
      'Cache-Control': 'no-cache'
    }
  });

  return response.data;
}

위 예제에서는 Cache-Control: no-cache 헤더를 사용하여 캐싱을 방지하고 서버로부터 데이터를 가져옵니다.

2. 클라이언트 측 캐시 활용

클라이언트 측에서 캐싱을 활용하여 이전에 가져온 데이터를 재사용할 수 있습니다. 이를 통해 네트워크 요청을 최소화하고 응답 시간을 단축할 수 있습니다.

const CACHE: Record<string, any> = {};

async function fetchAndCacheData(url: string) {
  if (CACHE[url]) {
    return CACHE[url];
  }

  const response = await axios.get(url);
  CACHE[url] = response.data;
  return CACHE[url];
}

위 예제에서는 CACHE 객체를 활용하여 데이터를 캐싱하고, 동일한 URL에 대한 요청이 들어올 때 이전에 가져온 데이터를 반환합니다.

3. 서비스 워커를 이용한 캐시 활용

서비스 워커를 활용하면 웹 애플리케이션에서 네트워크 요청을 가로채고 캐싱할 수 있습니다. 이를 통해 오프라인 상황에서도 데이터를 제공할 수 있습니다.

// Service worker registration
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

// Fetch data through service worker
async function fetchDataWithServiceWorker(url: string) {
  const response = await fetch(url, { cache: 'force-cache' });
  return response.json();
}

위 예제에서는 서비스 워커를 등록하고, fetch 함수를 통해 옵션을 설정하여 캐싱된 데이터를 가져옵니다.

캐시를 활용하여 REST API 호출을 최적화하는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

참고 문헌: