반응형

# 모든 개발자를 위한 HTTP 웹 기본 지식 학습

# 캐시 기본 동작

## 캐시가 없을 때

  • 첫 번째 요청
웹 브라우저
GET /star.jpg

서버
HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 34012

sadasdasd1123.. star 이미지 관련 바이트 코드
  • 두 번째 요청 시 동일한 작업 진행
  • 즉, 캐시가 없을 때 아래와 같은 문제 발생
데이터가 변경되지 않아도 계속 네트워클르 통해서 데이터를 다운로드 받아야 한다.

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

브라우저 로딩 속도가 느리다.

느린 사용자 경험

## 캐시 적용

  • 첫 번째 요청
웹 브라우저
GET /star.jpg

서버
HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60 (캐시가 유효한 시간(초))
Content-Length: 34012

sadasdasd1123.. star 이미지 관련 바이트 코드

브라우저 캐시 (웹브라우저에서 캐시를 저장하는 저장소)
응답 결과를 캐시에 저장
  • 두 번째 요청 시 브라우저 캐시를 확인, 캐시가 유효한 시간인 경우 캐시에서 바로 가져온다. (네트워크 다운로드 발생X)
  • 캐시 적용 장점
캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.

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

브라우저 로딩 속도가 매우 빠르다.

빠른 사용자 경험
  • 세 번째 요청 : 캐시 시간 초과 시
브라우저 캐시
기존 데이터에 새로운 데이터를 덮어씌운다.
그리고 설정된 유효시간으로 다시 초기화

## 캐시 시간 초과

  • 캐시 유효 시간이 초과하면, 서버를 통해 데이털르 다시 조회하고, 캐시를 갱신한다.
  • 이때 다시 네트워크 다운로드가 발생한다.

 

출처 : 인프런 모든 개발자를 위한 HTTP 웹 기본 지식

반응형

+ Recent posts