[JS, supabase] 데이터 저장하고 불러오기

이미 supabase Docs에서 친절하게 설명해주고 있지만 정리해보려고 한다.

 

Table

데이터 저장하기

먼저 Table에 데이터를 추가하려면 아래와 같이 코드를 작성하면 된다.

  const addData = async (post) => {
    const { error } = await supabase.from(<Table Name>).insert(<Data>);
    if (error) {
      throw error;
    } else {
      console.log("add data succeed");
    }
  };

 

데이터 불러오기

아래 코드는 첫 렌더링 후에만 불러와야하는 과정 중에 있다고 가정했을 때의 코드이다. 따라서 `useEffect`를 사용하고 의존성 배열(dependency array)을 아래와 같이 작성했다.

  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from(<Table Name>).select(<Column Names 또는 "*">);
      if (error) {
        throw error;
      } else {
        console.log("data => ", data);
      }
    };

    fetchData();
  }, []);

 

이때 여러 column을 불러오려면 `,`로 구분한 문자열을 넣으면 된다. (ex : `"col1, col2"`)

 

특정한 조건을 만족하는 행을 가져오려면 아래와 같이 하면 된다. `dataID`가 `id`인 행의 모든 컬럼에 대한 데이터를 가져오려면 아래와 같이 하면 된다.

  const fetchRow = async (id) => {
    const { data, error } = await supabase.from(<Table Name>).select("*").eq('dataID', id);
    if (error) {
      throw error;
    } else {
      console.log("data => ", data);
    }
  };

 

 

Storage Bucket

데이터 저장하기

다음으로 Storage Bucket에 데이터를 추가하려면 아래와 같이 코드를 작성하면 된다.

  const uploadImgs = async (file) => {
    const { data, error } = await supabase
      .storage
      .from(STORAGE_NAME)
      .upload(`<subfolder>/<filename.xxx>`, file)
    if (error) {
      throw error;
    } else {
      console.log(data);
    }
  }

 

데이터 불러오기

만약 Bucket 내에 `Path`가 `subfolder/file.xxx`인 파일을 가져오려면 아래와 같이 하면 된다.

  const getFiles = async (Path) => {
    const { data, error } = await supabase
      .storage
      .from(<Bucket Name>)
      .list(Path)
    if (error) {
      throw error;
    } else {
      console.log('data =>', data);
    }
  }

 

데이터 삭제하기

Bucket에서 특정 파일들을 없애고 싶다면 해당 경로를 모은 배열 `pathArr`에 대해 다음과 같이 작성하면 된다.

  const deleteFile = async (pathArray) => {
    const { data, error } = await supabase
      .storage
      .from(<Bucket Name>)
      .remove(pathArray)
    if (error) {
      throw error;
    } else {
      console.log('data =>',data);
    }
  }

 

---

데이터를 불러오는 과정에서 진짜 사소한 이유로 엄청 시간을 오래 낭비했다. 결과값으로 `{data: ... , error : ...}`이런 값을 반환하면 적절하게 구조 분해 할당을 사용해야 하는데 `{ data1, error1 }`이라고 해서 `undefined`가 뜨는 오류가 발생했었다. 정신 똑바로 차리고 코딩해야겠다!

 

위 내용에 대한 자세한 정보는 아래 공식 문서를 참고하면 좋다.

JavaScript: Introduction | Supabase Docs