[javascript] 비동기 데이터 요청에서의 캐싱 처리 방법

11 Dec 2023

javascript

비동기 데이터 요청은 웹 애플리케이션에서 빈번하게 발생하는데, 이를 효율적으로 관리하기 위해서는 캐싱이 필요합니다. 캐싱은 이전에 요청한 데이터를 저장해 두었다가 재사용함으로써 네트워크 요청을 줄여 성능을 향상시키는 방법입니다. 이번 포스트에서는 Javascript에서 비동기 데이터 요청의 캐싱 처리 방법에 대해 알아보겠습니다.

1. 메모이제이션 (Memoization) 활용

메모이제이션은 함수의 반환 값을 저장해 두었다가 동일한 입력 값이 들어왔을 때 이전에 계산된 결과를 반환하는 기법입니다. 아래는 간단한 예제 코드입니다.

const cache = {};

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

위 코드에서 fetchDataFromServer 함수는 요청한 url에 대한 응답을 cache에 저장한 후, 다음에 같은 url에 대한 요청이 들어왔을 때는 저장된 데이터를 반환합니다.

2. 웹 스토리지 활용

웹 스토리지(Web Storage)는 브라우저 내에 데이터를 저장하는 메커니즘으로, localStorage와 sessionStorage 두 가지 형태가 있습니다. 아래는 localStorage를 사용한 예제 코드입니다.

function fetchDataFromServer(url) {
  const cachedData = localStorage.getItem(url);
  if (cachedData) {
    return Promise.resolve(JSON.parse(cachedData));
  } else {
    return fetch(url)
      .then(response => response.json())
      .then(data => {
        localStorage.setItem(url, JSON.stringify(data));
        return data;
      });
  }
}

이 코드는 url에 대한 응답을 localStorage에 저장한 후, 동일한 url에 대한 요청이 들어오면 저장된 데이터를 반환합니다.

결론

비동기 데이터 요청의 캐싱은 웹 애플리케이션의 성능을 향상시키기 위해 중요한 요소입니다. 메모이제이션과 웹 스토리지를 활용하여 데이터를 캐싱하는 방법을 알아보았는데, 각각의 방법마다 장단점이 있으니 상황에 맞게 적절한 캐싱 전략을 선택하는 것이 중요합니다.

참고 문헌: