JS, CSS 파일 수정한 내용 적용안될 때

     

    변경사항이 있는 JS, CSS 파일을 수정하고 WEB서버 또는 WAS서버에 반영을 했는데 수정한 내용을 테스트해보면 적용이 안되는 경우가 있습니다. 로컬에서 테스트를 하면 수정한 내용이 정상적으로 동작을 하는데 말이죠. 그 이유는 브라우저가 캐쉬를 사용하기 때문에 브라우저의 캐쉬에 적재된 JS나 CSS 파일 내용으로 계속 처리가 되기 때문입니다. 새로 변경된 파일임을 브라우저가 인식하지 못해서 생기는 문제입니다. 바로 반영이 될 수도 있고, 몇번 새로고침(F5)을 통해서 반영이 되기도 하지만 사용자가 접속했을때 수정한 내용이 바로 반영이 되어야 제대로 서비스를 할 수 있겠죠. 특히, 시험창이나 결제 등 크리티컬한 작업을 하는 곳에서는 더더욱 바로 반영되야겠죠. 그래서 브라우저가 캐쉬에 있는 파일을 사용하지 않고 새로 변경된 파일을 사용하도록 하는 방법에 대해서 알아보겠습니다.

     
     
     

     ✔ test라는 이름의 CSS파일을 include하고 있습니다. 위의 내용처럼 되어 있는 경우 test.css 파일을 수정해서 반영하면 적용이 바로 안될 수도 있습니다.


     ✔ CSS파일명 뒤에 버전 정보를 쿼리스트링 형태로 추가해줍니다. "?ver=버전" 여기서 버전은 어떤 숫자를 넣어도 상관없습니다. 버전 정보를 파일명 뒤에 추가함으로써 브라우저가 기존 URL과는 다른 URL임을 인식하게 되어서 캐쉬된 파일대신에 쿼리스트링이 추가된 CSS파일을 사용하게 됩니다.

     
     

     ✔ 이번에는 JS파일입니다. test라는 이름의 JS파일을 include하고 있습니다.


     ✔ CSS파일과 방법은 동일합니다. JS파일명 뒤에 버전 정보를 쿼리스트링 형태로 추가해서 브라우저가 기존 캐쉬에 있는 파일과는 다른 파일로 인식시키도록 합니다.



        마치면서

    수정한 JS, CSS 파일이 제대로 적용 안되었을 경우 쿼리스트링을 사용하여 변경된 파일로 적용되는 방법에 대해서 알아보았습니다. JS, CSS 파일의 경우 내 PC에서 확인했을 때 수정한 내용이 반영이 되었다고 해서 다른 모든 PC에서도 똑같이 반영이 되었다는 보장은 없습니다. 실제로 서비스되고 있는 사이트에서는 선택이 아닌 필수적으로 해야할 작업입니다.

     
     
     


      ✔ 다른 글 보러가기


      이미지 해상도 유지하면서 파일사이즈 줄이기


      IE 실시간 메모리 사용량 확인하기


      IE 버전별 블로그 호환성 테스트 방법 - 개발자도구


      마우스 오른쪽 버튼 잠금 해제 방법 - 크롬 확장프로그램 Pig Toolbox


      블로그 소스 코드를 보기좋게 Color Scripter 사용법


      반응형 스킨 해상도별 미리보기 사이트 - 트로이(Troy)


      블로그 유입경로 openapi 는 무엇인가?


      블로그 운영을 위한 HTML, CSS, JS 파일 소스 코드 정렬하기


      블로그 속도 향상을 위한 HTML, CSS, JS 파일 용량 줄이기