AI 에이전트를 사용하여 Firebase SQL Connect 시작하기

이 빠른 시작에서는 AI 코딩 도구와 함께 Firebase SQL Connect를 사용하여 전체 스택 관계형 애플리케이션을 빠르게 빌드하는 방법을 보여줍니다. 에이전트에 Firebase Agent Skills를 장착하면 상용구 데이터베이스 코드를 작성하거나 엔드포인트를 수동으로 구성할 필요가 없습니다. 로컬 프로젝트를 설정하고, AI 어시스턴트를 구성하고, 단일 프롬프트를 사용하여 보안 PostgreSQL 스키마, GraphQL 작업, 완전한 React 프런트엔드를 생성하는 방법을 알아봅니다. 여기에서 학습한 내용을 사용하여 Firebase SQL Connect에서 지원하는 모든 플랫폼의 프런트엔드를 빌드할 수 있습니다.

시작하기 전에

이 빠른 시작을 완료하려면 환경이 다음으로 설정되어 있는지 확인하세요. 특정 운영체제에 관한 단계별 도움이 필요한 경우 표준 설정 가이드를 참고하세요.

  • Node.js: Node.js를 설치하여 Firebase CLI 를 실행하고 생성된 React 프런트엔드를 지원합니다.

  • Firebase CLI: Firebase CLI를 전역적으로 설치합니다.

    npm install -g firebase-tools

  • AI 코딩 도구: 최신 AI 기반 편집기 (예: Antigravity, Android 스튜디오, Cursor 또는 Windsurf)를 설치합니다.

작업공간 설정하기

먼저 원하는 AI 코딩 도구를 열고 새 프로젝트 디렉터리를 만듭니다. 도구의 통합 터미널을 열고 초기화 명령어를 실행합니다.

firebase init dataconnect

이 명령어는 프로젝트 초기화를 안내합니다. 메시지가 표시되면 다음 옵션을 선택합니다.

  • 새 Firebase 프로젝트 만들기
  • Gemini 스키마 생성 건너뛰기
  • 새 Cloud SQL 인스턴스 만들기
  • React 템플릿 만들기
  • 예 를 선택하여 Firebase용 Agent Skills 설치

AI로 앱 생성하기

Firebase Agent Skills가 설치되어 있으면 AI 어시스턴트가 상위 수준 프롬프트에서 직접 SQL Connect 스키마, 작업, 프런트엔드 코드를 생성할 수 있습니다.

다음 프롬프트 중 하나를 복사하여 AI 어시스턴트에 붙여넣어 백엔드, 데이터베이스 관계, React 프런트엔드를 생성합니다.

예 1: 영화 리뷰 앱

프롬프트:

Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.

예 2: 전자상거래 스토어프런트

프롬프트:

Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.

예 3: 다중 작성자 블로그

프롬프트:

Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.

AI 어시스턴트가 만드는 항목

이러한 프롬프트를 실행하면 AI 어시스턴트가 기술적인 작업을 자동으로 처리합니다.

  • 데이터베이스 스키마 (dataconnect/schema/schema.gql): @table 지시어를 사용하여 요구사항을 관계형 테이블로 변환하고 외래 키와 기본 키를 자동으로 관리합니다.
  • GraphQL 작업 (dataconnect/[connector_name]/*.gql): @auth 지시어로 보호되는 앱에 필요한 정확한 쿼리와 변형을 생성합니다.
  • 생성된 SDK (src/dataconnect/): Firebase CLI를 사용하여 스키마와 작업을 기반으로 엄격한 유형의 클라이언트 SDK를 즉시 생성합니다.
  • React 프런트엔드 (src/): 생성된 SDK를 사용하여 새 백엔드와 통신하는 완전하고 아름답게 스타일이 지정된 React 애플리케이션을 연결합니다.

프로덕션에 배포

스키마, 쿼리, 변형을 프로덕션에 배포하려면 터미널에서 다음 명령어를 실행합니다.

firebase deploy --only dataconnect

배포 후 Firebase Console을 방문하여 실시간 스키마를 확인하고 Cloud SQL 인스턴스에 대해 직접 작업을 실행합니다.

다음 단계

이제 빠른 시작을 완료했으므로 다음 단계를 진행하세요.