인프런 김영한님 [모든 개발자를 위한 HTTP 웹 기본 지식] 강의를 듣고 정리한 내용입니다.😊😊
1. 캐시 시간 초과
캐시 유효 시간이 초과해서 서버에 다시 요청하면 다음 두 가지 상황이 나타난다.
1) 서버에서 기존 데이터를 변경⭕
- 서버에서 변경된 데이터를 받는다.
2) 서버에서 기존 데이터를 변경❌
- 데이터를 전송하는 대신에 저장해 두었던 캐시를 재사용 할 수 있다.
- 단, 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법이 필요
2. 검증 헤더 추가
👉 첫 번째 요청
1) 웹브라우저에서 star.jpg를 요청하면, 서버는 cache-control과 Last-Modified(데이터 마지막 수정된 시간 = 데이터 최종 수정일)을 HTTP 헤더에 추가하여 응답한다.
2) 브라우저 캐시는 cache-control과 Last-Modified(데이터 최종 수정일) 응답 결과를 캐시에 저장한다.
👉 두 번째 요청 - 캐시 시간 초과
1) 웹브라우저가 캐시 만료후 요청을 보낸다.
2) 웹브라우저가 if-modified-since : 데이터 최종 수정일 값을 HTTP 요청 헤더를 포함하여 요청한다.
3) 서버에서 if-modified-since : 데이터 최종 수정일 값을 포함한 새로운 요청이 왔다.
4) 서버에서 star.jpg 데이터 최종 수정일과 요청한 jpg의 데이터 수정일과 동일한 지 검증이 가능하다.
두개(요청/응답 데이터)의 날짜가 동일하다면, 데이터가 아직 수정되지 않았다고 판단한다.
5) 데이터 수정이 되어있지 않다면 서버에서 HTTP Body 없이 HTTP 헤더에 304 NOT Modified (=변경된 게 없다는 뜻)를 응답한다.
HTTP BODY 없이 HTTP header 부분만 전송하면 네트워크 부하가 줄어든다.
6) 웹브라우저에서 304 NOT Modified 응답을 받으면 응답 결과를 재사용하고 캐시 데이터를 갱신한다.
7) 웹브라우저는 캐시에서 데이터를 조회하여 사용한다.
💡 검증 헤더와 조건부 요청 정리
- 캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않으면 304 Not Modified + 헤더 메타 정보만 응답(바디❌)
- 클라이언트는 서버가 보낸 응답 헤더 정보로 캐시의 메타 정보를 갱신
- 클라이언트는 캐시에 저장되어 있는 데이터 재활용
-> 결과적으로 네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드
🔎 실제 사용 예시
웹브라우저에서 검색 후 이미지를 새로 고침 하면, 응답 코드(Status)에 304를 확인 할 수 있다.
Request Header 에 보면 if-Modified-Since 로 서버에서 데이터가 변경되었는 지 확인하기 위한 검증 헤더를 확인 할 수 있다.
❓ 질문 정리 ❗
Q. if-modified-since 값을 헤더에 붙여서 요청을 보내는 것은 프론트엔드 개발자가 해야하는 부분인가요? 서버에서 304로 응답을 보낼 때, 백엔드 개발자가 이를 처리해줘야 하나요?
A. 1) if-modified-since는 클라이언트(브라우저)에서 자동으로 붙여준다.
2) 스프링에서 제공되는 etag 관련 필터가 있는데, 리소스가 변경되지 않았다면 자동으로 304로 응답한다.
이 둘 다 개발자가 따로 설정해줄 필요는 없다.
요청에 대한 응답 메시지는 모두 서버에서 만들어서 제공된다. 다만 개발자가 헤더에 직접 추가할 수도 있다.
[출처] https://www.inflearn.com/questions/259528
Q. last-modified는 개발자가 설정하는 부분이 아니고 서버에서 자동으로 설정해준다. 그럼 리소스가 마지막으로 수정된 시간을 서버가 어떻게 알고 last-modified 값을 자동 설정해주는 것인가요??
A. 서버의 파일시스템이 관리하는 파일 정보를 통해 last-modified 값을 설정한다.
일반적으로 운영체제의 파일 시스템은 파일 정보로 마지막으로 수정된 날짜를 가지고 있는데, 서버는 이를 비교하여 해당 정보를 수정한다.
[참고] https://www.inflearn.com/questions/527142
'📚 Computer Science > Network' 카테고리의 다른 글
[모든 개발자를 위한 HTTP 웹 기본 지식] 7. HTTP 헤더2 (캐시와 조건부 요청) - 캐시와 조건부 요청 헤더 (0) | 2023.08.17 |
---|---|
[모든 개발자를 위한 HTTP 웹 기본 지식] 7. HTTP 헤더2 (캐시와 조건부 요청) - 검증 헤더와 조건부 요청2 (0) | 2023.08.17 |
[모든 개발자를 위한 HTTP 웹 기본 지식] 7. HTTP 헤더2 (캐시와 조건부 요청) - 캐시 기본 동작 (0) | 2023.08.17 |
[모든 개발자를 위한 HTTP 웹 기본 지식] 7. HTTP 헤더1 (일반 헤더) - 인증, 쿠키 (0) | 2023.08.16 |
[모든 개발자를 위한 HTTP 웹 기본 지식] 7. HTTP 헤더1 (일반 헤더) - 일반 정보, 특별한 정보 (0) | 2023.08.16 |