FE 개발자가 알아야 할 '캐싱' 개념 정리 _아티클 요약

 

이번주에 내가 준비한 아티클은 바로 "FE 개발자가 알아야 할 '캐싱' 개념 정리"이다.

 

아무래도 프론트엔드 개발을 하다보면 이 '캐싱'이라는 개념을 언젠가 한번쯤은 마주하게 되고,
또 나의 고급 프로젝트에서도 이 '캐싱' 개념을 활용하여 페이지의 로딩 속도를 빠르게 향상시킨 경험이 있어서,

이 '캐싱'이라는 개념에 대해 관심이 생겨서 더 깊게 알고 싶어 해당 아티클을 선정하게 되었다. 

---

 

원문 아티클 내용의 핵심을 요약하면서, 

프론트엔드 개발자가 알아야 할 웹 캐싱의 여러 종류와 각각의 개념에 대해 살펴보려 한다.

 

아티클의 주요 내용을 요약하면 다음과 같다:

 

 

캐싱의 기본 개념

• 웹사이트 성능을 최적화하기 위해 캐싱은 매우 중요한 개념이다.
• 캐싱은 데이터를 한 번 받아온 후 필요한 경우 빠르게 불러와 사용할 수 있도록 임시 저장하는 프로세스를 의미한다. → 이는 로딩 시간을 줄이고, 사용자 경험을 향상시키는 데 기여한다.
• 캐시는 메모리 계층 구조에서 디스크나 메인 메모리보다 더 빠른 속도로 데이터에 접근할 수 있다.

 

웹 캐시(Web Cache)

• 클라이언트가 서버로부터 HTTP 요청을 통해 필요한 데이터를 불러오는 과정에서 사용된다.
• 웹 캐시는 반복적으로 사용되는 요소들을 임시 저장하여 서버로부터의 반복적인 요청을 줄이는 역할을 한다.
• 예를 들어, 블로그의 사이드바나 썸네일처럼 여러 페이지에서 공통으로 사용되는 요소들을 캐싱할 수 있다.
  → 이렇게 하면 불필요한 데이터 전송을 줄여 네트워크 대역폭도 절약할 수 있다.

 

브라우저 캐시(Browser Cache)

• 브라우저 캐시는 클라이언트 측에서 HTTP 요청을 통해 불러온 데이터를 로컬 디스크에 저장한다.
• 이는 단일 사용자에 대한 캐시로, 사용자가 자주 방문하는 웹 페이지의 로딩 시간을 단축시킨다.
• 브라우저 캐시는 ETag와 Cache-Control 헤더를 사용하여 캐시된 콘텐츠의 유효성을 확인하고 관리한다.
• 브라우저 캐시를 통해 자주 사용되는 이미지, CSS, 자바스크립트 파일을 빠르게 로드할 수 있다.
  
  
• ETag와 Cache-Control:
  • ETag: 서버에서 리소스의 특정 버전을 식별하기 위해 사용된다. 리소스의 변경 여부를 효율적으로 관리할 수 있도록 돕는다. ETag는 리소스의 해시 값을 사용하여 변경 여부를 판단한다. 만약 ETag가 변경되지 않았다면 서버는 304 Not Modified 응답을 보내 불필요한 데이터 전송을 줄인다.
  • Cache-Control: 캐시 동작을 제어하는 HTTP 헤더로, no-cache, no-store, max-age 등의 속성을 사용해 캐시의 유효성을 관리한다. no-cache는 캐시된 데이터를 사용하기 전에 서버에서 반드시 유효성을 확인하도록 하고, no-store는 캐시를 사용하지 않도록 한다. max-age는 캐시의 유효 기간을 설정한다.

 

프록시 캐시(Proxy Cache)

• 프록시 캐시는 공유 캐시로, 여러 사용자가 동일한 데이터를 빠르게 불러올 수 있도록 중간 서버에 데이터를 저장한다.
• 이는 주로 ISP(Internet Service Provider)에서 많이 사용되며, 리소스 요청을 최적화한다.
• 프록시 캐시는 공용 캐시로 여러 사용자가 동일한 데이터를 공유할 수 있다.
  → 이는 대규모 트래픽을 처리할 때 매우 유용하며, 서버 부하를 줄이는 데 도움을 준다.

 

네트워크 캐시(Network Cache)와 CDN

• 네트워크 캐시는 여러 프록시 서버를 통해 관리되며, 콘텐츠 전송 네트워크(CDN)를 통해 전 세계 사용자에게 빠르게 콘텐츠를 제공하는 데 사용된다.
• CDN은 분산 노드를 통해 콘텐츠를 사용자 가까이에 저장하여 빠르게 전달하는 역할을 한다.
• 예를 들어, Cloudflare와 같은 CDN 서비스는 사용자와 가장 가까운 서버에서 데이터를 제공하여 로딩 시간을 단축시킨다. 이를 통해 글로벌 사용자에게도 일관된 성능을 제공할 수 있다.

더불어...

• 프론트엔드 개발자는 다양한 캐싱 기법을 이해하고 활용하여 웹사이트의 성능을 최적화해야 한다.
• 특히, 데이터 패칭 라이브러리(SWR, React Query, Apollo Client 등)를 통해 캐싱을 효율적으로 처리할 수 있다.
• 또한, 캐싱 전략을 통해 stale 데이터(오래된 데이터)가 엔드 유저에게 노출되지 않도록 주의해야 한다.
• 캐싱은 초기 설정과 모니터링이 중요하며, 주기적으로 캐시를 정리하고 업데이트하는 것이 필요하다.

 

캐싱은 웹사이트 성능을 높이기 위해 필수적이다.

그러나 무작정 캐시를 사용할 경우, 오래된 데이터가 사용자의 화면에 표시되거나, 불필요한 저장 공간을 차지하게 되는 등의 문제를 야기할 수 있다.

따라서 비즈니스에 맞게 캐시 전략을 세우고, 효율적으로 관리하는 것이 중요하다.

또한, 캐시 설정이 제대로 작동하는지 모니터링하고, 필요할 때 캐시를 갱신하거나 무효화하는 작업도 필요하다.

이를 통해 사용자에게 최적의 성능을 제공할 수 있다.

 

 

---

 

 

📜원문 아티클 : 

https://yozm.wishket.com/magazine/detail/2341/