React 화면에 로그인과 데이터 저장을 붙이려면 인증, 데이터베이스, API, 파일 업로드를 함께 생각해야 합니다. Supabase는 이런 기능을 PostgreSQL을 중심으로 연결해 주는 개발 플랫폼입니다.
이번 저장소 해설에서는 Supabase가 맡는 역할과 React에서 시작하는 순서, 도입 전에 확인할 권한·API 키 설정을 정리합니다. 기능 개요는 공식 저장소 README와 공식 문서를 기준으로 확인했습니다.
Supabase는 어떤 프로젝트인가요?
Supabase 프로젝트의 중심에는 PostgreSQL 데이터베이스가 있습니다. 여기에 사용자 인증, 데이터 API, 실시간 통신, 파일 저장소, 서버 측 함수가 연결됩니다. 프론트엔드에서는 SDK나 API로 필요한 기능에 접근할 수 있습니다.
테이블을 만들고 데이터를 읽는 것부터 시작해, 로그인한 사용자가 자기 데이터만 다루도록 권한을 설계하는 방식으로 확장할 수 있습니다. 데이터 구조와 접근 규칙은 개발자가 정해야 합니다.
- Database: PostgreSQL의 테이블·관계·SQL을 이용해 애플리케이션 데이터를 관리합니다.
- Auth: 회원가입, 로그인, 세션 등 사용자 인증을 다룹니다.
- REST API·GraphQL: 데이터베이스 스키마를 바탕으로 API를 제공합니다. REST는 PostgREST, GraphQL은 pg_graphql을 사용합니다.
- Realtime: 데이터베이스 변경 구독, 메시지 전달, 접속 상태 공유를 다룹니다.
- Storage: 이미지·문서 같은 파일을 저장하고 접근 권한을 관리합니다.
- Edge Functions: 서버 측 코드를 실행할 수 있어 외부 API 연동 같은 작업에 활용할 수 있습니다.
어떤 화면을 만들 때 살펴보면 좋을까요?
예를 들어 개인 노트 앱을 만든다면 Auth로 사용자를 식별하고, Database에 노트를 저장하며, RLS 정책으로 자기 노트만 읽고 수정하도록 구성할 수 있습니다. 첨부 파일이 필요하면 Storage를 연결하는 식입니다.
공동 작업 화면이라면 Realtime의 변경 구독이나 접속 상태 기능도 검토할 수 있습니다. 이런 예시는 기능을 조합하는 방향이며, 실제 데이터 구조와 권한 정책은 앱의 요구사항에 맞춰 설계해야 합니다.
처음 살펴볼 때는 사용할 기능을 좁히는 편이 좋습니다. 테이블 한 개를 조회한 뒤 로그인과 사용자별 권한을 추가하면, 화면 요청이 데이터베이스 접근으로 이어지는 흐름을 확인하기 쉽습니다.
React에서 시작하는 순서
공식 React 빠른 시작은 프로젝트 생성, 예제 테이블 준비, React 연결, 데이터 조회 순서로 안내합니다. 처음에는 다음 네 단계를 기준으로 진행해 보세요.
- Supabase 프로젝트를 준비합니다. 관리형 서비스를 이용한다면 대시보드에서 프로젝트를 생성하고 연결 정보를 확인합니다.
- 읽을 데이터와 접근 범위를 정합니다. 예제 테이블을 만들고 필요한 권한과 RLS 정책을 설정합니다. 공개 예제 데이터와 사용자 개인 데이터를 구분하세요.
- React 앱에서 클라이언트를 연결합니다. 공식 가이드의
@supabase/supabase-js설정을 따라 프로젝트 URL과 publishable key를 연결합니다. - 조회 결과와 접근 거부를 확인합니다. 데이터가 화면에 보이는지 확인하고, 사용자별 데이터라면 다른 계정의 자료를 읽거나 바꿀 수 없는지도 검증합니다.
공식 가이드의 예제 테이블은 공개 조회를 허용하는 학습용 설정입니다. 그 정책을 개인 노트나 회원 전용 테이블에 그대로 적용하지 않도록 접근 범위를 먼저 확인해야 합니다.
도입 전에 확인할 세 가지
1. 로그인과 데이터 접근 권한을 나눠 확인하세요
로그인에 성공했다고 모든 테이블의 접근 권한이 자동으로 완성되는 것은 아닙니다. Auth는 사용자를 식별하고, 테이블 권한과 RLS 정책은 접근할 수 있는 데이터를 제한합니다.
공식 문서는 API에 노출되는 스키마의 테이블에서 RLS를 활성화하고, 역할별 권한과 정책을 함께 확인하도록 안내합니다. 자신의 데이터 조회·수정은 허용되고 다른 사용자의 데이터는 차단되는지 두 계정으로 확인해 보세요. 공식 RLS 가이드에서 권한과 정책의 관계를 볼 수 있습니다.
2. 브라우저에는 publishable key를 사용하세요
브라우저나 모바일 앱에 포함할 키는 publishable key입니다. 이 키 자체가 사용자별 데이터 보호를 대신하지는 않으므로 테이블 권한과 RLS 정책이 필요합니다.
secret key와 기존 service_role 키는 브라우저 코드에 넣으면 안 됩니다. 이 키들은 RLS를 우회하는 높은 권한을 가지므로 서버처럼 통제할 수 있는 환경에서 사용해야 합니다. 환경 변수라는 이름으로 저장해도 브라우저 번들에 들어가면 비밀값이 되지 않습니다. 공식 API 키 가이드에서 실행 환경별 키를 확인하세요.
3. 관리형 서비스·로컬 개발·자체 호스팅을 구분하세요
관리형 Supabase를 사용하는 것과 자신의 서버에서 Supabase를 운영하는 것은 운영 책임이 다릅니다. 자체 호스팅에서는 서버 유지, 보안 업데이트, 데이터베이스 관리, 백업과 모니터링을 직접 맡아야 합니다. 관리형 플랫폼의 모든 기능이 자체 호스팅에 그대로 제공되는 것도 아닙니다.
또한 Supabase CLI의 로컬 개발 스택은 개발·테스트를 위한 환경입니다. 운영용 자체 호스팅 배포와 같지 않으며 외부 트래픽에 공개하면 안 됩니다. 운영 방식을 결정하기 전에 공식 자체 호스팅 안내에서 차이를 확인하세요.
GitHub 저장소에서는 어디부터 볼까요?
- README에서 전체 기능과 공식 문서 연결을 먼저 살펴봅니다.
- examples 디렉터리에서 관심 있는 앱과 기능의 예제를 찾아봅니다.
- Issues에서 도입하려는 기능과 관련된 문제·제약을 확인합니다.
- LICENSE에서 메인 저장소의 Apache-2.0 라이선스를 확인합니다. 사용하는 개별 구성 요소의 라이선스도 함께 확인해야 합니다.
직접 연결하고 권한을 검증하는 실습은 BlogFlow Supabase 학습 순서에서 이어갈 수 있습니다. 다른 프로젝트도 찾아보고 싶다면 GitHub 인기 저장소 목록을 확인해 보세요.
공식 자료 확인일: 2026년 10월 22일. 이 글은 프로젝트의 기능과 도입 시 확인할 내용을 정리한 저장소 해설입니다.
새 글 받아보기
RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.