이번 TIL은 인프런의 "모든 개발자를 위한 HTTP 웹 기본 지식"을 학습하고, 정리한 내용입니다.
만약, 제 글의 내용을 퍼갈 시에는 " 모든 개발자를 위한 HTTP 웹 기본 지식 "도 출처에 첨부하시기 바랍니다.
캐시가 없을 때
예를 들어서, 웹 브라우저에서 star.jpg 라는 것을 요청한다고 해보자.
그러면, 서버에서 별과 관련된 그림을 내려줄 것이다.
HTTP 헤더에 관련된 부분의 용량이 0.1M 그리고 실제 해당 이미지를 표현하는 HTTP 바디 부분이 1M 정도 된다면, 총 1.1M의 네트워크를 차지하면서 웹 브라우저로 내려온다.
그리고 나서, 해당 이미지가 웹 브라우저에 표시가 된다.
그리고 캐시가 없을 때, 똑같은 요청을 한 번 더 한다.
그러면, 서버에서는 또 똑같이 요청을 받아서 응답을 내려주는데, 헤더와 바디 부분을 다시 만들어서 총 1.1M의 네트워크를 차지하면서 다시 내려준다.
그리고 웹 브라우져에서 다시 이미지를 그린다.
위의 상황은 똑같은 요청을 2번 했고, 데이터도 변경이 없다. 그런데도, 계속 네트워크를 써서 데이터를 받아왔다.
인터넷 네트워크는 PC의 하드디스크 같은 메모리에 비해서 매우 비싸고 매우 느리다.
그리고 사용자 입장에서는 동일한 이미지를 계속 받아와야하기 때문에, 브라우저 로딩 속도도 느려진다.
이 문제점을 보완하기 위해서 "캐시"가 등장한다.
캐시 적용
일단, 서버에서 캐시와 관련된 것을 세팅을 해야한다.
그리고 나서, 서버에서 캐시를 적용하면, cache-control이라는 것을 헤더에 넣어줄 수 있다.
cache-control : 캐시가 유효한 시간
위의 예시는 60초 동안 캐시가 유지가 된다는 말이다.
아무튼, 요청에 따라서 서버는 1.1M의 네트워크를 차지해서 별 이미지를 내려준다.
웹 브라우저에는 쿠키와 마찬가지로 캐시 역시 캐시를 저장하는 저장소에 별도로 존재한다.
예제의 캐시는 60초 동안 유효하니까 60초 유효하다고 적어놓고 응답 결과를 캐시에 저장한다.
이렇게 되면, 두번째 요청을 할 때는 먼저 캐시부터 뒤진다.
그리고 아직 캐시가 유효하다면, 캐시에서 별 이미지를 바로 가져온다.
네트워크를 아에 탈 필요가 없는거다.
네트워크 요청 횟수가 줄어들 기 때문에, 브라우저 로딩 속도가 엄청 빠르다.
그래서, 한 번 들어갔다가 나온 페이지를 다시 들어가보면, 엄청 빠르게 로딩된다.
그게 캐시가 적용되 있어서 그렇다.
이제 3번째로 요청을 하는데, 먼저 캐시부터 뒤진다. 그런데, 캐시 유효기간이 만료됐다.
그러면, 당연히 다시 서버에 요청해야 한다.
서버에서 똑같은 메세지를 내려준다.
웹 브라우저는 기존의 만료된 캐시를 지우고, 새로 받아온 캐시를 저장한다.
문제는 캐시가 만료만 안 됐으면, 네트워크를 사용하지 않아도 됐을 텐데, 만료가 되서 불필요하게 1.1M의 네트워크를 사용해야 됐다.
캐시 시간이 초과 되면, "stale 하다" (신선하지 않다)고 표현한다.
이러면, 쉽게 말해서, 서버가 가지고 있는 정보랑 캐시가 가진 정보랑 다를 수 있다.
그래서, 서버를 통해서 만료된 캐시를 다시 조회해야 한다.
이때, 네트워크 다운로드가 다시 발생한다.
그런데, 위의 상황을 잘 생각해보면, 별 이미지는 전혀 바뀌지 않았다.
이런 상황에서 전체 이미지를 다시 다운받는 것은 뭔가 낭비 같다.
만약에, 캐시가 만료되었어도, 클라이언트가 가진 데이터와 서버가 가진 데이터가 똑같다면, 구지 서버에서 데이터를 가져오지 않고, 클라이언트의 데이터를 활용할 수 있는 방법은 없을까??
캐시 vs 쿠키
