소개

캐싱은 웹 및 모바일 애플리케이션의 속도와 응답성을 향상시키는 획기적인 기술입니다. 이 블로그에서는 프런트엔드 애플리케이션을 위한 필수 캐싱 전략을 살펴보고, 대규모 데이터 처리를 다루고, B/F(Backward/Forward) 캐싱의 복잡성을 자세히 살펴보겠습니다.

프런트엔드 애플리케이션의 주요 캐싱 전략

브라우저 캐싱

브라우저 캐싱은 웹 자산의 사본을 로컬에 저장하는 브라우저의 기능을 활용하여 로드 시간과 서버 요청을 줄입니다. 다음은 몇 가지 중요한 측면입니다.

• Cache-Control: 이 HTTP 헤더는 캐싱 정책을 지정합니다. 예를 들어 Cache-Control: max-age=3600은 브라우저에 3600초 동안 리소스를 캐시하도록 지시합니다.

• Expires: 이 헤더는 캐시된 리소스의 정확한 만료 날짜/시간을 지정합니다. Cache-Control과 함께 사용되는 경우가 많습니다.

• ETag: ETag 헤더는 리소스 버전에 대한 고유 식별자를 제공합니다. 리소스가 변경되면 해당 ETag가 변경되어 효율적인 캐시 검증이 가능해집니다.
  

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

서비스 워커

서비스 워커는 백그라운드에서 실행되는 스크립트로, 고급 캐싱 기능을 제공합니다. 네트워크 요청을 가로채고 캐시된 응답을 제공할 수 있으며 오프라인 액세스도 허용할 수 있습니다.

• 캐시 우선: 가능한 경우 캐시에서 제공합니다. 그렇지 않은 경우 네트워크에서 가져옵니다.

• 네트워크 우선: 네트워크에서 먼저 가져옵니다. 네트워크를 사용할 수 없는 경우 캐시에서 제공하세요.

• Stale-While-Revalidate: 캐시에서 서비스를 제공하는 동시에 백그라운드에서 캐시를 가져오고 업데이트합니다.
  

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

로컬 스토리지 및 IndexedDB

로컬 스토리지 및 IndexedDB는 클라이언트 측에 데이터를 유지하기 위한 브라우저 기반 스토리지 솔루션입니다.

• 로컬 저장소: 소량의 데이터를 키-값 쌍으로 저장하는 데 적합합니다. 동기식이며 약 5MB의 저장 용량 제한이 있습니다.

• IndexedDB: 대용량의 구조화된 데이터를 저장하는 데 적합합니다. 트랜잭션과 복잡한 쿼리를 지원하므로 보다 실질적이고 복잡한 데이터에 이상적입니다.

예

로컬 저장소

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

IndexedDB

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

브라우저 자체에는 몇 가지 캐싱 기술이 있으며, 여기에 그 중 하나가 있습니다.

뒤로/앞으로(B/F) 캐싱에 대해 자세히 알아보기

B/F 캐싱이란 무엇입니까?

B/F 캐싱은 브라우저가 브라우저 기록에 웹페이지 상태를 저장하여 사용자가 전체 페이지를 다시 로드하지 않고도 앞뒤로 탐색할 수 있도록 하는 메커니즘을 나타냅니다.

대부분의 브라우저에 이 기능이 있으며 검사 탭에서 탐색할 수 있습니다.

B/F 캐싱 작동 방식

• 페이지 캐시: 브라우저는 DOM, JavaScript 컨텍스트 및 메모리 내 데이터를 포함하여 페이지의 전체 상태를 저장합니다.

• BFCache: 최신 브라우저(예: Chrome 및 Firefox)는 BFCache를 사용하여 페이지 상태를 메모리에 보존하므로 즉각적인 탐색이 가능합니다.

B/F 캐싱의 이점

• 빠른 탐색: 브라우저의 뒤로 및 앞으로 버튼을 사용할 때 즉시 페이지가 로드됩니다.

• 향상된 사용자 경험: 원활한 전환으로 전반적인 사용자 경험이 향상됩니다.

• 서버 로드 감소: 페이지 상태가 저장되고 재사용되므로 서버에 대한 요청이 줄어듭니다.

결론

효율적인 캐싱 전략을 구현하면 웹 및 모바일 애플리케이션의 성능을 획기적으로 향상시킬 수 있습니다. 브라우저 캐싱 및 서비스 워커부터 대규모 데이터 처리 및 B/F 캐싱 활용에 이르기까지 이러한 기술을 통해 앱의 속도, 반응성, 사용자 친화적이 보장됩니다. 오늘부터 이러한 전략을 활용하여 앱 성능을 혁신해 보세요!

이 블로그에서 새로운 것을 배우셨기를 바랍니다. 짧고, 선명하고, 깊고, 독특한 기술 블로그를 보려면 저를 팔로우하세요. 감사해요!