캐시(Cache)는 다운로드한 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용합니다. 우선 캐시를 사용하지 않을 때의 예시를 들어보겠습니다.
서버에서 logo.jpg라는 이미지를 받아오는 요청을 보낸다고 해봅시다. 첫 번째 요청에서는 이미지를 통째로 받아오게 됩니다. 해당 이미지를 받아온 적이 없으니까요. 이때 HTTP 헤더의 용량이 0.1M, 이미지의 용량이 1.0M라면 응답의 총용량은 1.1M이 될 겁니다.
문제는 두 번째 요청부터입니다. 완전히 똑같은 파일을 또다시 받아오는 일이 발생하기 때문입니다. 똑같은 데이터를 굳이 다시 받을 필요가 있을까요? 전에 받아두었던 파일을 재사용할 수 있다면, 첫 번째 요청을 보냈을 때처럼 1.1M의 응답을 통째로 받아올 필요 없이 HTTP헤더의 용량인 0.1M만 받아도 될 것 같은데 말이죠.
한 두 번은 그렇다고 쳐도, 100번, 1000번의 요청을 보내는 동안 똑같은 파일을 받아온다고 생각해 봅시다. 똑같은 파일을 받느라 100M, 1000M의 네트워크 리소스를 낭비하게 될 것입니다. 이럴 때 캐시를 활용하면 이러한 리소스 낭비를 막을 수 있습니다. 캐시를 사용하게 되면 어떤 일이 일어나는지 확인해 봅시다.
이번에는 서버에서 응답을 보내줄 때 이미지 파일과 함께 헤더에 Cache-Control을 작성해서 보내준 것을 볼 수 있습니다. 값은 60으로, 해당 이미지 파일이 60초 동안 유효하다는 것을 의미합니다.
이제 두 번째 요청부터는 캐시를 우선 조회하게 됩니다. 캐시에 데이터가 존재하면서 아직 60초가 지나지 않아 유효하다면 캐시에서 해당하는 데이터를 가져와서 사용하게 됩니다.
만약 유효 시간이 60초가 지났다면? 서버에서 다시 이미지를 받아오게 됩니다. 캐시 유효 시간 동안은 똑같은 데이터를 다시 받아올 필요가 없어지는 것이죠.
이렇게 브라우저 캐시를 활용하면 다음과 같은 효과를 볼 수 있습니다.
캐시를 활용하면 캐시가 유효한 시간 동안은 캐시에 저장해 놓은 데이터를 재활용할 수 있다는 것을 알게 되었습니다. 하지만 다음과 같은 경우는 어떨까요?
