[JavaScript] 이미지 수정 시 브라우저 캐싱 방지하기

웹 개발을 하면서 한 번쯤 겪어볼 수 있는 이슈가 있다. A 사용자가 이미지를 업로드하면 B 사용자가 그 이미지를 확인하고, 재업로드를 요청하는 플로우다. A 사용자가 새로운 이미지를 업로드 했는데도 B 사용자는 여전히 처음 이미지를 볼 수 있다.

이 문제는 서버 측에서 "이미지 경로는 그대로 유지하고 이미지를 덮어씌운다"는 구조와 관련이 있다. 브라우저는 URL이 동일하면 캐싱된 이미지를 가져와 네트워크 요청을 줄인다. 따라서 새로운 이미지가 업데이트 되었음에도 이전 이미지를 보게 되는 것이다.

첫 번째 해결책: 브라우저 캐시를 매번 지우라고?

사용자에게 "브라우저 캐시를 지워달라"는 요청을 할 수 있다. 하지만 이 방법은 비효율적이고 사용자 경험을 망치는 큰 요인이 될 수 있다.

두 번째 해결책: 쿼리스트링으로 캐싱을 우아하게 해결하자

다행히도 좀 더 멋지고 개발자스러운 해결책이 있다. 바로 쿼리스트링을 활용하는 것이다.

쿼리스트링은 URL 뒤에 추가 정보를 붙여 서버에 요청을 보낼 때 자주 사용되지만, 캐시를 방지하는 데에도 사용한다.

const imageUrl = 'https://example.com/image.png';
const timestamp = new Date().getTime(); // 현재 시간을 기준으로 쿼리스트링 생성
const noCacheImageUrl = `${imageUrl}?${timestamp}`;

위 코드에서 new Date().getTime()은 현재 시간을 밀리초로 반환한다. 이를 통해 항상 새로운 타임스탬프를 생성하고, 해당 값을 쿼리스트링으로 이미지 URL에 추가한다. 브라우저는 변경된 URL을 새로운 리소스로 인식하여 캐시된 이미지 대신 새로 요청된 이미지를 불러온다.

이 방법은 클라이언트에서 간단하게 적용할 수 있으며, 별도의 서버 설정을 수정할 필요가 없다. 쿼리스트링 하나로 브라우저 캐싱 문제를 해결하여 사용자는 최신 이미지를 볼 수 있게 된다.

결과적으로 쿼리스트링을 활용한 해결책은 사용자 경험을 해치지 않으면서 캐싱 문제를 우아하게 해결할 수 있는 좋은 방법이다.