캐시(Cache)란 무엇일까?
캐시는 데이터나 값을 미리 복사해 놓는 임시 저장소이다.
그렇다면 언제 사용할까?
- 원본 데이터에 접근하는 시간이 오래 걸리는 경우
- 값을 다시 계산하는 시간을 절약하고 싶을 경우.
장점
데이터를 미리 복사해추가적인 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다.
데이터에 따른 속도는 올리고 그에 따른 비용은 절감시키기 위해 사용한다고 보면 된다.
단점
속도가 빠를수록 용량이 작고 가격이 높다.
캐시 만료기간에 따른 업데이트 이슈가 발생할 수 있다.
그렇다면 프론트엔드에서 어느 영역에 사용이 될까?
캐시 사용 영역
브라우저 캐시
HTTP 캐시라고도 하며, 브라우저 혹은 HTTP 요청을 보내는 클라이언트의 내부 디스크 혹은 메모리에 저장되는 캐시이다.
각 사용자마다 할당되는 개인화(personalized)된 캐시이므로 클라이언트 간 공유는 불가능하다.
모든 HTTP 요청은 먼저 서버로 직접 요청을 보내지 않고 브라우저 캐시로 라우팅되는데, HTTP 캐시 내에 필요한 데이터가 존재한다면 캐시된 데이터를 반환한다.
브라우저 캐시는 HTML의 메타 태그로 캐시 속성을 지정하거나, HTTP 요청 및 응답 헤더에 지정하는 방법으로 제어가 가능하다.
프록시 캐시
클라이언트와 서버 사이에 위치한 네트워크 상(프록시 서버)에서 동작하는 캐시로, 회사나 IPS의 방화벽에 설치된다.
브라우저 캐시와는 달리 다수의 웹 서버에서 공유하여 사용할 수 있다는 장점이 있다.
CDN
CDN(Content Delivery Network)은 분산된 서버 네트워크를 사용해 유저들에게 리소스(ex. 동영상, 이미지, 폰트 등)를 제공하여 사이트 성능을 향상시킨다. 흔히 CDN이 서버에 캐싱된 컨텐츠만 다룬다고 알고 있지만, 캐싱이 되지 않은 컨텐츠들을 제공할때도 좋다.
→ CDN을 적절하게 사용하면 데이터 사용량이 많은 어플리케이션의 페이지 로딩 속도를 개선할 수 있음
웹브라우저의 캐시 동작 과정
-1. 사용자가 브라우저를 통해 웹 페이지의 리소스를 요청한다.
2. 서버는 해당 리소스를 응답해준다.
이 때 HTTP 메시지에 cache-control 헤더를 넣어 캐시 유효기간을 설정한다.(예60초)
3. 클라이언트는 응답받은 리소스와 캐싱 관련 정보로 캐시에 저장할 수 있는지 확인한다.
4. 캐싱이 가능한 경우 응답헤더의 cache-control 응답데이터를 60초동안 저장한다.
5. 클라이언트가 다시 같은 리소스를 요청한다.
이 때 다시 서버에 요청하는 것이 아닌 캐시 저장소를 먼저 조회한다.
만일 캐시되어 있고 60초 이내 요청한 상태라면 캐시에서 리소스를 가져온다.
만약, 캐시 유효기간일 지났다면 ?
만일 캐시 유효기간이 만료되었는데 클라이언트가 동일한 리소스를 또 요청한다면 클라이언트는 서버에게 처음과 같이 다시 리소스를 요청한다.
서버는 똑같이 cache-header를 응답하고 브라우저는 다시 리소스를 캐시에 저장한다.
그렇다면 캐시 유효기간을 늘리는게 번거롭지 않지 않을까?
결론적으로는 아니다!
캐시의 유효기간을 늘리게 된다면 짧은 변경주기를 갖는 데이터를 관리하는데 옳지 않다.
캐시는 계속 용량이 쌓이게 되어 서버 리소스를 낭비하거나 디스크 공간을 소모하게 된다.
따라서 캐시 유효기간을 설정할 때는 데이터의 성격과 상황을 고려해야 한다.
캐시는 그럼 어떻게 데이터가 수정이 되었는지 알 수 있는 걸까?
이를 알기 위해서는 먼저 클라이언트의 조건부 요청 헤더와 서버의 캐시 검증 헤더를 알아야한다.
캐
캐시의 생명 주기
브라우저는 서버에 리퀘스트를 보내기 전 해당 데이터가 있는지 확인 후 있으면 그 데이터를 사용한다. 만약 서버에 있는 데이터가 업데이트 된 경우라면? 캐시는 이를 구분할 수 없다.
HTTP Cache
브라우저는 서버에 리퀘스트를 보내기 전 해당 데이터가 있는지 확인 후 있으면 그 데이터를 사용한다. 만약 서버에 있는 데이터가 업데이트 된 경우라면? 캐시는 이를 구분할 수 없다.
서버는 리소스를 응답할때 해당 리소스를 캐싱할 수 있는 시간을 명시해서 보낸다.
어디? HTTP Cahce-Control-Header에
max-age = 60
60초 동안 리소스를 request하면 서버에 요청하지않고 캐시된 리소스를 사용하게 된다.
Etag :
만료가 다 되었더라도 캐시 업데이트가 필요하지 않은 경우도 있다.
리소스마다 변경 빈도가 다르기 때문에 캐싱 설정도 달라야 한다.
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control
https://www.youtube.com/watch?v=NxFJ-mJdVNQ
https://toss.tech/article/smart-web-service-cache
