Colin's Blog
자바스크립트 데이터 캐싱 및 저장

자바스크립트는 웹 애플리케이션 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. 데이터를 캐싱하고 저장하는 기능은 복잡한 애플리케이션에서 성능을 향상시키고 사용자 경험을 향상시키는 데 큰 영향을 줄 수 있습니다. 이번 글에서는 자바스크립트에서 데이터를 캐싱하고 저장하는 다양한 방법을 살펴보겠습니다.

1. 변수를 활용한 캐싱

가장 간단한 캐싱 방법은 변수를 활용하는 것입니다. 예를 들어, 특정 계산 결과나 API 요청 결과를 변수에 저장하여 재사용할 수 있습니다.

let cachedResult = null;

function calculate() {
  if (cachedResult) {
    return cachedResult;
  }
  
  // 계산 로직
  cachedResult = ...;
  
  return cachedResult;
}

위 예제에서 calculate 함수는 처음 호출될 때는 계산 로직을 실행하고, 그 결과를 cachedResult 변수에 저장합니다. 이후에 calculate 함수가 다시 호출되었을 때는 cachedResult 변수에 저장된 값이 존재하므로 별도의 계산 과정을 거치지 않고 저장된 값을 반환합니다.

2. 웹 브라우저 저장소 활용

웹 브라우저는 데이터를 캐싱하고 저장하기 위한 여러 가지 저장소를 제공합니다. 가장 일반적인 저장소로는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다.

로컬 스토리지

로컬 스토리지는 브라우저에 영구적으로 데이터를 저장할 수 있는 저장소입니다. 저장된 데이터는 웹브라우저를 종료하고 다시 실행해도 유지됩니다.

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 읽기
const value = localStorage.getItem('key');

// 데이터 삭제
localStorage.removeItem('key');

세션 스토리지

세션 스토리지는 로컬 스토리지와 유사하지만, 브라우저 세션 동안만 데이터를 유지합니다. 즉, 브라우저를 종료하면 세션 스토리지에 저장된 데이터도 함께 삭제됩니다.

// 데이터 저장
sessionStorage.setItem('key', 'value');

// 데이터 읽기
const value = sessionStorage.getItem('key');

// 데이터 삭제
sessionStorage.removeItem('key');

로컬 스토리지와 세션 스토리지를 적절하게 활용하면, 웹 애플리케이션에서 데이터를 캐싱하고 저장하는 기능을 구현할 수 있습니다.

3. 서비스 워커를 활용한 오프라인 캐싱

서비스 워커(Service Worker)는 웹 브라우저에서 백그라운드에서 실행되는 스크립트로, 웹 애플리케이션의 네트워크 요청과 응답을 가로채고 제어할 수 있는 기능을 제공합니다. 이를 활용하여 오프라인 상황에서도 웹 애플리케이션의 자원을 캐싱할 수 있습니다.

// 서비스 워커 등록
navigator.serviceWorker.register('sw.js')
  .then(registration => {
    console.log('Service Worker registered');
  })
  .catch(error => {
    console.error('Service Worker registration failed:', error);
  });

// 서비스 워커에서 데이터 캐싱
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        
        // 네트워크 요청
        return fetch(event.request)
          .then(response => {
            // 응답을 캐시에 저장
            return caches.open('my-cache')
              .then(cache => {
                cache.put(event.request, response.clone());
                return response;
              });
          });
      })
  );
});

위 예제에서는 서비스 워커를 등록하고, fetch 이벤트를 가로채서 네트워크 요청을 처리합니다. 요청된 자원이 캐시에 존재하면 그 값을 반환하고, 캐시에 존재하지 않을 경우에는 네트워크 요청을 실행하고 응답을 캐시에 저장합니다. 이후에 같은 자원에 대한 요청이 있을 경우에는 캐시된 값을 반환하여 네트워크 부하를 줄일 수 있습니다.

마무리

자바스크립트에서 데이터를 캐싱하고 저장하는 방법은 다양합니다. 변수를 활용하는 간단한 캐싱부터 웹 브라우저 저장소를 사용하는 방법, 그리고 서비스 워커를 통한 오프라인 캐싱까지 많은 방법이 있습니다. 애플리케이션의 요구사항에 맞게 적절한 방식을 선택하여 성능과 사용자 경험을 개선해보세요.

© 2018 Colin. All rights reserved.