수정된 css, js 파일이 적용이 안될 때

생활코딩 강의를 듣던 중 css 파일에 수정된 내용이 실제 localhost에서 적용되지 않는 문제가 발생했다. 해결을 위해 구글링하여 해결법을 참고한다. 

*이유: 브라우저가 캐쉬를 사용할 때 적재된 JS나 CSS 파일 내용으로 계속 처리가 되기 때문이라고 한다. 캐쉬를 삭제하거나 다른 웹브라우저를 사용하는 것 또한 방법이겠지만, 매번 그렇게 할 수 없으니깐. 검색을 통해 방법을 알아냈다. 

< link rel="stylesheet" type="text/css?ver=1" href="http://localhost/style.css">

여기서 버전 정보를 추가한다. 

< link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1">

-> 버전 정보를 파일명(text/css) 뒤에 추가함으로서 브라우저가 기존 url과 다른 url인지 인식한 후 캐쉬된 파일 대신에 쿼리스트링이 추가된 css 파일을 사용하게 된다. 

-> JS도 마찬가지로 사용하면 된다. 

<script type="text/javascript" src="./style/js/test.js"></script>

위의 test라는  js 파일을

<script type="text/javascript" src="./style/js/test.js?ver=1"></script>

이렇게 버전 정보를 추가해준다. 

*ver=숫자; 여기서 숫자는 아무 숫자를 사용해도 상관 없다. 특히나 내 pc에서 확인했을 때 수정 내용이 반영되었다고 해도 다른 pc에서 반영되었다는 보장이 없기 때문에 필수로 해야하는 작업이라고 할 수 있다. 

*위의 문제를 해결하자 또다른 문제가 발생했다.

-?ver=1을 적용한 page_vc.html 파일에만 css 파일이 적용되지 않는(!) 큰 문제가 발생했다. 이는 쿼리스트링이 추가된 css 파일을 정상적으로 인지하지 못한다는 것인데..

-> 해결: type이 아니라 href 값에 추가를 해줘야하는거였다...

(본문은 정상적인 코드로 수정하였다.)

참고: http://kanu.tistory.com/30