인터넷 웹사이트를 개발할 때 페이지에 많은 이미지를 추가해서 보여주게 됩니다.
단순한 텍스트를 서술하는 것 보다 이미지를 보여줌으로써 더 쉽게 전달하고자 하는 내용을 표현할 수 있기도 합니다.
종종 웹 페이지에서 보여지는 이미지를 변경하는 경우가 생기게 됩니다.
동일한 파일 이름의 새로운 이미지를 기존 파일에 덮어쓰기 해서 대체한 다음 웹 브라우저에서 새로고침(Refresh) 했을 때 새로 변경된 이미지가 웹 페이지에 보이지 않고 이전의 이미지가 그대로 웹 페이지에 보일 때가 있습니다.
혹시 복사를 잘못했다고 다시 복사를 한 뒤 새로고침을 했는데도 여전히 이전 이미지가 보여지는 경우 도대체 무슨 문제일까 고민에 빠지게 됩니다.
새로 변경된 이미지가 보이지 않고 이전 이미지가 계속 보이는 이유는 무척 간단합니다.
웹 브라우저에서 캐시(Cache)에 저장된 이미지를 보여주기 때문입니다.
이번 글에서는 웹에서 이미지 파일 변경 후 Cache로 인해 이전 이미지가 그대로 보일 때 해결 방법에 대해 알아보겠습니다.
브라우저 캐시가 클리어 될 때까지 기다리는 방법
캐시(Cache)는 일정 시간이 경과하면 자동으로 클리어(Clear) 되기도 합니다.
캐시가 클리어 되면 변경된 이미지로 자동으로 보여지게 됩니다.
처음 페이지에 접속한 사람은 당연히 기존의 저장된 캐시가 없기 때문에 제대로 보이게 됩니다.
브라우저의 캐시를 지워주는 방법
브라우저의 설정에서 캐시를 강제로 지워주면 다시 접속했을 때 변경된 이미지로 제대로 보이게 됩니다.
하지만 브라우저의 설정에서 캐시를 지우게 되면 다른 사이트의 캐시도 모두 지워지므로 꼭 필요한 경우가 아니면 주의해서 캐시 삭제 작업을 해 주어야 합니다.
프로그램에서 이미지를 Load할 때 캐시를 자동 업데이트 하는 방법
웹 브라우저의 캐시와 상관없이 이미지가 페이지로 Load 되는 시점에 매번 캐시를 업데이트 시키는 방법으로 캐시를 자동으로 최신으로 유지하는 방법입니다. 어떻게 보면 브라우저의 캐시를 무력화 시키는 행위라고 보시면 됩니다.
▶ ASP.NET에서 Image 컨트롤의 ImageUrl 속성에 캐시(Cache)를 초기화 하는 방법입니다.
- Image1.ImageUrl = “~/images/myImage.jpg?” + DateTime.Now.Ticks.ToString();
- => ~/image/myImage.jpg?636159485779610000 형태로 매번 cache를 초기화 시키게 됩니다.
결론
브라우저에서 캐시를 지우거나 브라우저의 캐시가 클리어 될 때까지 기다리는 것은 사용자가 직접 캐시 삭제 작업을 해 주거나 캐시의 개념을 알고 있어야 합니다.
프로그램 개발자라면 캐시를 자동으로 업데이트(초기화) 할 수 있는 방법으로 사용자에게 혼란을 느끼지 않도록 해 주어야 합니다.
※ 함께 읽으면 도움이 될 만한 다른 포스팅 글입니다.
이 글이 도움이 되었기를 바랍니다. ^-^