캐싱은 웹 개발에서 성능을 향상시키기 위한 중요한 기능입니다. 웹 페이지나 애플리케이션은 종종 동일한 데이터를 반복해서 로드해야 하는데, 이때 캐싱을 통해 데이터를 미리 저장하고 재사용함으로써 로딩 시간을 줄일 수 있습니다.

자바스크립트에서는 Local Storage라는 기능을 제공하여 웹 브라우저의 로컬에 데이터를 저장할 수 있습니다. 이 기능을 이용하여 캐싱 기능을 구현해보겠습니다.

Local Storage 사용법

Local Storage는 localStorage 객체를 통해 접근할 수 있습니다. 데이터는 “키-값” 형태로 저장되며, 모든 값은 문자열로 저장됩니다.

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

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

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

캐싱 기능 구현

캐싱을 구현하기 위해서는 먼저 데이터를 가져올 때 캐시에 저장된 값이 있는지 확인해야 합니다. 이후에 캐시에 저장된 값이 있는 경우 해당 값을 반환하고, 없는 경우 서버에서 데이터를 가져와 캐시에 저장합니다.

function getDataFromCache(key) {
  const cacheData = localStorage.getItem(key);
  
  if (cacheData) {
    return JSON.parse(cacheData); // 문자열로 저장된 값을 객체로 변환
  }
  
  return null;
}

function getDataFromServer(key) {
  // 서버에서 데이터 가져오는 로직 작성
}

function getData(key) {
  const cachedData = getDataFromCache(key);
  
  if (cachedData) {
    return cachedData;
  }
  
  const serverData = getDataFromServer(key);
  
  if (serverData) {
    localStorage.setItem(key, JSON.stringify(serverData)); // 객체를 문자열로 변환하여 저장
    return serverData;
  }
  
  return null;
}

위의 예시 코드는 getData 함수를 통해 데이터를 가져오는 과정에서 캐싱을 처리하는 방법을 보여줍니다. getDataFromCache 함수는 로컬 스토리지에서 해당 키의 값을 가져오고, getDataFromServer 함수는 서버에서 데이터를 가져오는 로직을 작성해야 합니다.

캐싱 사용 시 주의사항

• 캐시된 데이터의 유효기간을 설정하여 일정 시간 이상 경과한 데이터는 자동으로 삭제해야 합니다.
• 캐시된 데이터가 변경되었을 경우, 서버와 동기화를 위해 수정된 값을 가져와서 캐시를 갱신해야 합니다.
• 캐시 기능을 사용할 때, 보안에 주의해야 합니다. 중요한 데이터를 저장하는 경우 암호화 등의 추가적인 보안 기능을 적용해야 합니다.

#javascript #로컬스토리지