브라우저의 캐싱 : css, js 등 해결하기

html 파일 2개가 각각 다른 js 파일을 import하고 있는 상황에서, 알 수 없는 오류가 발생했다.

2개의 js 파일 내부적으로 뭔가 중첩되는 부분이 있을 것으로 추측되었다.

 

-> html을 여는 시점에 해당 html이 import하고 있는 js파일을 다시 읽어와야 되는것이 아닌가?

하지만 브라우저는 이미지, js, css 파일 등을 미리 저장해 두고, 이후 이를 다시 이용함으로써 로드 속도를 높인다 = 브라우저는 웹 소스들을 캐싱한다.

 

물론 브라우저의 캐시를 지우면 해결이 가능하지만, 운영 환경에서 사용자들이 매번 캐시를 지울 수는 없는 노릇이다.

---

해결방법

1. 새로운 url 요청하기

파일명 수정하기 : js 파일의 버전이 바뀔 때마다, 파일명을 수정해준다.

 

2. 쿼리 스트링 사용하기

로드 시점에 매번 다른 값으로(난수, 타임스탬프 값 등) 쿼리 스트링을 붙여 js를 요청한다.

 

3. html 메타태그 사용하기

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

 

* no-cache : 캐시된 복사본을 사용자에게 보여주기 이전에, 재검증을 위한 요청을 원 서버로 보내도록 강제한다.

* no-store : 캐시는 클라이언트 요청 혹은 서버 응답에 관해 어떤 것도 저장하지 않는다. 

* must-revalidate : 캐시는 사용하기 이전에 기존 리소스의 상태를 반드시 확인해야 하며 만료된 리소스는 사용되어서는 안 된다.

 

4. window.open()으로 새 창 열기

window 객체의 open 함수를 통해 캐싱되지 않은 새로운 브라우저를 연다.