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에서도 똑같이 반영이 되었다는 보장은 없습니다. 실제로 서비스되고 있는 사이트에서는 선택이 아닌 필수적으로 해야할 작업입니다.