HTTP 캐시

Bonnie Ryu·2020년 9월 21일

Cache TIL http

✔ 웹 캐시 관리

💡캐시(`Cache`)란?

'저장한다'는 의미
한 번 다운로드 받은 파일을 컴퓨터에 저장했다 → 캐시했다.

같은 페이지로 접속할 때 캐시해둔 파일을 사용한다면 네트워크를 통하지 않게 되고,
네트워크 지연으로 인한 속도 저하 발생 없음, 비용 절감 등 웹 자원을 효율적으로 이용하기 위한 기술

💥캐싱의 문제점

'갱신의 어려움'
: 캐시를 사용했을 때 웹사이트를 개편했음에도 과거의 파일을 보고 있을 수 있다.
→ 캐시가 최신 상태가 아니다.
즉 연산의 결과가 달라졌을 때의 처리이다.

✍`Cache Control`

: 캐시에 대한 정보는 개발자 도구(크롬 기준)의 Application 탭에서 확인 할 수 있다.

✍`Cache Control`에 사용되는 주요 옵션

Cache-Control: public : 캐시 허용. 응답요소들은 자동으로 private이 된다.

Cache-Control: private : 특정 유저(사용자의 브라우저)만 캐시하도록 설정한다. 다수가 사용하는 네크워크상의 중간자 역할을 하는 shared caches(ex:proxy)에는 캐시되지 않는다.

Cache-Control: no-store : 캐시를 하지 말 것.
(비효율적이지만 업데이트할 때 마다 즉각적으로 볼 수 있다.)

Cache-Control: no-cache : 캐시를 항상 확인하는 옵션.
요청을 할때 마다 확인을 하고 수정되었을때만 다운로드를 진행하고 싶을때
(Cache-Control: max-age = 0와 같음)

Cache-Control: max-age : 캐시 생성시 캐시의 만료기간을 정해두는 것.
지정된 만료일이 지나면 캐시를 삭제하고 다시 캐시를 생성하는 옵션(TTL(Time to Live))

예시) Cache-Control: max-age = 31536000

위와 같이 Cache-Control을 지정했을 때 해당 페이지의 캐시는 1년동안 캐싱되고 한 번 다운로드 된 파일은 설정 기간동안 해당페이지를 방문할 땐 네트워크를 사용하지 않고 디스크 또는 메모리에서 파일을 가져오게 되고 속도면에서는 다운을 받지 않기 때문에 굉장히 빠르다.

→ 사용자 입장 : 웹 반응속도 빠름.
→ 제공자 입장 : 비용절감.(통신을 아예 하지 않기 때문에)
문제점 : 페이지를 수정해도 사용자는 이미 캐시를 가지고 있기 때문에 수정 사항 반영이 되지 않는다.

max-age 조정하기

예시) Cache-Control: max-age = 5

response headers의 Last-Modified(마지막 수정일)을 웹서버가 웹 브라우저에게 알려주고 있다. 브라우저는 해당 파일을 캐싱할때 Last-Modified를 함께 저장
5초가 지나면 캐시는 더 이상 쓸 수 없기 때문에 삭제되는 것이 아니라
웹브라우저가 웹서버에 Last-Modified이후에 해당 파일이 수정된 적이 있는지 묻는다.
있다면 내용을 전송해주고, 없다면 없다고만 알려달라고

변경되었다면, Status Code : 200 OK로 응답, 그리고 변경된 Last-Modified를 알려준다.
없다면 Status Code : 304 Not Modified로 응답, 컨텐츠는 전송하지 않는다.
→ 즉 헤더만 주고 받는다.

Cache-Control: expires : 캐시 만료 날짜를 특정하는 옵션
Cache-Control의 max-age가 있는 경우 이 옵션은 무시된다.

✍`ETag`

: HTTP 컨텐츠가 바뀌었는지를 검사할 수 있는 태그.
Last-Modified의 단위가 초(s)까지만 보이기 때문에 ETag로 함께 변경 여부 검사
Request Headers의 If Modified-Since와If-None-Match의 값 중 하나라도 Response Headers의 Last-Modified,ETag 가 다르면 파일을 전송한다.