Zing 블로그에 있는 내 기사의 교차 게시물입니다.

Supabase는 오픈소스 Firebase 대안입니다. 제공되는 서비스는 다양하지만 이 기사의 목적에 따라 이것이 그리드의 간단한 백엔드 역할을 할 수 있는 방법에 대해 자세히 알아볼 것입니다.

초기 설정

그리드 구성을 시작하기 전에 Supabase 측면에서 실행해야 할 몇 가지 단계가 있습니다.

1. 계정 생성

먼저 연결할 Supabase 계정을 만들어야 합니다. 이 링크를 사용하여 Supabase에 가입할 수 있습니다. 계정이 생성되고 이메일이 확인되면 다음 단계로 진행하세요.

2. 첫 번째 프로젝트 만들기

계속해서 대시보드 페이지로 이동하여 새 프로젝트를 만드세요. 프로젝트 이름과 데이터베이스 비밀번호를 기록해 두세요.

3. 프로젝트 정보를 적어두세요

이 시점에서 프로젝트 URL과 API 키가 표시됩니다. 나중에 코드에서 이 두 가지를 모두 ZingGrid에 제공해야 하므로 안전한 로컬 파일에 저장하세요.

4. 첫 번째 테이블 만들기

사이드바에서 테이블 편집기 섹션을 클릭하세요. 여기에서 첫 번째 테이블을 만들 수 있습니다

첫 번째 단계는 테이블 이름을 지정하는 것입니다. 여기서는 decoTable을 사용하겠습니다.

그런 다음 열을 편집할 수 있습니다. 이 예에는 두 개의 열이 있습니다. 하나는 이름용이고 다른 하나는 성용입니다.

5. 일부 샘플 데이터 추가

6. 보안 설정 업데이트

이 데모를 위해 테이블에서 쉽게 읽고 쓸 수 있도록 행 수준 보안을 일시적으로 비활성화하겠습니다. 프로덕션에서는 인증을 통해 적절한 역할을 설정하려고 합니다.

⚠️ 참고: 이 설정 변경은 이 데모 목적일 뿐이며 프로덕션용이 아닙니다.

하위 베이스 어댑터 - REST API

ZingGrid는 REST API와 클라이언트 스크립트를 통해 Supabase와 상호 작용하는 두 가지 방법을 모두 지원합니다. 먼저 REST API를 사용해 보겠습니다.

아래 초기 데모 코드를 사용하여 다음을 교체하세요.

• ***링크*** - 앞서 적어둔 프로젝트 URL
• ***tableName*** - 방금 생성한 Supabase 테이블의 이름
• ***apiKey*** - 앞서 적어둔 Supabase API 키

브라우저에서 해당 페이지를 볼 때 우리가 채운 초기 데이터가 나타나는 것을 볼 수 있습니다!

SupabaseJS 어댑터 - 클라이언트 스크립트

앱이 Supabase JavaScript 클라이언트 라이브러리(문서 사이트에서 자세한 내용을 읽을 수 있음)를 사용하는 경우 마크업 외부에 Supabase 자격 증명을 저장하여 훨씬 더 유연하게 사용할 수 있습니다.

이전 예를 수정하여 먼저 Superbase 클라이언트 개체를 만듭니다(자세한 내용은 해당 문서 참조)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

그런 다음 해당 클라이언트를 ZingGrid에 등록합니다.

ZingGrid.registerClient(supabaseClient);

마지막으로 zg-data의 어댑터 속성을 supabaseJS로 설정했으며 다음과 같습니다.

이전과 동일하게 작업