[FE] 캐싱

프론트엔드에서 캐싱은 웹 애플리케이션의 성능을 향상시키는 중요한 요소 중 하나다.

 

캐싱은 이전에 검색한 데이터나 리소스를 임시로 저장하고 다시 요청할 때 이 저장된 데이터를 사용하여 서버의 부하를

줄이고 응답 시간을 단축하는 데 사용된다.

 

프론트엔드에서 캐싱은 주로 브라우저 레벨에서 이루어지며, 다음과 같은 방식으로 구현할 수 있다.

 

---

1. 브라우저 캐시

브라우저는 이미지, 스타일시트, 자바스크립트 파일 및 기타 리소스를 캐시할 수 있다.

 

이를 이용하여 웹 페이지의 초기 로딩 속도를 향상시킬 수 있다.

 

브라우저 캐시를 사용하려면 리소스에 대한 HTTP 캐싱 헤더를 설정해야 한다.

 

<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>

위의 코드에서 styles.css 및 script.js 파일은 브라우저 캐시에 저장될 수 있다.

 

 

 

2. 서비스 워커( Service Workers )

서비스 워커는 프론트엔드 애플리케이션의 오프라인 지원 및 고급 캐싱을 위한 기술이다. 

 

서비스 워커를 사용하면 웹 애플리케이션의 리소스를 미리 캐시하고 오프라인 상황에서도 애플리케이션을 실행할 수 있다.

// service-worker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
      ]);
    })
  );
});

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

 

 

3. 라이브러리 및 프레임워크

많은 프론트엔드 라이브러리와 프레임워크에서는 캐싱을 관리하는 기능을 제공한다.

 

 React, Angular, Vue.js 등의 프레임워크는 컴포넌트나 모듈 수준에서 데이터 캐싱을 지원하며,

이를 통해 컴포넌트의 렌더링을 최적화할 수 있다.

 

import { useMemo } from 'react';

function MyComponent({ data }) {
  const cachedData = useMemo(() => {
    // 데이터 캐싱 논리 구현
    return data;
  }, [data]);

  return (
    // 컴포넌트 렌더링
  );
}

 

---

 

프론트엔드에서의 캐싱은 성능 향상과 사용자 경험을 개선하는 데 중요하다. 

 

그러나 적절한 캐싱 전략을 선택하고 구현하는 것은 프로젝트의 요구 사항과 목표에 따라 다를 수 있다.

 

따라서 캐싱을 구현할 때는 프로젝트의 특정 요구 사항을 고려해야 한다.