003. Supabase로 이미지 저장

학습 목표

• Supabase Storage 를 이용해 이미지를 저장할 수 있는가?
• 저장한 데이터들을 다시 불러올 수 있는가?

측정요소

• Supabase Storage 에 이미지를 저장하면 성공이다. ✅
• 저장 후 공개 URL 을 받아와 DB에 저장하면 성공이다. ✅

레퍼런스

• Storage Quickstart
• supabase storage 사진 올리기

만들기

• feat: 이미지 storage 저장로직 구현

 

배우고 느낀 것

• 이미지를 저장하고 URL을 생성하는 것을 처음 구현해보았는데 생각한대로 동작하니 재밌었다.
• bind:value와 bind:this라는 svelte 바인딩 명령에 대해서 알게되었다. HTML의 <input type="file"> 요소는 사용자가 파일을 선택할 수 있게 하는 DOM 요소이기 때문에 Svelte에서 bind:this를 사용하여 이 요소에 대한 참조를 얻으면, 선택된 파일에 접근하거나 해당 요소의 다른 속성과 메서드를 프로그래매틱하게 사용할 수 있다.