supabase CRUD 이해하기

강석우's avatar
Jul 02, 2024
supabase CRUD 이해하기

본 글은 읽기 전
supabase 초기셋팅 및 회원가입 / 로그인
supabase Type 명령어 한 줄로 자동생성하기
이 두 글을 먼저 따라하시고 진행 하셔야 에러가 나지 않습니다.

supabase를 사용하며 대표적인 기능 CRUD에 대해 알아보자.

Create : insert()

위의 예시 코드는 supabase에서 insert 요청을 하는 코드다. (typescript)

  1. supabase

    1. supabase 초기 세팅을 통해 export 해준 supabase를 통해 메서드를 불러올 것이다.

  2. .from(‘TEST-DATA’)

    1. 어떤 테이블에서 작업을 수행할 것인지 선언해준다.

    2. 현재는 TEST-DATA 라는 테이블에서 작업을 수행한다고 선언했다.

  3. .insert({})

    1. 넣어줄 값을 입력해준다.

    2. 하나의 행을 넣어주기 위한 객체 또는 여러 행을 넣기 위한 배열을 넣어주면 된다.

  4. response

    {
      "status": 201,
      "statusText": "Created"
    }

Read : select()

위의 예시 코드는 supabase에서 get요청을 받아오는 코드이다. (typescript)
셋째 줄의 supabase 부터 코드를 해석해보자.

  1. supabase

    1. supabase 초기 세팅을 통해 export 해준 supabase를 통해 메서드를 불러올 것이다.

  2. .from(‘TEST-DATA’)

    1. 어떤 테이블에서 작업을 수행할 것인지 선언해준다.

    2. 현재는 TEST-DATA 라는 테이블에서 작업을 수행한다고 선언했다.

  3. .select(‘*’)

    1. select 는 table의 column 값을 param으로 받으며 해당 column을 모두 가져오라는 의미이다.

    2. 현재는 ‘*’ 을 적어 모든 column의 값을 가져오지만 만약 특정 column의 값만 가져오고 싶다면 해당 column을 적어주면 된다.

  4. .eq("testTwo", "blabla")

    1. eq은 filter와 동일한 역할을 한다.

    2. 선택사항이며 필수적으로 들어가는 메서드가 아니다.

    3. 첫 번째 인자는 column을, 두 번째 인자는 값을 의미한다.

    4. 위의 코드는 testTwo라는 column의 blabla와 일치하는 row만 가져오라는 의미이다.

  5. 위의 코드를 정리해보자.

    1. TEST-DATA 라는 테이블의 모든 정보 중 testTwo column의 값이 blabla와 일치하는 row만 나열하라.

Update : update()

위의 예시 코드는 supabase에서 update요청을 하는 코드다. (typescript)

  1. supabase

    1. supabase 초기 세팅을 통해 export 해준 supabase를 통해 메서드를 불러올 것이다.

  2. .from(‘TEST-DATA’)

    1. 어떤 테이블에서 작업을 수행할 것인지 선언해준다.

    2. 현재는 TEST-DATA 라는 테이블에서 작업을 수행한다고 선언했다.

  3. update({})

    1. 수정할 값을 입력해준다.

  4. .eq("id", id)

    1. eq은 filter와 동일한 역할을 한다.

    2. update()의 경우 필수적으로 eq를 사용해주어야 한다.

    3. 첫 번째 인자는 column을, 두 번째 인자는 값을 의미한다.

    4. 위의 코드는 id라는 column의 입력된 id와 일치하는 row만 가져오라는 의미이다.

  5. 위의 코드를 정리해보자.

    1. TEST-DATA 라는 테이블의 모든 정보 중 id column의 값이 입력한 id와 일치하는 row를 가져와 update내부 인자로 보내준 정보로 업데이트 시켜라.

Delete : delete()

  1. supabase

    1. supabase 초기 세팅을 통해 export 해준 supabase를 통해 메서드를 불러올 것이다.

  2. .from(‘TEST-DATA’)

    1. 어떤 테이블에서 작업을 수행할 것인지 선언해준다.

    2. 현재는 TEST-DATA 라는 테이블에서 작업을 수행한다고 선언했다.

  3. .delete()

    1. 삭제한다는 것을 명시해 준다.

  4. .eq("id", id)

    1. eq은 filter와 동일한 역할을 한다.

    2. delete()의 경우 필수적으로 eq를 사용해주어야 한다.

    3. 첫 번째 인자는 column을, 두 번째 인자는 값을 의미한다.

    4. 위의 코드는 id라는 column의 입력된 id와 일치하는 row만 가져오라는 의미이다.

정책 설정

Disable RLS로 설정하면 정책 설정과 관계없이 해당 기능을 사용할 수 있다.
하지만 보안 상의 이유로 Disable RLS 를 사용하지 않는 것을 supabase에서 권장하는 추세이다. 따라서 table별로 다른 정책을 설정해주면 좋다.

1) 정책 설정 들어가기

2) 각각의 메서드에 대한 정책 설정해주기

코드를 보며 조금씩 수정해 각 테이블에 맞는 정책으로 수정해주도록 하자.
또한 여기서 선택한 정책들은 해당 Table에만 적용된다.
( chatGPT 활용 추천,,, )

Share article

Frontend Playground by Luke