캐싱 2

브라우저 캐시 정책으로 인한 버전 충돌 에러 해결

개요 얼마전에 회사에 내가 작업한 코드가 배포되었는데 직후 실 서비스에서 엄청난 에러로그가 발생하여 바로 롤백을 하게된 일이 있었다. 원인으로는 새로운 버전이 배포되면서 이전 버전을 사용하고 있던 유저가 페이지를 새로고침 하지 않고 내부 팝업을 열었을때에 새로운 버전의 코드를 가져와 오래된 버전의 코드와 충돌이 발생하는것이였으며, 새로운 버전의 코드를 가져오면 해당 코드로 잘 동작하는것이 당연하다고 생각할 수 있지만 회사 프레임워크에서 어떠한 파일을 실행할때에 내부적으로 클로저로 한번 감싸 오래된 코드가 남아있을 수 있는 가능성이 잠재되어 있었다. 물론 이러한 방식은 캐시가 정상적으로 동작한다고 가정하였을때에 유효한 방식이라고 말할 수 있다. 하지만 캐시가 정상적으로 동작하지 않았으며 내가 배포한 코드가..

browser 2024.03.31

브라우저는 어떻게 캐시 만료시간을 정하나요?

기본적으로 서버쪽에서는 response header에 “expires", "cache-control”, “max-age”, 클라이언트 쪽에서는 fetch시에 header의 cache 값을 통해 캐시의 만료, 정책 설정이 가능하다. 네트워크 요청시에 요청의 response header에 cache-control, expires, max-age 등을 포함해서 캐시의 만료 정책을 명확하게 나타내는 헤더 설정이 없고 last-modified 설정만 존재한다면 대부분의 브라우저는 heuristic freshness 라는 정책을 사용하여 캐시 기간을 설정한다. 계산식은 아래와 같다. which is the one suggested by RFC 7234 (date time - last modified time) / ..

browser 2024.03.29