browser 3

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

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

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

Cross-domain 환경에서 oauth를 통한 access-token 쿠키 등록하기

오늘의 이슈는 cross-domain 환경에서 쿠키가 등록 되지 않는것에서 시작된 이슈였다. 로그인 버튼을 누르면 server domain에는 쿠키가 정상적으로 등록이 되지만 web domain에는 쿠키가 등록이 되지않아 유저정보를 받아올 수 없는 이슈였다. 먼저 환경에 대한 설명으로는 A라는 도메인을 가진 next.js로 만들어진 웹 페이지, B라는 도메인을가진 koa로 만들어진 서버가 존재하며 두 개의 project에서 oauth를 사용해야 할 일이 있어 kakao,google oauth를 연동하게 되었다. 이는 localhost에서는 정상적으로 동작하였지만(도메인이 같음) release시 cross-domain환경이 되어 쿠키가 정상적으로 등록되지 않는 이슈가 발생하였다. 왜 이런 이슈가 발생하게 ..

browser 2023.01.14