[HTTP] 웹 기본 지식 정리 - HTTP 헤더(캐시와 조건부 요청)①

- 이 게시글은 인프런 "모든 개발자를 위한 HTTP 웹 기본지식"의 김영한님 강의를 보고 요약한 내용입니다.

---

1. 캐시 기본 동작

캐시 미사용

1) 첫 번째 요청

GET /star.jpg

- 웹 브라우저가 star 이미지 요청

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

lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123

- 서버에서 응답

※ star.jpg 용량이 1.1M로 가정! (HTTP 헤더: 0.1M, HTTP 바디: 1.0M)

- 총 1.1M의 네트워크를 차지하여 웹 브라우저에 보여줌

 

2) 두 번째 요청

- 첫 번째 요청과 같은 방식으로 작동

- 총 1.1M 용량의 이미지를 다시 내려 웹 브라우저에 보여줌

 

▶ 데이터가 변경되지 않아도 항상 네트워크를 통해서 데이터 다운로드 받아야함

▶ 브라우저 로딩 속도가 느림

 

캐시 사용

1) 첫 번째 요청

GET /star.jpg

- 웹 브라우저가 star 이미지 요청

HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60
Content-Length: 34012

lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123

- 서버에서 응답

- 캐시가 유효한 시간(초)을 표시하는 cache-control 포함

- 총 1.1M의 네트워크를 차지하여 웹 브라우저에 보여줌

- 브라우저 캐시에 60초 유효하도록 응답결과를 캐시에 저장

 

2) 두 번째 요청

- 브라우저 캐시에서 요청하는 것을 찾음

- 캐시 유효 시간을 검증하여 유효하다면, 캐시에서 바로 조회(네트워크 사용 X)

 

▶ 캐시 가능 시간동안 네트워크를 사용할 필요가 없음

▶ 브라우저 로딩 속도가 매우 빠름

 

3) 세 번째 요청

- 브라우저 캐시에서 요청하는 것을 찾음

- 캐시 유효 시간이 초과된 경우 가정

- 첫 번째 요청과 같은 과정 반복해야함

- 총 1.1M 용량의 이미지를 다시 내려 웹 브라우저에 보여줌(네트워크 다시 사용)

 

▶ 캐시 유효시간 초과시, 서버를 통해 다시 조회 후 캐시 갱신

▶ 다시 네트워크 다운로드 발생

 

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

캐시 시간이 초과되었을 때 서버에서 다시 요청하면 나타나는 두 가지 상황

1) 서버에서 기존 데이터를 변경한 경우

- 클라이언트에서 다시 요청 후, 서버에서 변경된 새로운 데이터 응답

 

2) 서버에서 기존 데이터를 변경하지 않은 경우

- 데이터 전송 대신 저장해놓았던 캐시 재사용 가능

→ 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법이 필요 !

▶ 검증 헤더 추가

 

① 첫 번째 요청

GET /star.jpg

- 웹 브라우저가 star 이미지 요청

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

lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjklasl kjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123

- 서버에서 응답

- 데이터가 마지막에 수정된 시간을 표시하는 Last-Modified(검증 헤더) 추가

- 총 1.1M의 네트워크를 차지하여 웹 브라우저에 보여줌

- 브라우저 캐시에 60초 유효하도록 응답결과를 캐시에 저장 + 데이터 최종 수정일

 

② 두 번째 요청

- 캐시 유효 시간이 초과된 경우 가정

GET /star.jpg
if-modified-since: 2020년 11월 10일 10:00:00

- 웹 브라우저가 서버에 요청을 보낼때, if-modified-since(브라우저 캐시에 있는 데이터 최종 수정일, 조건부 요청) 추가

▶ 서버에서 서버의 데이터 최종 수정일과 클라이언트가 요청한 데이터 최종 수정일 비교하여 검증 가능 !

 

→ 데이터 수정이 됐을 경우

- 200 OK 응답과 함께 모든 데이터 전송(Body 포함)

- 총 1.1M의 네트워크를 차지하여 웹 브라우저에 보여줌

 

→ 데이터 수정이 안됐을 경우

HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
cache-control: max-age=60
Last-Modified: 2020년 11월 10일 10:00:00
Content-Length: 34012

- 서버에서 응답

- HTTP Body가 없음 → 총 0.1M 전송(HTTP 헤더:0.1M, HTTP 바디: 1.0M) → 네트워크 부하 감소

- 브라우저 캐시에서 응답 결과를 재사용, 헤더 데이터 갱신 → 캐시에서 조회

 

▶ 304 Not Modified + 헤더 메타 정보만 응답

▶ 클라이언트는 서버가 보낸 응답 헤더정보로 캐시의 메타정보 갱신

▶ 클라이언트는 캐시에 저장되어있는 데이터 재활용 

▶ 용량이 적은 헤더 정보만 다운로드하여 사용 → 실용적인 해결책

 

검증 헤더

- 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터

- Last-Modified, ETag

 

조건부 요청 헤더

- 검증 헤더로 조건에 따른 분기

- if-Modified-Since : Last-Modified 사용

- if-None-Match : ETag 사용

- 조건이 만족하면 200 OK, 만족하지 않으면 304 Not Modified

 

 

if-Modified-Since : Last-Modified의 단점

• 1초 미만 단위로 캐시 조정이 불가능
• 날짜 기반의 로직 사용
• 날짜는 다르지만, 같은 데이터 수정으로 결과가 똑같은 경우
• 별도의 캐시 로직을 관리하고 싶은 경우(스페이스, 주석과 같이 크게 영향 없는 변경)

▶ if-None-Match : ETag 사용

 

ETag(Entity Tag)

- 캐시용 데이터에 임의의 고유한 버전이름 표현

- 데이터 변경 → 이름 변경(Hash 다시 생성)

- 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받기 !

 

1) 첫 번째 요청

GET /star.jpg

- 웹 브라우저가 star 이미지 요청

HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=60
ETag: "aaaaaaaaaa"
Content-Length: 34012

lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjklasl kjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123

- 서버에서 응답

- 브라우저 캐시에 응답 결과와 ETag 값 저장

- 총 1.1M의 네트워크를 차지하여 웹 브라우저에 보여줌

 

2) 두 번째 요청

- 캐시 유효 시간이 초과된 경우 가정

GET /star.jpg
If-None-Match: "aaaaaaaaaa"

- 웹 브라우저가 서버에 요청을 보낼때, if-None-Match(조건부 요청) 추가

▶ 서버에서 검증 가능

 

→ 데이터 수정이 됐을 경우(Not Match)

- 200 OK 응답과 함께 모든 데이터 전송(Body 포함)

- 총 1.1M의 네트워크를 차지하여 웹 브라우저에 보여줌

 

→ 데이터 수정이 안됐을 경우(Match)

HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
cache-control: max-age=60
ETag: "aaaaaaaaaa"
Content-Length: 34012

- 서버에서 응답

- HTTP Body가 없음 → 총 0.1M 전송(HTTP 헤더:0.1M, HTTP 바디: 1.0M) 

- 브라우저 캐시에서 응답 결과를 재사용, 헤더 데이터 갱신

 

▶ 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받기

▶ 캐시 제어 로직을 서버에서 완전히 관리

▶클라이언트는 캐시 메커니즘을 모른상태로 이 값을 서버에 제공