[JavaScript] 새로고침 할 때 마다 이미지 캐시 삭제하기(feat.카페24)

저희 회사는 크게 2개의 파트가 있는데

한 파트는 Next.js로 만들어진 자체 사이트(주로 작업은 여기서 합니다),
또 다른 하나는 카페24에서 운영하는 쇼핑몰 사이트를 운영합니다.

 

가끔 카페24 사이트를 운영하는 파트가 기술팀에 기능 개발을 요청하곤 하는데 그 담당자가 제가 돼 버렸네요.
때문에, 바닐라 자바스크립트도 만지고 있는데 최근에 꽤 팁이 될 수 있을 만한 이벤트가 있어 적어보려 합니다.

---

개요

카페24에서 이미지를 수정해서 업로드하면, 자체 캐시 기능이 이미지를 캐싱해서 새로고침을 해도 이미지 수정 적용이 바로 안됩니다.
url에 파라미터를 넣어 수정해봐도 수정이 안되는 경우가 있습니다.

이 문제에 대해 카페24는 '이미지 이름을 다르게 업로드'하는 방법을 해결책으로 설명하고 있습니다.

그러나, ftp로 같은 이름의 이미지를 수정해서 바로 업로드 하는 것이 이미지 파일 이름 설정에 불필요한 시간을 쓰지 않아도 되기 때문에 이를 해결해보고자 했습니다.

이는 이미지 src 자체에 파라미터를 붙여주면 해결됩니다. 이 파라미터는 절대 겹칠 일 없는 난수면 안전 할 것입니다.

원본 이미지 src는 같지만, 뒤에 난수를 붙여줌으로서 캐싱을 방지합니다.

---

방법

우선 자바스크립트를 사용하기 때문에 처음에는 상품 상세 페이지의 부모가 되는 html 페이지에 스크립트를 넣었습니다. 하지만 이 방법은 상품상세 내 이미지가 전체 로딩 후 스크롤을 내리면 레이지로딩처럼 나중에 이미지가 로드되기 때문에 스크립트가 처음에 이미지를 인식해도 한번 더 로드 돼 파싱했던 이미지 url이 원상태로 되돌아갑니다.

 

그래서 이미지가 로딩 된 후 스크립트를 실행하고자

카페24의 상품관리 페이지의 에디터에 직접 script 태그를 넣어 자바스크립트를 넣고자 했습니다.

하지만 대부분의 에디터는 XSS 공격을 막기 위해 에디터에서 자동으로 script 태그를 인식해서 삭제시키거나 script 태그 내부의 코드를 string으로 인식시켜 자바스크립트 실행이 안됩니다.

 

그래서 생각해낸 방법은 모듈을 만들어 폴더에 넣고, 해당 모듈 import를 이미지가 로드 된 후에 시키는 것 입니다.

 

이는 아래와 같이 적용할 수 있습니다.

<img id="targetImg" onload="import('./js/module/product/cacheScript.js').then(e => {e.handleTargetImgUrl()})" alt="sample-image" src="https://sample.co.kr/SkinImg/read/test.jpg"></p>

 

이미지 url 뒤에 난수를 붙이는 코드는 아래와 같습니다.

$(document).ready(function () {
    const handleTargetImgUrl = () => {
        let targetImg = document.getElementById("targetImg");	// targetImg라는 아이디를 가진 이미지 가져옴
        const oldUrl = targetImg.src;	// 이미지 src 파싱
        const array = new Uint32Array(1);	// 32비트 정수 배열 생성
        const rndNumforCache = window.crypto.getRandomValues(array)[0];	// 강력한 난수를 생성하기 위함
        let paramsString = `?v=${rndNumforCache}`;	// src 뒤에 붙여 줄 문자열
        let newImgSrc = `${oldUrl}${paramsString}`;	// 새로운 src 생성
        targetImg.src = newImgSrc;	// 원래의 src와 교체
    }
});

이 모듈을 실행하면 아래와 같은 결과를 갖게 됩니다.

src="https://test.co.kr/SkinImg/read/test.jpg?v=129100149"

마지막으로 모듈을 이 상품 에디터 하단에 카페24 방식으로 import 시킵니다.

<!--@js(/js/module/product/cacheScript.js)-->

---

결론

이 방법에서 가장 강조하고 싶었던 지식은
이미지 url 뒤에 파라미터를 넣으면 이미지 파일명이 같더라도 새로고침 하면 바로 변경된 데이터가 보인다는 것 입니다.

이 지식을 활용하면 굳이 카페24 사용자가 아니더라도 다양한 곳에서 사용할 수 있을 것 입니다.