웹사이트 구축후 유지운영을 하다보면 여러내용들을 수정을 해야 될 때가 있습니다.

개발자라면 서버사이드 비즈니스 로직을 변경하고 서버에 반영하면 오류가 나지 않는다면 바로 반영이 되는걸 확인할 수 있지만 js / css 파일등이 변경되었을때는 브라우저의 캐시기능때문에 바로 반영이 안되는 경우를 자주 만나게 됩니다.

그래서 대부분의 개발자들은 본인 컴퓨터 브라우저의 캐싱기능을 꺼두거나 항상 새로 불러오도록 설정을 하고 사용을 하곤 하지요

그리고 작업이 완료된 후 기획자나 사이트 담당자에게 확인을 받을 때 수정이 반영이 안되었다는 회신을 받고는 캐시 때문에 그러니 브라우저의 모든 캐시를 지우고 다시 확인해보라는 말을 하곤 합니다.

그럼 다른 일반 사용자들은 어떻게 할까요? 변경이 되었다 라는 정보를 모르는 일반 사용자들은 변경이 적용된 이후에도 한동안 변경전 js 와 css 로 인해 우리가 제공하는 데이터를 즉각적으로 받을 수 없는 상태가 됩니다.

그래서 일반 사용자들의 브라우저에서도 캐싱기능이 활성화 되어있든 아니든 개발자가 의도한 내용이 전달되도록 js 나 css 파일의 캐싱을 관리할 수 있어야 합니다.

웹서버에서 특정파일에 대한 캐쉬설정을 바꿔서 http response header 에 캐시 관련 지시자나 e-tag 등이 잘 포함되게 설정해주면 브라우저에서 만료된 캐시파일이 사용되는것을 적절히 막을 수 있지만 다양한 인프라 환경에 대한 이해와 경험이 필요합니다.

조금 더 쉬운 방법은 웹 프로그램파일 내에서 js / css  등을 호출할때 url 관리를 통해 이를 컨트롤 하는 것입니다.

브라우저의 캐시란것은 url 을 기준으로 이전에 동일 url 을 요청한적이 있는지를 판단하는 것이기에 이 url 을 관리하면 캐시에 의해 영향을 받지 않도록 할 수 있습니다.

 

html 상에서 css 와 js 파일은 일반적으로 위와 같이 간단하게 적으면 됩니다.

 

이렇게 파일명 뒤에 버전정보를 쿼리 스트링으로 붙여주면 버전값이 다를 때 다른 url 로 인식이 되기 때문에 캐시된 파일이 사용되는 것을 방지 할 수 있습니다.

물론 이렇게 되면 변경된 css 파일뿐아니라 해당파일을 사용하는 모든 웹 프로그램 소스에서 해당 버전으로 변경이 되어야 하므로 자주 변경이 되는 파일들이라면 전역변수로 관리를 하거나 매번 다른 값을 가져올수 있도록 몇가지 방법을 이용해 적절하게 관리를 할수 있을 것입니다.

단순히 해당 파일의 수정일을 쿼리스트링으로 붙여줄수도 있고 실제 변경이력을 관리하기 위한 방법들도 있을 수 있겠지요

간단하지만 웹사이트 운영을 하면서 많이 놓치는 부분이라서 글 올려봅니다.