supabase database 정책 설정

이번 팀프로젝트에서 우리 팀은 supabase를 사용하기로 했다. 

테스트를 위해 아래와 같이 설정 후 코드를 작성하였다. 

 

supabase url 과 key는 settings -> API에서 가져와서 env 파일에 넣었다.

 

 

import React, { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

function Search() {
  const [data, setData] = useState();
  const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_KEY);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data, error } = await supabase.from('video').select('*');
        if (error) {
          throw error;
        }
        setData(data);
      } catch (error) {
        console.log('Error fetching data:', error.message);
      }
    };

    fetchData();
  }, []);
  
  console.log(data);

  return (
    //생략
  );
}

export default Search;

 

 

공식문서에 나온 대로 코드를 넣었지만... 데이터가 넘어오지 않았다. 

이유는 정책 설정을 하지 않았기 때문이었다. 

 

정책 설정

1. supabase 대시보드에서 사용할 프로젝트로 이동한 후,

 

 

2. 왼쪽 메뉴에 Authentication으로 이동한다.

 

 

3. policies -> new policy를 눌러서 새로운 정책을 설정한다.

 

 

4. Get started quickly를 누르고

 

 

5. 왼쪽에서 필요한 정책을 선택한 후 use this template를 누른다.

지금은 테스트를 위해 유저에 대한 제한 없이 아무나 접근할 수 있는 게 필요해서 첫 번째 정책으로 선택했다.

 

 

 

6. 작업, 대상 역할 등을 선택하고 다음으로 넘어간다.

일단은 테스트를 위해 all을 선택하고 넘어왔다.

 

 

 

7. 선택한 정책에 대해서 추가 예정인 sql을 보여주는데 수정은 하지 않을 거라서 save policy를 눌렀다.

 

 

설정이 완료되면 아래와 같이 데이터가 조회되는 걸 볼 수 있다.