1. 캐시 사용하기

---

• 캐시(Cache)는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.

• 브라우저 캐시를 활용하면 아래과 같은 효과를 볼 수 있다.

  • 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음
  • 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라짐
  • 로딩이 빨라진 만큼 빠른 사용자 경험 제공 가능

1) 캐시를 사용하지 않는 경우

• 서버에서 logo.jpg라는 이미지를 받아오는 요청을 보낼 경우 첫 번째 요청에서는 해당 이미지를 받아온 적이 없으므로 이미지를 통째로 받아오게 된다. 이때 HTTP 헤더의 용량이 0.1M, 이미지의 용량이 1.0M라면 응답의 총 용량은 1.1M이 된다.

• 그러나 두 번째 요청부터는 완전히 똑같은 파일을 또 다시 받아오는 일이 발생한다. 전에 받아두었던 파일을 재사용할 수 있다면, 첫 번째 요청을 보냈을 때처럼 1.1M의 응답을 통째로 받아올 필요없이 HTTP헤더의 용량인 0.1M만 받아도 된다.

• 100번, 1000번의 요청을 보내는 동안 똑같은 파일을 받아온다면 똑같은 파일을 받느라 100M, 1000M의 네트워크 리소스를 낭비하게 될 것이다. 이럴 때 캐시를 활용하면 이러한 리소스 낭비를 막을 수 있다.

2) 캐시를 사용하는 경우

• 서버에서 응답을 보내줄 때 이미지 파일과 함께 헤더에 Cache-Control 을 작성해서 보내준 것을 볼 수 있다. 값은 60으로, 해당 이미지 파일이 60초동안 유효하다는 것을 의미한다.

• 두 번째 요청부터는 캐시를 우선 조회하게 된다. 캐시에 데이터가 존재하면서 아직 60초가 지나지 않아 유효하다면 캐시에서 해당하는 데이터를 가져와서 사용하게 된다.

• 유효 시간 60초가 지났다면 서버에서 다시 이미지를 받아오게 된다. 캐시 유효 기간 동안은 똑같은 데이터를 다시 받아올 필요가 없어진다.