[CSS / JS] CSS , JS 경로에 쿼리스트링을 사용하는 이유

개요

웹사이트 유지보수를 하면서 한 번씩 css와 js파일을 불러올 때 경로 끝에 다음 사진과 같이 

'? v=1.2'와 같은 쿼리스트링을 본 적이 있을 겁니다. 이 쿼리스트링이 왜 필요한지,

그리고 어떻게 활용되는지 알아보겠습니다

js와 css 경로 쿼리스트링 예시

 

요약

우선 본론부터 말하면 캐시 관리를 위해서입니다.

웹 브라우저는 성능 향상을 위해 파일을 로컬 캐시에 저장하는데, 이렇게 되면 웹사이트가 업데이트되어도 사용자가 최신 버전의 파일을 받지 못하는 경우가 생길 수 있습니다. 바로 그럴 때 사용자가 항상 최신의 스크립트나 스타일시트를 사용할 수 있도록 보장해 주는 게 바로 파일 경로에 주는 쿼리스트링입니다.

 

설명

1. 캐시란 무엇인가?

웹 브라우저는 웹사이트의 로딩 속도를 높이기 위해 이미 방문했던 페이지의 데이터를 로컬에 저장하는 방식을 사용합니다. 이를 '캐시(cache)'라고 하며, 이 캐시 덕분에 같은 웹사이트를 재방문할 때 빠르게 로딩할 수 있는것입니다.

 

2. 캐시의 문제점

그러나 캐시는 때때로 문제를 일으킬 수 있습니다. 개발자가 CSS나 JS 파일을 업데이트했음에도 불구하고, 사용자의 브라우저가 이전에 캐시 된 파일을 계속 사용하기 때문에 최신 버전의 웹사이트를 제대로 표시하지 못하는 상황이 발생할 수 있습니다. 이는 사용자 경험을 저하시키고, 때로는 큰 오류로 이어질 수 있습니다.

 

3. 쿼리스트링을 통한 해결 방법

이러한 캐시 문제를 해결하기 위해, 개발자들은 파일 경로에 쿼리스트링을 추가하는 방법을 사용합니다.

예를 들어, CSS 파일에 'style.css? v=1.2'라고 명시하는 경우, 이는 'style.css'의 버전 1.2 임을 나타냅니다.

이 방식은 파일이 업데이트될 때마다 쿼리스트링의 값을 변경함으로써, 브라우저가 URL의 변화를 감지하고 새로운 파일을 서버로부터 다시 불러오도록 만듭니다.

 

실제 활용 예

최근 한 홈페이지를 CSS 유지보수 한 후 고객님에게 유지보수 완료 보고를 드렸지만 문제가 해결되지 않았다는 연락을 받았습니다. 고객님에게 강력 새로고침으로 캐시를 지우고 확인해 달라고 말씀드렸지만 고객님은 핸드폰을 잘 다루지 못하셔서 전달에 어려움이 있었습니다. 그때 이 쿼리스트링 방식이 생각나 수정한 css파일의 경로에 쿼리스트링을 추가했고 고객님은 바로 수정된 UI를 확인하실 수 있었습니다.👍   

 

쿼리스트링 이미지