최신 웹 애플리케이션에서는 데이터를 동적으로 가져오기 위해 자바스크립트 fetch API를 자주 사용합니다. 그러나 매번 데이터를 새로 가져오는 것은 비효율적일 수 있습니다. 이러한 상황에서 데이터를 캐싱하여 다음 요청에 재사용할 수 있도록 하는 것이 좋습니다. 이번 블로그에서는 자바스크립트 fetch API를 사용하여 데이터를 캐싱하는 방법에 대해 알아보겠습니다.

데이터 캐싱하기

다음은 자바스크립트 fetch API를 사용하여 데이터를 캐싱하는 간단한 예제입니다. 이 예제는 데이터를 가져와서 캐시에 저장하고, 다음에 같은 요청을 수행할 때는 캐시된 데이터를 반환합니다.

const cache = {};

function fetchData(url) {
  if (cache[url]) {
    return Promise.resolve(cache[url]);
  } else {
    return fetch(url)
      .then(response => response.json())
      .then(data => {
        cache[url] = data;
        return data;
      });
  }
}

// 데이터 요청 예시
fetchData('https://api.example.com/data')
  .then(data => {
    // 데이터를 사용하는 코드 작성
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

위의 코드에서 cache라는 객체는 URL을 키로 사용하여 데이터를 캐싱하는 데 사용됩니다. fetchData 함수는 주어진 URL에 대한 데이터를 가져오기 전에 먼저 캐시를 확인하고, 데이터가 존재하는 경우에는 바로 캐시된 데이터를 반환합니다. 그렇지 않은 경우에는 fetch 함수를 사용하여 데이터를 요청하고 응답을 JSON 형식으로 변환한 다음, 캐시에 저장하고 데이터를 반환합니다.

캐싱 시간 제한 설정하기

데이터 캐싱은 일정 시간 후에 만료될 수 있도록 설정하는 것이 일반적입니다. 이렇게 함으로써 새로운 데이터를 가져오는 기회를 제공하고, 새로운 내용을 업데이트할 수 있습니다. 다음은 자바스크립트 fetch API의 데이터 캐싱 예제에 만료 기간을 추가한 코드입니다.

const cache = {};

function fetchData(url, cacheTime = 300000) {
  if (cache[url] && Date.now() - cache[url].timestamp < cacheTime) {
    return Promise.resolve(cache[url].data);
  } else {
    return fetch(url)
      .then(response => response.json())
      .then(data => {
        cache[url] = {
          timestamp: Date.now(),
          data: data
        };
        return data;
      });
  }
}

위의 코드에서 cacheTime 변수는 데이터 캐시의 만료 시간을 밀리초 단위로 나타냅니다. fetchData 함수는 캐시된 데이터가 존재하고 캐시 시간이 만료되지 않았다면 바로 캐시된 데이터를 반환합니다. 그렇지 않은 경우에는 데이터를 요청하고 응답을 JSON 형식으로 변환한 다음, 캐시에 저장하고 데이터를 반환합니다. 이때 현재 시간과 캐시된 데이터의 타임스탬프를 비교하여 만료 여부를 확인합니다.

결론

자바스크립트 fetch API를 사용하여 데이터를 캐싱함으로써 웹 애플리케이션의 퍼포먼스를 개선할 수 있습니다. 이 블로그에서는 데이터를 캐싱하는 간단한 예제를 제공하고, 만료 기간을 설정하는 방법에 대해 알아보았습니다. 이러한 기술을 사용하여 웹 애플리케이션의 성능을 향상시켜보세요!