모든 개발자를 위한 HTTP 웹 기본 지식 강의 수강 후, 정리한 글입니다.
목차
- 캐시 미사용
- 캐시 사용
캐시(cache)는 데이터나 값을 미리 복사해 놓는 임시 장소다. 캐시에 데이터를 복사해놓으면 데이터 계산이나 접근 시간없이 빠른 속도로 데이터에 접근할 수 있다.
1. 캐시 미사용
아래 사진은 캐시를 사용하지 않을 때, 요청과 응답이다. star.jpg 크기를 1.1M으로 가정하면, 서버는 HTTP 헤더(0.1M) + HTTP 바디(1.0M) = 1.1M을 보내고 클라이언트는 이 데이터를 다운받는다.
단점
이 과정은 요청을 한 번 하든, 두 번하든, 횟수에 상관없이 매번 똑같은 과정이 이루어진다. 그래서 다음과 같은 단점이 있다.
- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운받아야 한다.
- 인터넷 네트워크는 매우 느리고 비싸다.
- 브라우저 로딩 속도가 느리다.
→ 느린 사용자 경험
2. 캐시 사용
cache-control은 캐시가 유효한 시간(초)으로 클라이언트가 응답을 받은 시점부터 max-age 시간(초)동안 캐시가 유효함을 설정하는 헤더이다.
캐시 유효시간을 60초로 설정하여 서버가 응답을 보내내면, 웹 브라우저가 응답받은 데이터를 브라우저 캐시에 저장한다.
다시 start.jpg가 필요하면, 캐시를 먼저 확인하여 캐시 유효 시간을 검증한다. 유효한 데이터라면, 캐시에서 조회하여 사용한다.
만약 캐시를 먼저 확인하였을 때, 유효 시간이 초과되었다면? 서버에 요청하고, 데이터를 응답받아서 처음 요청한 것처럼 캐시에 데이터를 저장한다.
장점
- 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.
- 비싼 네트워크 사용량을 줄일 수 있다.
- 브라우저 로딩 속도가 매우 빠르다.
- 빠른 사용자 경험
공부 기록