[Web] 수정 배포한 CSS, JS 파일이 적용되지 않을 때

업무 중 css, js 파일을 수정 배포했는데, 이상하게 해당 내용이 적용되지 않을 때가 있다!!
캐시 문제인 것까진 알겠지만, Ctrl + Shift + R을 해봐도 적용이 안 돼서...
이리저리 구글링을 하다가 늘 봐왔던 css, js의 version이 뭐하는 놈인지 알게 됐다! 😲

<link rel="stylesheet" type="text/css" href="./style.css">

이렇게 생긴 소스는 style.css가 수정되더라도, 캐시가 삭제되지 않고 남아 있을 수 있다. 사용자가 캐시를 직접 지워야만 수정된 style.css의 내용을 적용해 볼 수 있다는 점에서 불편하다. 🤨

<link rel="stylesheet" type="text/css" href="./style.css?ver=20220602">

이럴 때 이런 식으로 뒤에 ?ver=20220602 같은 쿼리 스트링을 붙여주면, 웹 브라우저가 버전별로 다른 웹 캐시를 생성해 오래된 css 파일이 적용되는 불상사를 막을 수 있다!

이때 ver 뒤의 숫자 20220602는 구분을 위한 숫자라, css 파일 자체에는 영향을 주지 않는다고 한다.
여러 사이트를 돌아보며 확인해 보면, 이 ver는 그냥 1.1처럼 정말 버전을 적어둔 곳도 있고 우리 팀처럼 20220602 같이 수정 배포 날짜를 적어둔 곳도 있다. 이건 각 팀의 코드 스타일을 따르면 되는 듯!

ver의 의미를 너무 늦게 안 것 같지만... 그래도 오늘도 새로 하나 배울 수 있었다.
앞으로 css, js 파일을 수정 배포할 때는 꼭! 참고해서 html 부분도 수정해놔야겠다.

관련해서 참고한 블로그는 이쪽 (링크)