캐시(Cache)는 서버 지연을 줄이기 위해 자주 사용하는 웹 페이지, 이미지 등 웹 문서들을 복사해서 임시 저장하고 재사용 하는 기술이라고 할 수 있다.
즉, 반복적으로 데이터를 불러오는 경우, 지속적으로 서버에 데이터를 요청하지 않고 메모리에 데이터를 임시 저장 했다가 다시 사용하는 것이다.
캐시를 사용해서 얻고자 하는 동작은 원하는 데이터가 캐시에 존재할 경우 해당 데이터를 사용하고 원하는 데이터가 아닐 경우에는 서버에 요청을 해서 원하는 데이터를 반환받는 것이다. 여기서 원하는 데이터가 아닐 경우 저장중인 데이터를 변경해줘야 한다.
필요성
웹 사이트 프로젝트를 업데이트 하고 배포 한다. 배포가 완료 되고 웹 사이트에서 업데이트 된 내용을 즉시 확인 할 수 있기를 바라지만 업데이트 된 내용을 확인 할 수 없을 때가 있다.
만약 브라우저에서 캐시 비우기 또는 시크릿 모드를 통해서 업데이트 된 내용을 확인 할 수 있고 이러한 방법이 의도한 것이 아니라면 캐시 제어가 필요하다.
데이터 타입
HTMLCSSJavascriptImage
캐시 종류
Memory CacheDisk Cache
캐시 전후 비교
브라우저 > 개발자 도구 > 네트워크를 통해서 아래와 같은 내용을 비교해 볼 수 있다.
캐시 전
캐시 후
데이터 사이즈와 불러오는 시간을 비교해 보면 캐시를 사용 했을때 더 효율적으로 데이터를 제공 할수 있다는 것을 알 수 있다.
Cache-Control
요청한 데이터의 캐시 설정 정보는 위 이미지에서 처럼 네트워크 데이터 정보 또는 Response Header 에서 cache-control 옵션으로 확인 할 수 있다.
Options
public: 모든 사용자 대상private: 특정 환경의 사용자 대상no-cache: 캐시를 사용하기 전 서버로 부터 재검증no-store: 케시 하지 않음must-revalidate: 캐시는 사용하기 전 기존 캐시 리소스를 반드시 재확인max-age=<seconds>: 캐시 유지 최대 시간을 지정 (초단위)
하나 이상의 옵션을 함께 사용 할수 있다.
ex) cache-control : no-cache, no-store, must-revalidate
Age
Response Header에서 Age 값을 확인 할수 있다. Age 값이 의미하는 것은 캐시 컨트 max-age 옵션 설정 시간에서 소요된 시간을 초단위로 나타낸다.
Expires
응답 컨텐츠의 만료 기간을 나타내며 캐시 컨트롤의 max-age 옵션이 없는 경우 유효하다.
ex) expires: Mon, 11 May 2020 09:09:00 GMT
ETag
HTTP 컨텐츠가 업데이트 되었는지 확인 하는 값으로 같은 주소의 컨텐츠에 변경 사항이 있다면 ETag 값이 달라진다.
ETag로 캐시 컨텐츠의 유효성 여부를 확인 할수 있다.
If-None-Match
if-none-match 는 ETag를 확인하고 ETag 값이 다르다면 컨텐츠에 변경사항이 있다는 것을 알아차려 캐시를 지우고 새로운 컨텐츠를 받는다. 만약 ETag가 같다면 서버는 304 Not Modified 를 반환하고 캐시를 그대로 사용하게 된다.
