웹 캐싱(Caching)이란?
웹 캐싱은 자주 사용되는 데이터를 미리 저장해두고 재사용함으로써 응답 속도를 높이고 트래픽을 줄이는 기술을 말하는데, 캐시된 데이터를 사용하면 서버에 매번 요청을 보내지 않아도 되므로 성능이 개선되는 것이다.
캐시의 주요 종류
1. 브라우저 캐시 (Browser Cache)
브라우저 캐시는 사용자의 로컬 디바이스에 저장되는 캐시를 말한다. 주로 HTML, CSS, JavaScript, 이미지 파일 같은 정적 자산이 대상이며, 사용자가 동일한 웹 페이지를 재방문할 때 서버에 다시 요청하지 않고 빠르게 로딩할 수 있도록 돕는다. 이는 사용자 경험을 향상시키고, 서버 트래픽을 줄이는 데 효과적이다.
예를 들어, 다음과 같은 HTTP 헤더는 브라우저에게 해당 리소스를 24시간(86400초) 동안 캐싱하도록 지시하는 것이다.
Cache-Control: max-age=86400
2. 프록시 캐시 (Proxy Cache)
프록시 캐시는 사용자와 원본 서버 사이에 위치한 중간 캐시 서버에서 작동하는 캐시 방식으로, ISP(인터넷 서비스 제공자)나 회사 내부 네트워크, 혹은 CDN 서비스에서 활용되며, 같은 콘텐츠를 여러 사용자가 요청할 경우, 이미 저장된 캐시를 재사용함으로써 네트워크 비용과 서버 부하를 줄일 수 있다.
프록시 캐시는 다수의 사용자가 동일한 콘텐츠를 요청하는 환경에서 매우 효과적이며, 특히 대규모 트래픽을 처리할 때 응답 속도를 빠르게 유지하는 데 도움을 준다.
예시로는 Cloudflare, Akamai, Varnish 같은 서비스가 있으며, 이들은 각기 다른 방식으로 중간에서 응답을 캐싱하고 전달하는 역할을 한다.
3. 서버 캐시 (Server-side Cache)
서버 캐시는 웹 서버 또는 애플리케이션 서버 내부에서 동작하는 캐시 방식이다. 일반적으로는 사용자의 요청을 처리하면서 발생하는 무거운 연산이나 반복되는 데이터 처리 결과를 메모리나 별도의 저장소에 저장해두고, 같은 요청이 반복될 경우 캐시된 결과를 빠르게 반환하는 데 활용된다.
서버 캐시는 크게 다음과 같은 세 가지 방식으로 나뉜다:
- 데이터베이스 쿼리 결과 캐시: 복잡한 SQL 쿼리 결과를 Redis와 같은 인메모리 저장소에 저장해두고, 이후 동일한 쿼리에 대해 빠르게 응답할 수 있다.
- 템플릿 렌더링 캐시: 서버 측에서 HTML 페이지를 생성할 때 사용되는 템플릿 렌더링 결과를 캐싱하여, 반복적인 렌더링 작업을 줄인다.
- API 응답 캐시: 동일한 API 요청에 대해 서버에서 처리한 응답을 저장해 두고, 일정 시간 동안은 동일한 응답을 반환함으로써 처리 시간을 줄인다.
캐시 제어 방법
1. HTTP 헤더
- Cache-Control: 캐시 저장 여부와 유효기간 지정
- ETag: 리소스의 고유 식별자, 변경 여부 확인
- Last-Modified: 마지막 수정 시각 기반 캐시
Cache-Control: public, max-age=3600 ETag: "abc123"
2. Service Worker (PWA) 캐시
- 오프라인에서도 작동 가능한 웹앱을 구현할 수 있는 방식
- fetch 이벤트를 가로채서 캐시에서 응답 가능
- 매우 정교한 캐시 전략 구현 가능 (예: stale-while-revalidate, cache-first, network-first 등)
캐싱의 장점
- 페이지 로딩 속도 향상
- 서버 부하 감소
- 대역폭 절약
- 사용자 경험 향상 (특히 모바일에서)
캐싱의 단점 및 주의사항
- 캐시 무효화(Cache Invalidation): 업데이트된 리소스가 사용자에게 적용되지 않는 문제 발생 가능
- 버전 관리 필요: 파일 이름에 해시 값 추가 (main.abcd1234.js) 등을 통해 해결
- 보안 주의: 민감한 데이터는 캐시되지 않도록 설정해야 함 (Cache-Control: no-store)
혹시 브라우저 캐시와 프록시 캐시의 차이점이 궁금하면 아래 포스트를 참고해보세요!
https://quddkflty.tistory.com/125
브라우저 캐시 vs 프록시 캐시 차이점
캐싱에 대해 공부하는 과정에서 브라우저 캐시와 프록시 캐시의 차이점이 이해가 가지 않아 이렇게 정리해본다. 차이 정리표구분브라우저 캐시프록시 캐시위치사용자의 브라우저(로컬 디바이
quddkflty.tistory.com
'코딩 > Web' 카테고리의 다른 글
| Jest에 대해 알아보자 (7) | 2025.08.05 |
|---|---|
| 브라우저 캐시 vs 프록시 캐시 차이점 (2) | 2025.07.29 |
| 로컬스토리지(LocalStorage), 세션스토리지(SessionStorage), 쿠키(Cookie)의 차이점 (2) | 2025.07.23 |
| null과 undefined의 차이 (1) | 2025.06.04 |
| var, let, const의 차이 (0) | 2025.06.04 |