supabase로 웹사이트 클론하기 정리 (2)- supabase storage 사용하기

참고한 강의

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
: https://inf.run/6SLYm

서론

Supabase는 부트캠프 수강 중 마지막 프로젝트에서 사용한 경험이 있다.
경험한 바로는 firebase와 비슷하지만 더 직관적인 편이기 때문에 사용하긴 수월하다.

다만 supabase를 이용하려고 하면 한국어 자료가 없어 깊게 배우긴 어려웠기 때문에
강의로 다시 기초를 다지고자 했다.

supabase storage

초기설정

1. 우선 tab 중에 storage를 선택하고, new buket을 눌러 생성한다.
   
   
   public은 접근 권한을 설정가능하고, additional은 파일 사이즈 제한 여부를 선택할 수 있다.

2.policy를 선택 후 new policy를 , for full customization으로 진행했다.


모든 권한 및 메서드를 허용하는 것으로 진행한다.

위 사진처럼 생성이 되었다면 초기 설정은 끝

파일 업로드

파일 업로드 하는 방법은 일반적으로 useRef와 input에 type file로 업로드 하는 형식과 비슷하나
리액트 쿼리와 supabase storage 로 보내는 함수를 이용한다는 점에서 다를 수 있다.

그래서 다 생략하고 mutation과 formdata, supabase storage에 관한 함수를 집중적으로 볼 예정이다.

//생략

export default function FileDragDropZone() {
  const fileRef = useRef(null);
  const uploadImageMutation = useMutation({
    mutationFn: uploadFile,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["images"],
      });
    },
  });

파일을 불러오는 함수는 uploadFile이란 함수를 사용하되,
캐싱된 값은 바로 업데이트가 안되므로
queryClient.invalidateQueries로 images란 키를 가진 데이터를 무효화 시키고
업데이트 시킨다.

  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault();
        const file = fileRef.current.files?.[0];
        if (file) {
          const formData = new FormData();
          formData.append("file", file);
          const result = await uploadImageMutation.mutate(formData);
        }
      }}
//생략
    </form>
  );
}

form 태그를 쓰되, 사진을 업로드하기 위해서는 formData와 append 메서드를 쓴다.
file이 있을 때만 mutate에 담는다.

supabase 공식문서에서도 사진 업로드 함수 예시가 제공된다.
: https://supabase.com/docs/guides/storage/uploads/standard-uploads

"use server";

import { createServerSupabaseClient } from "utils/supabase/server";

function handleError(error) {
  if (error) {
    console.error(error);
    throw error;
  }
}

export async function uploadFile(formData: FormData) {
  const supabase = await createServerSupabaseClient();
  const file = formData.get("file") as File;

  const { data, error } = await supabase.storage
    .from("strage 이름")
    .upload(file.name, file, { upsert: true });

  handleError(error);
 
  return data; //에러가 없으면 return
}

이처럼 storage에 사진을 업로드할 수 있다.