CSS Javascript 이미지 적용이 안될 때 참고하세요.
최근에 사이트 작업을 하고 있는데 호스팅 서버에 올려놓은 소스 파일을 ftp로 직접 접근해 수정하는 작업을 하고 있었습니다. CSS나 Javascript 소스 파일은 대부분 파일을 분리해서 첨부 파일 형태로 소스 코드를 작성하였습니다.
그런데 이미 기존에 작업해놓은 CSS나 Javascript 이미지 파일을 수정하고 사이트를 확인해 보니 수정된 화면을 볼 수 없었습니다. 인터넷 브라우저에서 사이트 속도 향상을 위해 캐시를 사용하다 보니 캐시에 있던 소스 파일이 남아있어서 같은 이름으로 소스 코드만 수정했을 때는 수정된 내용이 바로 변경되지 않더군요.
이런 경우는 새로운 파일을 만들어서 소스코드의 첨부 파일의 경로를 변경해 주시면 캐시가 남아 있더라도 변경된 내용을 사이트에서 바로 확인할 수 있습니다.
주로 저는 크롬 브라우저를 이용해서 사이트 개발 작업을 진행하였는데 새 파일을 만들지 않고 기존에 있는 소스 파일 수정 이후에 사이트 확인을 해보니 수정된 내용이 적용이 안 되더군요.
양이 얼마 되지 않을때는 CSS나 Javascript 파일 경로만 바꿔주고 새로운 파일을 만들어서 작업을 진행 했는데 소스 파일이 점점 많아 지다보니 한번 작업할때마다 수정해야 될게 너무많고 번거로웠습니다.
소스 파일에서 새로운 파일을 만들어 첨부 파일의 경로를 변경해 줘도 되지만 아래 이미지와 같이 크롬 브라우저를 사용하신다면 Ctrl + Shift + Del 키를 누르시고 캐시된 이미 또는 파일에 체크해 주시고 인터넷 사용 기록 삭제 메뉴 버튼을 눌러 주시면 됩니다.
위와 같이 캐시된 이미지 또는 파일 메뉴를 체크하시고 인터넷 사용 기록 삭제를 하니 기존에 있던 CSS, Javascript, 이미지 파일을 수정할 때마다 변경된 내용을 확인할 수 있었습니다.
만약 캐시 파일을 삭제해도 제대로 적용이 안 되는 분들이 있다면 익스플로러, 크롬, 파이어폭스 등 다른 브라우저로 수정된 내용이 바로바로 적용되는지 테스트해 보시면 됩니다.
아래 이미지는 익스플로러 브라우저이며 익스플로러 브라우저에서 진행하니 제가 수정한 내용이 바로 적용이 되더군요.
개인적으로는 소스 파일을 매번 수정하고 확인할 때마다 크롬 브라우저에서 캐시 파일을 삭제하는 게 번거롭다 보니 테스트로 사이트 화면을 보고 싶을 때는 익스플로러나 엣지 브라우저에서 확인하고 다시 크롬 브라우저로 돌아와 작업을 진행하는 편입니다.
CSS나 Javascript, 이미지 파일이나 코드를 수정하고 사이트에 수정된 내용이 제대로 적용이 안 되는 분들은 위와 같이 캐시 파일을 삭제하거나 다른 브라우저를 이용해서 수정된 내용을 확인하시면 됩니다.
수정된 내용이 바로 적용이 안 되다 보니 에러가 있는 줄 알고 에러를 찾은 경험도 있고 어떤 경우는 사이트마다 다르게 표시되는 경우들 때문에 왜 브라우저마다 다르지? 하면서 고민하면서 시간이 조금 걸린 적 있습니다.
저와 같이 단순한 부분에서 시간이 걸리는 분들이 있을 수도 있어서 나름대로 글을 작성하였으니 필요한 분들에게 도움이 되는 글이 되기를 바랍니다.
