javascript(*.js) 파일 Style sheet(*.css)파일 인터넷 캐쉬 문제 관리하기

<BASE target="_son">

초보 웹 프로그래머를 귀찮고 당황하게 하는 경우를 하나 소개하고자 한다. <상황> 이미 라이브된 웹 사이트에서 사용자가, 특정한 경우에 자바스크립트 에러가 난다는 것을 리포팅했다. 팀장이 그 이야기를 듣고 당장 고쳐놓으라고 주문한다. 급하게 javascript 파일인 js파일을 열어서 수정한 다음 서버에 업로드를 마쳤다. 그리고 팀장에게 '수정 완료했습니다.' 보고를 한다. 그런데 왠일인지 팀장이 확인을 해보더니 '아직 그대론데?"라고 한다. 살펴보니 아까 그 페이지를 보았을 때 사용된 js파일을 팀장의 웹 브라우저가 웹 캐쉬에 저장해두었고 그 캐쉬를 그대로 사용하여 페이지를 불렀기 때문에 갱신이 안된 것이다. 'Ctrl+F5눌러서 캐쉬 무시하고 리로드 해보세요' 그렇게 하더니 팀장은 '어.. 이제 되네.. 수고했어..'라고 한다. 그런데 그렇게 만만한 팀장은 아니다. '근데 말이야, 다른 사용자들도 Ctrl+F5 안누르면 나처럼 다 에러나는거 아냐?' 맞는 말이다. 그래서 개발자는 이야기한다. '시간이 좀 지나면 서서히 갱신이 될겁니다... IE가 다 그렇죠 뭐~~~' 하지만 역시 만만한 팀장은 아니다. '무슨 소리를 하는거야, 무슨 수를 써서든 사용자들이 갱신된 js파일을 적용받도록 해!' 이런 일, 웹 개발자들이 한번씩 경험하는 일이라고 생각하는데... 이 때의 어떻게 해결하는 것이 가장 현명할까? 1. js 파일명을 바꾸어서 서버에 저장하고, HTML에서도 수정한다. 수정전 : <script type="text/javascript" src="/js/scripts.js"></script> 수정후 : <script type="text/javascript" src="/js/scripts_v2.js"></script> 이렇게 하면 당장 해결은 되겠지만, 이런 일이 반복되다 보면 서버측에 는 script파일들이 잔뜩 쌓이게 되고 버전 관리가 복잡하게 된다. 서버에서 해당 디렉토리를 열어보면, script.js, script_v2.js, script_20071206.js, script.bk.js, script_last.js... 이렇게 되어있기 십상이다. 그러다가 어느 날 큰맘먹고 최신 버전 이외의 파일을 싹 delete하면, 갑자기 갑자기 몇개의 페이지에서 에러가 발생하기 시작한다. '어, 여기 제가 담당하는 페이지 에러가 나는데요? 누가 script_the_last.js 파일 삭제했어요?' '아니, 제가 지웠는데요, 아직도 그 파일쓰고 있었어요? 3개월전에 script_real_last.js로 바꿨어요~~' 차라리 이렇게 발견이라도 되면 다행이다. 발견되지 않고 몇주동안 에러가 나는 페이지를 고객에게 서비스하게 되는 일이 일어나지 말라는 법이 없다. 그래서 이방법은 비추천. (특히 계절마다 갑자기 책상을 말끔히 정리하고 싶은 충동이 드는 사람들에게 비추천^^) 2. 웹 서버 설정을 바꾸어서, 또는 다른 방법으로, JS 파일이 캐쉬를 타지 않도록 한다. 어떤 이들은 스크립트가 호출되는 페이지를 no-cache로 하면 된다고 하기도 하는데, 해보면 잘 안될것이다. 그것은 스크립트파일을 no-cache하라는게 아니라, 그 페이지를 no-cache할 뿐 JS 파일자체를 no-cache로 해야 하며 이 파일이 있는 웹서버의 설정을 바꾸면 캐쉬를 타지 않게 할 수 있다. 그러면 원천적으로 사용자의 브라우저는 항상 JS파일을 서버에서 받아오게 된다. 하지만, 웹서버 숫자가 너무 많거나, 디렉토리 설계상 너무 복잡해서 힘들거나, 시스템 엔지니어링 팀과 평소 사이가 안좋아서 고쳐주지 않는 일이 발생할 수도 있다. (서버에서 웹캐쉬 expire 주기를 조정하는 것도 방법이다) 그럴 때 생각해보는 방법 수정전 : <script type="text/javascript" src="/js/scripts.js"></script> 수정후 : <script type="text/javascript" src="/js/scripts.php"></script> static파일인 js파일을 asp로 확장자를 바꾸었고, 해당 웹서버가 php확장자는 모두 php 웹스크립트로 인식하도록 되어있다면 위와 같이 바꾸면 일반적인 웹서버 설정, 브라우저 설정에서 캐쉬로 저장하는 것은 브라우저가 열려있는 동안이다. 브라우저 창 모두 닫고 새창 열어서 다시 들어가면 갱신된다는 뜻. 하지만, 위의 어떤 방법이든, static파일로서 웹서버를 혹사시키지 않고 사용자 캐쉬를 사용해야 하는 파일을 강제로 항상 갱신하게 되는 결과가 되어, 사용자가 많은 사이트의 경우 서버 증설이 필요할 정도의 비효율이 발생할 수도 있다. 그래서 비추천. 3. 그래서 어떻게 하면 좋나? 수정전 : <script type="text/javascript" src="/js/scripts.js"></script> 수정후 : <script type="text/javascript" src="/js/scripts.js?version=20071207"></script> 1번과 2번 방법이 섞인것 같아 보이는가? 하지만 아니다. 서버에는 실제로 scripts.js 파일만 올라가 있다. 또, 수정후에 뒤에 붙은 변수인 version=20071207은 php에서처럼 스크립트에 입력되는 request가 아니라 그냥 구분을 위해서 붙여놓은 것이다. 해단 request 변수는 js 파일에 영향을 미치지 않는다. 이렇게 해 두면 웹 브라우저는 버전별로 다른 웹 캐쉬를 생성하게 된다. 보통의 웹 브라우저는 /js/scripts.js?version=20071207 과 /js/scripts.js?version=20071208 이 있을 때 script.js파일이 변경이 없다고 하더라도 서로 다른 웹 캐쉬에 저장하도록 되어 있다 이것을 이용해서, 서버에는 scripts.js파일 하나만 존재하면서 사용자 브라우저에 남아있는 캐쉬가 갱신되어야 하는지 아닌지를 적절히 수정할 수 있다. 이런 이유로 1번 방법과는 달리 스크립트 파일의 버전관리를 쉽게 할 수 있다. 또한, 스크립트가 여러 페이지에 include되어 있는 경우라고 해도 어떤 페이지에서는 <script type="text/javascript" src="/js/scripts.js?version=20071207"></script> 또 다른 페이지에서는 <script type="text/javascript" src="/js/scripts.js?version=20071208"></script> 심지어는 어떤 페이지에서는 <script type="text/javascript" src="/js/scripts.js"></script> 와 같이 제각각으로 되어있더라도 서버에 script.js파일만 있으면 에러가 발생하지 않고, 또한 개발자가 의도하지 않은 경우에는 기본적으로 항상 인터넷 캐쉬가 정상동작하게 되어, 업그레이드시 발생할 수 있는 장애위험이 줄어들게 되고, 특히 스크립트 파일에 새로운 함수를 추가한 정도로만 변형하여 다시 갱신한 경우에 유용하다. 경험적으로 알고 있던 내용인데, 검색하면 쉬이 찾을 수가 없어서, 나라도 올려두면 누군가 찾아볼 수 있기를 바라는 마음에 올려본다. 내가 적용해 둔 것은 아니지만, 실제 예를 보고 싶으면, 2007년 12월 11일 현재, http://music.cyworld.com/ 에 가서 소스보기를 하면 상단에 다음과 같은 라인을 발견할 수 있을 것이다 <link rel="stylesheet" type="text/css" href="/include/css/music4_main.css?v=071205" media="screen" /> 이런식이다 [출처] javascript(*.js) 파일 Style sheet(*.css)파일 인터넷 캐쉬 문제 관리하기 |작성자 여유