HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
남득윤 학습 저장소/
네트워크
네트워크/
모든 개발자를 위한 HTTP 웹 네트워크
모든 개발자를 위한 HTTP 웹 네트워크/
8. HTTP 헤더2 - 캐시와 조건부 요청
8. HTTP 헤더2 - 캐시와 조건부 요청
8. HTTP 헤더2 - 캐시와 조건부 요청

8. HTTP 헤더2 - 캐시와 조건부 요청

 
정적 리소스인 tia/tia.png를 요청하는 상황을 가정해보자
 

첫 번째 요청

GET /star.jpg HTTP/1.1
HOST: localhost:8080
 

첫 번째 응답

HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60  <- 캐시 적용
Content-Length: 34012

kj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla
slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123
 
웹 브라우저는 브라우저의 캐시에 60초 동안 유효하다는 정보와 함께 이미지를 저장함
 
두 번째 요청에 대해서
웹 브라우저는 네트워크를 타기전에 브라우저의 캐시를 확인하고 유효기간을 확인하여 이미지를 캐시에서 조회하여 제공
 

What if 캐시 시간 초과?

다시 요청을 네트워크로 날리고 첫 번째 응답과 같은 결과를 받는다.
HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60  <- 캐시 적용
Content-Length: 34012

kj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla
slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123
세 번째 응답
웹 브라우저는 캐시 유효시간을 갱신하고 이미지를 제공한다.
 
 
잘 살펴 보면 서버에서 가지고 있는 이미지는 변하지 않았다. 캐시를 활용하기위해 서버측에서 클라이언트에 변경되지 않았다는 정보만 전달하는 방법은 없을까?

검증 헤더와 조건부 요청 헤더

  • 검증 헤더 (Validator)
    • ETag: "v1.0", ETag: "asid93jkrh2l"
    • Last-Modified: Thu, 04 Jun 2020 07:19:24 GMT
  • 조건부 요청 헤더
    • If-Match, If-None-Match: ETag 값 사용
    • If-Modified-Since, If-Unmodified-Since: Last-Modified 값 사용
 

검증 헤더와 조건부 요청1

 

캐시 시간 초과

  • 캐시 유효 시간이 초과해서 서버에 다시 요청하면
      1. 서버에서 기존 데이터를 변경했을 수도 있고
      1. 서버에서 기존 데이터를 변경하지 않았을 수도 있다.
 
1 번경우를 위해 검증헤더를 활용하자!
HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60  <- 캐시 적용
Last-Modified: 2020년 11월 10일 10:00:00 <- 검증 헤더
Content-Length: 34012

kj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla
slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123
첫 번째 응답
 
브라우저는 이미지를 저장할때 캐시 유효시간 정보(60초) 와 함께 최종 수정일 정보 (2020년 11월 10일 10:00:00)도 저장한다.
 
캐시 유효시간이 지난 시점에 두번째 요청을 하면
  1. 웹 브라우저는 먼저 브라우저의 캐시를 확인하여 캐시 유효시간이 만료되었음을 확인한다.
  1. 캐시가 만료되었으므로 네트워크를 통한 요청이 필요하다. 이때 캐시가 가지고 있는 최종 수정일 정보를 if-modified-since 헤더에 추가한다.
      2. GET /star.jpg HTTP/1.1
HOST: localhost:8080
if-modified-since: 2020년 11월 11일 10:00:00 <- 조건부 요청 헤더
 
  1. 요청을 받은 서버는 리소스의 최종 수정일을 확인한다.
    1. 요청 정보의 최종 수정일과 비교하여 수정이 발생하지 않았다면 304 Not Modified 응답을 내린다.
        2. HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
cache-control: max-age=60
Last-Modified: 2020년 11월 10일 10:00:00

(응답의 메시지 바디는 비어있음)
    2. 수정이 발생하였다면 
        3. HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60  <- 캐시 적용
Last-Modified: 2020년 11월 10일 11:00:00 <- 업데이트된 최종 수정일
Content-Length: 401233

수정된-이미지-바이트
  1. 웹 브라우저는 캐시 처리를 하고 이미지를 제공한다.
 
 

검증 헤더와 조건부 요청 2

 
날짜 기반 검증 헤더와 조건부 요청인 Last-Modified와 If-Modified-Since는 단점이 있다.
  • 서버에서 데이터의 수정을 A→B→A로 다시 바꿔서 내용이 같은 경우
  • 스페이스나 주석 처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경우
→ ETag,와 If-None-Match !!
 
 

캐시와 조건부 요청 헤더

Cache-Control - 캐시 지시어
  • Cache-Control: max-age
    • 캐시 유효 시간, 초 단위
  • Cache-Control: no-cache
    • 데이터는 캐시 해도 되지만, 항상 origin 서버(프록시 X)에 검증(조건부 요청 할 것)하고 사용
  • Cache-Control: no-store
    • 데이터에 민감한 정보가 있으므로 저장하면 안됨