Quasar Framework를 이용하여 q-img로 이미지를 불러왔다. 다만 이 방식에서는 Source를 직접 가르키고 있어, 관리하기에 어려움이 있어보인다. 보안상으로는 큰 문제는 아니라고 한다. Key가 노출되는 것은 큰 문제이다. 그래서 이 프로젝트에서는 .env파일에 Supabase의 URL과 Key를 모아두고, supabase.js를 통해 클라이언트 초기화를 한 다음, Vue 파일을 통해 호출(?)하여 사용하고 있었다.
<q-card class="full-height">
<q-card-section>
<div class="text-h6 q-mb-md">Project Map</div>
<q-img
:key="Date.now()"
:src="`https://(Supabase URL).supabase.co/storage/v1/object/public/map/${project.id}.png?nocache=${Date.now()}`"
fit="contain"
style="height: 300px;"
>
<template v-slot:loading>
<q-spinner-gears color="primary" />
</template>
</q-img>
</q-card-section>저번에는 .env 파일에 URL을 추가하고, supabase.js에 이 변수를 등록했다. 다만 이번에는 Javascript 파일에서 사용하는게 아니라 저번의 방식과 조금 다르게 환경 변수에 접근해야 한다.
1. 환경 변수 접두사 VITE_와 접근 방식 import.meta.env
Quasar2, Vue3는 Vite 기반의 프로젝트이기에 환경 변수 접두사로 반드시 VITE_를 사용해야 하기 때문이다. 따라서 VITE_STORAGE_URL="(supabase URL)"을 입력해놔야 한다.
이전의 방식(js에서 사용)과 달리 process.env를 사용할 수 없다. 이 방식은 CRA 방식으로 javascript에서는 지원되지만, Vite 방식인 Quasar 프로젝트에서는 오류가 발생한다. 따라서 import.meta.env.BITE_STORAVE_URL과 같은 방식을 사용해줘야 하는 것이다.
2. <template> 테그에 <q-img> 생성하고, <script>테그에 Computed 속성으로 이미지 URL 생성하기
<template>
<q-img
:src="getImageUrl"
fit="contain"
style="height: 300px"
>
</q-img>
</template>
<script>
import ~
...
expoart default ~
setup() {
...
const getImageUrl = computed(() => {
return '`${import.meta.env.VITE_STORAGE_URL}/storage/v1/object/public/map/${selected_project.value.id}.png?t=${imageTimestamp.value}`;
});
return {
...
getImageUrl,
};
},
});
</script>결국 스크립트에서 만든 이미지 url를 return하고, 템플릿테그에서 q-img를 이용해 표현해준거다.
그리고 setup에서 추가한 내용은 앞서 말한 vite 방식을 이용하여 import.meta.env~부분을 처리해주고, 뒷 부분은 스토리지 속 위치를 표현해준 것이다.
오늘은 여기까지 했고, 앞으로 이미지 로드 실패에 대비하고, 이미지 캐싱 최적화 방식을 도입하면 더욱 완벽한 페이지가 될 듯하다.
