[Javascript] 브라우져 캐시 우회하기

XMLHttpRequest 객체를 이용해 서버와 AJAX 통신을 하던 도중, 다음과 같은 문제가 발생하였습니다.

 - A.js 파일을 수정한 후 해당 파일을 비동기로 로드했지만, 수정되지 않은채 로드가 되었습니다.

구글링 통해 알아본 결과 브라우져에서 캐싱하는듯 합니다. 브라우져에서 캐시를 삭제한 후 다시 로드하니 수정된 내용이 로드되었습니다.

조금 더 구글링 해본 결과 Mozilla 사이트에서 해당 내용을 우회할 수 있는 법이 있었습니다. (원문 바로 가기)

내용을 보아 하니 캐시를 우회하는 법은 요청하려는 URL 뒤에 timestamp를 붙여주는 것입니다. "?" 또는 "&" 말이지요.

샘플을 보시면:

http://foo.com/bar.html -> http://foo.com/bar.html?12345
http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345

이렇게 말이죠. 

하지만 하드코딩하지 않는 이상, 매번 저렇게 하기엔 동적이지 않아 다음처럼 자동으로 URL을 만들어 줄 수 있다고 하네요:

var oReq = new XMLHttpRequest();

oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
oReq.send(null);

이렇게 작성 하시면, 호출 할 때마다 현재 timestamp를 URL 뒤에 "?" 또는 "&" 자동으로 붙여 줍니다.