Vue 에서 sweetAlert2 JS 라이브러리 사용하다 생긴 일(feat svg)

한 번 메이저 업데이트 하면 관련 라이브러리들도 빠르게 업데이트 되는 리액트와는 다르게

Vue는 답도 없다.. 요즘은 vue3 많이 지원하는 것 같긴 하지만...

 

 

지난 프로젝트에서 Vue3를 사용했다가 호환되는 라이브러리가 별로 없어서 Vue2 를 사용했다.

그런데 요즘엔 Vue3 지원이 많아지긴 해서 후회하긴 했지만.. 어쨌든 지금은 Vue2니까! 

---

 

다이얼로그와 토스트를 사용하기 위해 Vue 에서 많이 사용하는 sweetAlert2 를 설치했다.

 

 

vue-wrapper 버전을 사용하고 싶었지만..

아래와 같은 설며이 써있어서 역시 vue 는 그냥 js 라이브러리 사용하는게 버전 대응하는게 편하겠어서 js 를 사용하게 되었다.

 

문제는..

토스트와 이미지 모달에 svg 아이콘을 추가해야하는데 vue component  자체를 넣을 방법이 없었다..!

 

그래서 chagGpt 와 함께 머리를 짜낸 첫번째 방법은

Vue 인스턴스를 생성한 후 mount 를 시키고 그 el 의 html 을 가져오는 것이였다.

 

하지만 chatGpt 는 된다고 했는데.. svg 가 네트워크 탭에 다운로드 되었다고 표시가 안돼서 그런걸까? 아무튼 안됐다ㅠ

 

 

그래서..

svg 를 다운 받고 그 결과인 string 형태의 html 을 넘겨주었다. 결과는 대성공!

const getIconHtml = async (iconName: string) => {
  try {
    const res = await axios.get(`/icons/${iconName}.svg`);
    return res.data;
  } catch (e) {
    console.error('Error loading SVG:', e);
    return '';// 문제가 생긴 경우 아이콘이 보이지 않게끔 처리
  }
};

 

 

그러나..

매번 svg 를 요청했다.

사실 304 면 캐시된 자원을 이용한거라서 상관 없을 것 같긴한데..

http 요청 자체를 없애고 싶어서 아래와 같이 코드를 수정했다.

 

const cache: Map<string, string> = new Map();

const getIconHtml = async (iconName: string) => {
  try {
    if (cache.has(iconName)) {
      return cache.get(iconName);
    }

    const res = await axios.get(`/icons/${iconName}.svg`);
    cache.set(iconName, res.data);

    return res.data;
  } catch (e) {
    console.error('Error loading SVG:', e);
    return '';
  }
};

 

이러면 새로고침하지 않는 이상 한 번 요청했던 아이콘에 대해서는 http 요청을 한 번만 하게된다!

사실 iconName 도 타입을 더 strict 하게 할 수 있지만.. 

아이콘 자체가 public 에 있기 때문에 하지 않았다ㅎ

 

 

끝