1. 캐싱이란?
캐싱의 개념
- 캐싱(Caching): 캐싱은 웹사이트의 로딩 속도를 개선하기 위해 자주 사용되는 데이터를 임시 저장소에 보관하는 기술이다. 사용자가 웹사이트를 방문할 때 모든 데이터를 서버에서 직접 불러오는 대신, 캐시에 저장된 데이터를 빠르게 가져와서 웹사이트의 로딩 시간을 단축시킨다.
웹사이트 성능에 미치는 캐싱의 중요성
1) 성능 향상
캐싱을 통해 서버의 부하를 줄이고, 응답 시간을 단축시켜 웹사이트의 전반적인 성능을 향상시킬 수 있다.
2) 사용자 경험 개선
빠른 로딩 시간을 통해 사용자 만족도를 높이며, 이는 사용자의 사이트 체류 시간 증가와 재방문율 향상으로 이어질 수 있다.
3) 대역폭 절약
캐싱을 통해 서버로부터 전송되는 데이터 양이 줄어들어, 대역폭 사용량을 절약할 수 있다.
2. 캐싱의 기본 원리
캐싱이 작동하는 방식
1) 요청과 응답
사용자가 웹페이지에 접속하면, 브라우저는 서버에 페이지의 데이터를 요청한다. 캐싱이 구현되어 있다면, 서버는 먼저 캐시를 확인하여 해당 데이터가 존재하는지 검사한다.
2) 데이터 검색
캐시에 데이터가 있으면, 서버는 데이터를 캐시에서 직접 가져와 사용자에게 전달한다. 캐시에 데이터가 없으면, 서버는 원본 데이터를 처리하여 사용자에게 전달하고, 동시에 이 데이터를 캐시에 저장한다.
3. 캐시의 종류
1) 브라우저 캐시(Browser Cache)
사용자의 브라우저에 저장되는 캐시이다. CSS, JS 파일, 이미지 등 정적 리소스를 저장하여, 사용자가 다시 같은 페이지를 방문할 때 빠르게 로딩할 수 있도록 한다.
예를 들어, 사용자가 뉴스 웹사이트를 방문할 때, 웹사이트의 로고나 레이아웃에 사용되는 CSS 파일은 변하지 않는 리소스다. 이러한 파일들은 브라우저 캐시에 저장되어, 사용자가 다른 뉴스 기사를 클릭할 때 매번 서버에 요청하지 않고 빠르게 로딩한다.
2) 서버 캐시(Server Cache)
웹 서버에 구현되는 캐시이다. 동적 콘텐츠나 데이터베이스 쿼리 결과와 같은 서버 측 리소스를 캐싱하여, 서버의 부하를 줄이고 응답 속도를 향상시킨다.
예를 들어, 전자상거래 웹사이트에서 가장 인기 있는 제품의 목록을 서버 캐시에 저장할 수 있다. 이렇게 하면, 많은 사용자가 해당 페이지를 방문할 때마다 제품 목록을 데이터베이스에서 새로 가져오는 대신, 캐시된 데이터를 빠르게 제공할 수 있다.
3) CDN 캐시(Content Delivery Network Cache)
전 세계에 분산된 서버 네트워크에 저장되는 캐시이다. 사용자에게 가장 가까운 서버에서 콘텐츠를 제공하여, 지연 시간을 줄이고 빠른 콘텐츠 전송을 가능하게 한다.
예를 들어, 한 온라인 교육 플랫폼이 있을 때, 그 플랫폼의 비디오 콘텐츠는 전 세계 여러 지역의 CDN 서버에 저장될 수 있다. 미국에 있는 사용자가 특정 강의를 시청하려고 할 때, 미국 내에 위치한 CDN 서버에서 비디오를 빠르게 전송받을 수 있어, 사용자는 지연 없이 콘텐츠를 시청할 수 있다.
캐시 종류 비교
| 특징 / 캐시 유형 | 브라우저 캐시 | 서버 캐시 | CDN 캐시 |
|---|---|---|---|
| 저장 위치 | 사용자의 브라우저 | 웹 서버 | 전 세계 분산 서버 |
| 주로 캐싱되는 콘텐츠 | 정적 리소스 (CSS, JS, 이미지) | 동적 콘텐츠, 데이터베이스 쿼리 결과 | 정적 및 동적 콘텐츠 |
| 목적 | 같은 페이지 재방문 시 빠른 로딩 | 서버 부하 감소, 응답 속도 향상 | 지연 시간 감소, 빠른 콘텐츠 전송 |
| 적용 사례 | 뉴스 웹사이트의 로고, 스타일시트 | 전자상거래의 인기 제품 목록 | 온라인 교육 플랫폼의 비디오 콘텐츠 |
| 장점 | 사용자마다 개별적으로 캐시 관리 | 일관된 콘텐츠, 서버 부하 감소 | 지역적으로 가까운 서버에서 빠른 접근 |
| 단점 | 캐시된 파일이 오래되었을 경우 업데이트 필요 | 자주 변경되는 콘텐츠 캐싱시 캐시 무효화 관리 필요 | 콘텐츠 배포 전략 및 CDN 서비스 비용 관리 필요 |
4. 캐싱 방법
HTML, CSS, JS 파일 같은 정적 자원 캐싱하기
1) 파일 버전 관리
파일 이름에 버전 번호나 변화를 나타내는 해시값을 추가한다. 예를 들어, 'style_v1.css' 대신 'style_v2.css'로 바꿀 수 있다. 이렇게 하면, 웹사이트에 변화가 생길 때마다 브라우저가 새로운 파일을 받아오게 된다.
2) Cache-Control 설정
브라우저에게 얼마나 오랫동안 파일을 저장해둘지 알려주는 설정이다. 예를 들어, 'Cache-Control: max-age=3600'은 파일을 1시간 동안 저장하라는 의미이다.
동적 컨텐츠와 API 응답 캐싱
1) 메모리 내 캐시 사용하기
빠른 속도가 필요할 때, Redis나 Memcached 같은 도구를 사용해 메모리에 데이터를 저장한다. 이렇게 하면, 데이터를 찾는 시간이 매우 짧아진다.
2) 데이터베이스 캐시 사용하기
복잡한 데이터베이스 질의의 결과를 저장해두고, 같은 질의가 들어오면 빠르게 결과를 제공한다. 이 방법으로 서버의 부하를 줄이고, 사용자에게 빠른 응답을 제공할 수 있다.
캐싱 설정 세부 사항
1) Cache-Control 헤더
이건 캐시의 만료 시간이나, 콘텐츠를 새로 받아와야 할지 등을 설정하는 부분이다.
2) ETag (Entity Tag)
파일이 변경되었는지 아닌지를 판단할 수 있는 태그이다. 파일의 내용이 바뀌면 ETag도 바뀌기 때문에, 브라우저는 이 태그를 확인하여 필요한 경우에만 새로운 내용을 다운로드한다.
3) Vary 헤더
이건 특정 조건에 따라 캐시 동작을 달리할 수 있게 해주는 설정이다. 예를 들어, 다양한 언어 설정에 따라 다른 캐시를 보여주는 경우에 사용할 수 있다.
