Supabase Cloud Storage로 CRUD React 애플리케이션을 구축하는 방법

Supabase Cloud Storage로 CRUD React 애플리케이션을 구축하는 방법
당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

React는 개발자가 웹 애플리케이션용 사용자 인터페이스를 구축하는 방식에 혁명을 일으켰습니다. 구성 요소 기반 아키텍처와 선언적 구문은 대화형 및 동적 사용자 경험을 만들기 위한 강력한 기반을 제공합니다.





React 개발자로서 CRUD(만들기, 읽기, 업데이트, 삭제) 작업을 구현하는 방법을 마스터하는 것은 강력하고 효율적인 웹 솔루션을 구축하기 위한 중요한 첫 단계입니다.



오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.

Supabase Cloud Storage를 백엔드 솔루션으로 활용하여 간단한 React CRUD 애플리케이션을 구축하는 방법을 알아보세요.





Supabase Backend-as-a-Service 솔루션

BaaS(Backend-as-a-Service) 공급자 , Supabase와 마찬가지로 웹 애플리케이션을 위한 완전한 백엔드 서비스를 처음부터 구축하는 편리한 대안을 제공합니다. 이상적으로 이러한 솔루션은 React 웹 애플리케이션을 위한 효율적인 백엔드 시스템을 설정하는 데 필수적인 광범위한 사전 구축된 백엔드 서비스를 제공합니다.

BaaS를 사용하면 이러한 서비스를 독립적으로 개발하고 유지 관리할 필요 없이 데이터 저장소, 인증 시스템, 실시간 구독 등과 같은 기능을 사용할 수 있습니다.



텍스트 기반 게임을 만드는 방법

Supabase와 같은 BaaS 솔루션을 프로젝트에 통합하면 강력한 백엔드 서비스의 이점을 계속 누리면서 개발 및 배송 시간을 크게 줄일 수 있습니다.

PS4용 게임용 키보드 및 마우스

Supabase Cloud Storage 프로젝트 설정

시작하려면 다음으로 이동하세요. 수파베이스 홈페이지 , 그리고 계정에 가입합니다.



  1. 계정에 가입한 후 계정에 로그인합니다. 계기반 페이지.
  2. 를 클릭하십시오 새 프로젝트 단추.
  3. 프로젝트 세부 정보를 입력하고 다음을 클릭하십시오. 새 프로젝트 만들기 .
  4. 프로젝트가 설정되면 다음을 선택하고 클릭합니다. SQL 편집기 왼쪽 창 기능 패널의 기능 버튼. 's editor
  5. 다음에서 아래 SQL 문을 실행합니다. SQL 편집기 데모 테이블을 생성합니다. React 애플리케이션과 함께 사용할 데이터를 보관합니다.
     create table products ( 
      id bigint generated by default as identity primary key, 
      name text, 
      description text 
    );

React CRUD 애플리케이션 설정

반응 애플리케이션 만들기 , 루트 디렉터리로 이동하고 새 파일을 만듭니다. .env , 일부 환경 변수를 설정합니다. 수파베이스로 이동 설정 페이지를 엽니다. API 섹션에 대한 값을 복사합니다. 프로젝트 URL 그리고 공개 익명 키 . 다음을 env 파일에 붙여넣습니다.

 REACT_APP_SUPABASE_URL = project URL 
REACT_APP_SUPABASE_ANON_KEY = public anon key

다음으로 이 명령을 실행하여 React 프로젝트에 Supabase의 JavaScript 라이브러리를 설치합니다.



 npm install @supabase/supabase-js

수파베이스 클라이언트 구성

에서 소스 디렉터리, 새 만들기 utils/SupabaseClient.js 파일과 아래 코드:

 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);

이 코드는 Supabase URL과 공개 익명 키를 제공하여 Supabase 클라이언트 인스턴스를 생성하여 React 애플리케이션이 Supabase API와 통신하고 CRUD 작업을 수행할 수 있도록 합니다.