[Vue3] svg를 import하고 JSON 형식으로 데이터를 표출할 때 발생한 문제와 해결 과정

1. 문제 발생
   : 처음에 Vue3에서 svg 이미지를 import 하고, 그걸 Json 형식으로 데이터를 만들어서 표출하려고 했으나 로컬에서는 문제가 없었지만 실서버에 포팅한 후 이미지가 로드되지 않는 문제가 발생함
2. 원인 분석
   : 문제를 분석해본 결과, assets/icons 경로를 상대 경로로 설정해 놓았던 게 문제가 되었었고 빌드 시 해당 경로를 찾을 수 없어서 이미지가 제대로 로드되지 않았던 것이었음 그래서 Vite가 이미지 파일 경로를 인식할 수 있도록 이미지를 import 하여 사용하는 방식으로 수정해야겠다고 생각함
3. 해결 과정
   
   1. assets/index.ts 파일 추가 : assets 폴더에 index.ts 파일을 만들고, 필요한 svg 파일들을 import 및 export 하도록 설정함 그런 다음 Json 파일에서 이 파일을 import하여 각 데이터에 맞춰 iconPath를 설정할 수 있도록 함
   2. 동적 이미지 로딩 : Json 데이터에서 iconPath를 사용하는 곳에서 <component> 태그를 사용하여 동적으로 이미지를 로드할 수 있게 함
4. 실서버 포팅 후 테스트
   : 실서버에 포팅한 후, 이미지가 정상적으로 로드되는지 확인했을 때 문제가 없었지만 로컬에서 콘솔을 봤을 때 무수히 많은 warning 콘솔이 찍혀 있었음
5. Warning 콘솔 확인
   : [Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Component that was made reactive: {render: ƒ}

   

6. 해결 방법 모색
   : 콘솔에서는 markRaw 또는 shallowRef를 사용하여야 한다고 되어 있었으나, 실제로 적용해보았을 때는 효과를 얻지 못하여 다른 방법을 찾던 중 아래 글에서 컴포넌트를 사용할 때 component.name을 :is 속성에 넣어서 경고를 해결했다는 부분을 참고하여 svgIcon.render를 :is 속성에 넣었더니 문제를 해결할 수 있었음

[vue] 동적 컴퍼넌트 호출 feat. [Vue warn]: Vue received a Component which was made a reactive object. This can lead to u

<template>
    <component
        :is="getIconSvg((icon as IconTypeValue).iconPath)"
        class="option-icon"
    />
</template>

<script setup lang="ts">
    const getIconSvg = (icon: any) => {
        return icon.render;
    };
</script>