React에서 Supabase를 설정하는 방법은 무엇입니까? 그리고 몇 가지 유용한 팁

대상 고객

React와 Supabase에 대해 배우고자 하는 사람들을 대상으로 이 글을 작성했습니다.

학습 목표

이 문서를 완료하면 다음을 수행하는 방법을 알게 됩니다.

React 애플리케이션 만들기

수파베이스 설치

Supabase에서 데이터 가져오기

Supabase에서 CRUD 작업 수행

수파베이스란?

Supabase은 오픈 소스 Firebase 대안입니다. Postgres 데이터베이스, 인증, 인스턴트 API, 실시간 구독 및 스토리지로 프로젝트를 시작하세요.

Firestore 데이터베이스와 Supabase Postgres 데이터베이스의 차이점은 Firestore는 NoSQL 데이터베이스이고 Supabase는 관계형 데이터베이스라는 것입니다.

프로젝트 설정

프로젝트 설정에 대한 Supabase 공식 문서를 확인할 수 있습니다. 수파베이스 대시보드에서 프로젝트를 생성해야 합니다. 그리고 다양한 프레임워크에 대한 여러 설정 문서가 있지만 이 문서에서는 React에 대해 작성합니다.

프로젝트 만들기

app.supabase.com으로 이동합니다.

"새 프로젝트"를 클릭합니다.

프로젝트 세부 정보를 입력합니다.

새 데이터베이스가 실행될 때까지 기다리십시오.

애플리케이션 구축

애플리케이션을 빌드하려면 다음 단계를 수행하십시오.

1 - 반응 애플리케이션 생성

npx create-react-app supabase-react
cd supabase-react

2 - supabase-js 라이브러리 설치

npm install @supabase/supabase-js

3 - .env 파일에 환경 변수를 추가합니다.

Supabase dashboard.에서 이러한 변수를 가져올 수 있습니다.

REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

4 - Supabase 클라이언트 생성

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

이 클라이언트를 사용하여 데이터베이스 등에서 데이터 인증, 가져오기 또는 변경을 수행할 수 있습니다.

5- 서비스 만들기

Supabase 작업을 사용하여 crud 기능을 생성하는 서비스dummyService를 생성합니다. 그리고 다른 구성 요소에서 이 서비스를 참조하여 사용할 수 있으므로 프로젝트에서 중복 코드를 만들지 않습니다.

함수 만들기

async function Create(id, name){
    let response = await supabase // this is our client
        .from("dummy")
        .insert({
            id: id,
            name: name
        })
    return response
}   

생성 작업에서 볼 수 있듯이 Supabase의 삽입 작업을 사용합니다.

읽기 기능

async function Get(name){
    let response = await supabase // this is our client
    .from("dummy")
    .select("*")
    .eq("name", name)
    return response
}   

업데이트 기능

async function Update(id,name){
    let response = await supabase // this is our client
    .from("dummy")
    .update({ name: name })
    .match({ id: id })

    return response
}   

삭제 기능

async function Delete(id){
    let response = await supabase // this is our client
    .from("dummy")  
    .delete()  
    .match({ id: id })

    return response
}   

따라서 이러한 메서드를 포함하는 서비스를 만들 수 있으며 사용하려는 경우 이 서비스를 가져올 수 있습니다. 특정 도메인에 대한 서비스를 만드는 것은 프로젝트에서 중복 코드를 만들 수 없기 때문에 중요합니다. 따라서 코드 기반이 커질수록 유지 관리가 더 쉬워집니다.

사용 사례 예:

import { dummyService } from ".../somewhere"
...
var item = dummyService.Get("name")
return(
<p>{item}</p>
)
...

때때로 우리는 페이지를 렌더링하기 전에 데이터를 가져오기를 원합니다. 이런 종류의 시나리오에서는 React에서 useEffect 및 useState 후크를 사용할 수 있습니다. useEffect 후크 내에서 서비스 기능을 호출할 수 있으며 페이지의 로드 상태에 대한 상태를 생성할 수 있습니다.

이에 대한 사용 사례의 예는 다음과 같습니다.

function AnExampleComponent() {
    const [loading, setLoading] = useState(true);
    const [items, setItems] = useState(null)


    let getDataFromService = async (name) => {
        setLoading(true)
        let { data } = await dummyService.Get(name);
        if(data) setItems(data);
        setLoading(false)
    }
    useEffect(() => {
        getDataFromService("stuff")
    }, [])
    return(
    ...
    )
}

예제에서 볼 수 있듯이 데이터를 가져오기 위한 로드 상태를 만듭니다. 이 상태는 서비스 콜 종료 여부에 대한 정보를 제공합니다. 서비스 요청이 완료되지 않거나 시간이 오래 걸릴 수 있습니다. 더 나은 사용자 경험을 위해 로드 상태를 표시할 수 있습니다. 또는 error 와 같은 서비스에서 제공되는 다른 상태를 처리할 수 있습니다. 따라서 서비스 기능에 오류가 발생하면 필요한 경우 해당 정보를 UI에 표시할 수 있습니다.