운영 WEB 서버에 JS와 CSS를 반영하면서 새로운 JS나 CSS 파일이 적용 안되는 경우가 있었다.
그 이유는 브라우저 캐시에 예전의 JS, CSS이 남아있기 때문이다. 다음 세가지 방법으로 해결 가능하다.
1. 강력 새로고침
크롬 강력 새로고침 단축키 : Ctrl + Shift + R
2. 캐시 지우기
Ctrl+Shift+Delete(Windows) 또는 Shift+Command+Delete(MAC)를 누르면 브라우저 캐시 및 쿠키를 삭제할 수 있는 화면으로 이동한다.
Ctrl + F5키(혹은 Ctrl + Shift + R)를 눌러서 해당 페이지의 캐시를 삭제하면서 새로고침해서 수정한 js/css파일을 새로 가져올 수 있다. 하지만 사이트를 이용하는 모든 유저들에게 Ctrl + F5키를 눌러서 캐시삭제 후 사이트를 이용해달라고 할 수는 없다. 그러므로 아래의 방법을 이용해보자!
3. 변경
1) CSS나 JS 파일명 바꾸어 보기
수정 후 파일의 이름을 바꿔서 브라우저에서 새로 받아오게 하는 방법이 있다.
test.js -> 수정 후 파일 이름 변경 -> test2.js
[기존 정의]
<script type="text/javascript" src="test.js">
자바스크립트 수정 전
</script>[변경 이후 정의]
<script type="text/javascript" src="test2.js">
자바스크립트 수정 후
</script>하지만 이 방법은 파일의 이름도 바꿔줘야하고 해당 파일을 불러오는 부분까지 수정해 줘야 하기 때문에 좋은 방법은 아니다.
2) 수정한 파일에 쿼리스트링 붙이기
[기존 정의]
<link href="./common/mbl/header.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="test.js">
자바스크립트 수정 전
</script>
[변경 이후 정의]
<link href=".common/mbl/header.css?dt=20210323" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="test.js?ver=1">
자바스크립트 수정 후
</script>이 경로 뒤에 ver을 붙이는 것이 해결 방법이다.
이런식으로 쿼리스트링 ? 와 ver=(숫자는 아무거나 상관 없음) 을 이용해서 명시 해주면 이전 파일과 다르게 인식하기 때문에 바로 적용이 된다.
즉, 이렇게 붙임으로서 브라우저가 기존 캐시에 있는 파일과는 다른 파일로 인식한다.
주의할 점은 .js 뒤에(확장자 뒤) 붙여야한다.
참고자료
1) https://imnotabear.tistory.com/430
2) https://yongdev91.tistory.com/1
3) https://heidong.tistory.com/245
