[모든 개발자를 위한 HTTP 웹 기본 지식] 7. HTTP 헤더2 (캐시와 조건부 요청) - 캐시 기본 동작

인프런 김영한님 [모든 개발자를 위한 HTTP 웹 기본 지식] 강의를 듣고 정리한 내용입니다.😊😊

 

1. 캐시가 없을 때

👉 첫 번째 요청

1) 웹브라우저에서 /star.jpg 이미지를 서버에 요청하면, 서버에서 HTTP 헤더(0.1M) + HTTP 바디(1.0M) star.jpg에 대한 응답을 보낸다.

 

2) 웹브라우저에 이미지가 표시된다. 

 

 

👉 두 번째 요청 

1) 웹브라우저에서 /star.jpg 이미지를 서버에 두번째 요청하면, 서버에서 HTTP 헤더(0.1M) + HTTP 바디(1.0M) star.jpg에 대한 응답을 보낸다.

 

2) 웹브라우저에 이미지가 표시된다. 

 

💡 캐시가 없을 때 특징 

- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다. 

- 인터넷 네트워크는 매우 느리고 비싸다.

- 사용자 입장에서 브라우저 로딩 속도가 느리게 느껴진다.

 

 

2. 캐시 적용 

👉 첫 번째 요청 

1) 웹브라우저가 start.jpg 최초 요청을 하면 HTTP 헤더에 cache-control 캐시가 유효한 시간을 설정해서 응답한다

max-age = 60은 60초 동안 유지한다는 뜻이다.!

 

2) 서버에서 웹브라우저로 응답한 결과를 브라우저 캐시(브라우저에 캐시를 저장하는 저장소)에 60초 동안 저장한다.

 

 

👉 두 번째 요청 

1) 웹브라우저에서 star.jpg 요청하기 전에 브라우저 캐시에 먼저 요청하고 캐시 유효 시간 검증한다. 

 

2) 캐시 시간(60초)이 유효하다면 캐시에서 직접 조회하여 브라우저에 이미지를 표시한다.

 

 

💡 캐시 적용 특징 

- 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다. 

- 비싼 네트워크 사용량을 줄일 수 있다. 

- 사용자 입장에서 브라우저 로딩 속도가 매우 빠르다.

 

👉 세 번째 요청 - 캐시 시간 초과 

1) 웹브라우저에서 star.jpg를 세번째 요청할 때 캐시 유효 시간을 검증한다. 

 

2) 캐시 유효 시간이 초과 되었다면, 서버에 다시 /star.jpg를 요청한다. 서버는 첫번째 요청이 들어왔을 때와 동일하게 캐시 유효시간을 설정하여 HTTP 헤더(0.1M) + HTTP 바디(1.0M) star.jpg에 대한 응답을 보낸다.

 

3) 응답한 결과를 브라우저 캐시(브라우저에 캐시를 저장하는 저장소)에 60초 동안 다시 저장한다.

 

💡 캐시 시간 초과 특징 

- 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다. 

- 이때 다시 네트워크 다운로드가 발생한다. 

 

 

---

 

❓ 질문 정리 ❗

Q. 캐시와 쿠키의 차이

1) 쿠키는 서버의 필요에 의해 클라이언트에 저장하는 데이터이고

2) 캐시는 클라이언트 자체에서 페이지 로드를 효율적으로 하기 위해 저장하는 데이터이다.