Check out the latest news from Firebase at Cloud Next 2025. Learn more.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Firebase Data Connect 시작하기

이 빠른 시작에서는 프로덕션 SQL 인스턴스를 사용하여 애플리케이션에서 Firebase Data Connect를 빌드하는 방법을 알아봅니다.

Firebase 콘솔에서는 다음 작업을 할 수 있습니다.

Firebase 프로젝트에 Firebase Data Connect를 추가합니다.
Schema Assist를 사용하여 Firebase 콘솔에서 앱의 스키마를 만들고 배포합니다.
앱에 Cloud SQL 인스턴스를 프로비저닝합니다.
Gemini Code Assist를 사용하여 데이터베이스를 샘플 데이터로 채웁니다.

그런 다음 로컬 개발 환경에서 다음을 실행합니다.

프로덕션 인스턴스에서 작동하도록 Visual Studio Code 확장 프로그램을 비롯한 개발 도구를 설정합니다.
로컬 환경을 콘솔에서 만든 애셋과 동기화합니다.
확장 프로그램 도구를 사용하여 앱에서 사용할 쿼리를 구현합니다.
강력한 유형의 SDK를 생성하고 앱에서 사용합니다.
최종 스키마, 쿼리, 데이터를 클라우드에 배포합니다.

콘솔 흐름: 스키마 설계 및 데이터베이스에 배포

아직 Firebase 프로젝트가 없는 경우 프로젝트를 만드세요.
1. Firebase Console에서 프로젝트 추가를 클릭한 다음 화면에 표시되는 안내를 따릅니다.
Firebase 콘솔의 Data Connect 섹션으로 이동합니다.
Gemini 시작하기 버튼을 클릭합니다.
표시되는 스키마 생성기 워크플로 패널에서 Gemini가 GraphQL 스키마를 만드는 데 도움을 줄 수 있도록 앱을 설명합니다.
GraphQL 스키마를 검토한 다음 업그레이드 및 배포를 클릭합니다.
프로젝트를 Blaze 요금제로 업그레이드합니다. 이렇게 하면 PostgreSQL용 Cloud SQL 인스턴스를 만들 수 있습니다.

참고: Blaze 업그레이드에서 결제를 설정했지만 무료 체험 기간에는 Data Connect 또는 기본 PostgreSQL용 Cloud SQL 구성 사용에 대한 요금이 청구되지 않습니다.
새 Cloud SQL 인스턴스 만들기를 선택합니다. 표시되는 대화상자에서 PostgreSQL용 Cloud SQL 데이터베이스의 위치 및 이름을 선택합니다.

앱 스키마가 해당 스키마에 해당하는 PostgreSQL 데이터베이스와 함께 배포됩니다.

참고: 고객 관리 암호화 키 (CMEK)를 사용하려면 기존 Cloud SQL 인스턴스 사용을 선택하고 CMEK가 있는 기존 Cloud SQL 데이터베이스를 선택해야 합니다.
참고: PostgreSQL용 Cloud SQL 인스턴스 프로비저닝을 완료하는 데 최대 15분이 걸릴 수 있습니다. Google Cloud 콘솔을 사용하여 데이터베이스 프로비저닝을 비롯한 Data Connect 설정 흐름이 완료되었는지 확인할 수 있습니다.

콘솔 흐름: Firebase의 Gemini를 사용하여 변형을 만들고 데이터베이스를 채우기

이전 단계를 완료하면 관련 항목 유형으로 구성된 Data Connect 스키마가 생성되고 프로덕션에 배포되었습니다. 즉, 상응하는 테이블이 있는 PostgreSQL 데이터베이스도 생성되고 배포되었습니다.

데이터베이스를 채우려면 Firebase의 Gemini를 사용하여 자연어 입력을 통해 테이블 중 하나를 업데이트하는 GraphQL 변형과 업데이트를 확인하는 쿼리를 정의할 수 있습니다.

데이터 탭을 엽니다.
GraphQL 글쓰기 도우미 pen_spark 아이콘을 클릭하고 표시되는 상자에 입력 내용을 입력합니다.

참고: 데이터로 채우려면 Product 또는 Account와 같은 간단한 기본 항목을 선택합니다.

예를 들면 다음과 같습니다.
```
Add data for three sample products to my app.
```
생성을 클릭합니다. 변형이 반환됩니다.
출력을 검토합니다. 필요한 경우 수정을 클릭하여 프롬프트를 수정한 다음 재생성을 클릭합니다.
그런 다음 삽입을 클릭하여 데이터 편집기에 변형을 삽입합니다.
실행을 클릭합니다.

변형을 실행하면 데이터가 PostgreSQL 데이터베이스의 해당 테이블에 쓰여집니다. 콘솔에서 쿼리를 만들어 저장된 데이터를 볼 수 있습니다.

GraphQL 글쓰기 도우미 pen_spark를 사용하여 쿼리를 만들면서 이전 단계를 반복합니다.
표시되는 상자에 입력 내용을 입력합니다.

예를 들면 다음과 같습니다.
```
Query data for all sample products in my app.
```
생성을 클릭한 다음 실행을 클릭합니다.

로컬 흐름: 개발 도구 선택

이제 배포된 데이터베이스에 데이터가 있으므로 로컬 개발 환경에서 스키마 및 커넥터 개발을 계속할 수 있습니다.

먼저 로컬 환경을 설정해야 합니다. Data Connect는 개발 도구를 설치하는 두 가지 방법을 제공합니다.

로컬 흐름: 개발 환경 설정

로컬 프로젝트의 새 디렉터리를 만듭니다.
새로 만든 디렉터리에서 다음 명령어를 실행합니다.
```
  curl -sL https://firebase.tools/dataconnect | bash
```
이 스크립트는 개발 환경을 설정하고 브라우저 기반 IDE를 실행하려고 시도합니다. 이 IDE는 사전 번들로 묶인 VS Code 확장 프로그램을 비롯하여 스키마를 관리하고 애플리케이션에 사용할 쿼리 및 변형을 정의하고 강력한 유형의 SDK를 생성하는 데 도움이 되는 도구를 제공합니다.

참고: 데스크톱 버전의 VS Code가 이미 설치되어 있으면 스크립트가 자동으로 열립니다.
참고: 스크립트가 실패하면 수동 설치 단계를 따르세요.

alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

로컬 흐름: 프로젝트 디렉터리 설정

로컬 프로젝트를 설정하려면 프로젝트 디렉터리를 초기화합니다. IDE 창의 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Data Connect VS Code 확장 프로그램 UI를 엽니다.

Google 계정으로 로그인 버튼을 클릭합니다.
Firebase 프로젝트 연결 버튼을 클릭하고 이전에 Console에서 만든 프로젝트를 선택합니다.
Run firebase init 버튼을 클릭하고 절차를 완료합니다.

참고: firebase init는 로컬 프로젝트를 Firebase 콘솔에 배포된 리소스와 동기화합니다. 중요한 점은 개발을 계속할 수 있도록 GraphQL 스키마가 로컬 프로젝트에 다운로드된다는 것입니다.
에뮬레이터 시작 버튼을 클릭합니다.

참고: 통합 터미널에서 구성된 에뮬레이터가 시작되는지 확인합니다. 실행되면 에뮬레이터 세부정보가 포함된 확장 프로그램 UI가 업데이트됩니다.

로컬 흐름: 로컬 환경에서 스키마 찾기

이전 섹션의 firebase init 단계에서는 배포한 스키마를 콘솔에서 로컬 개발 환경으로 동기화했습니다.

스키마를 찾습니다. 스키마는 Firebase 프로젝트 디렉터리의 /dataconnect/schema/schema.gql 파일에 있습니다.

로컬 흐름: 스키마 작업

스키마 예: 영화

Data Connect에서 GraphQL 필드는 열에 매핑됩니다. Movie 유형에는 id, title, imageUrl, genre가 있을 수 있습니다. Data Connect는 기본 데이터 유형 String 및 UUID를 인식합니다.

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

스키마 예 1:1 테이블: MovieMetadata

영화를 사용하면 영화 메타데이터를 모델링할 수 있습니다.

예를 들어 schema.gql에서 다음 스니펫을 추가하거나 Gemini에서 생성된 코드를 검토할 수 있습니다.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

movie 필드는 Movie 유형에 매핑됩니다. Data Connect는 Movie와 MovieMetadata 간의 관계임을 인식하고 이 관계를 대신 관리합니다.

문서에서 Data Connect 스키마 자세히 알아보기

로컬 흐름: 테이블에 데이터 추가

IDE 편집기 패널에서 /dataconnect/schema/schema.gql의 GraphQL 유형 위에 CodeLens 버튼이 표시되는 것을 볼 수 있습니다. 콘솔에서와 마찬가지로 프로덕션 데이터베이스에 데이터를 추가하는 변형을 만들 수 있습니다.

로컬에서 테이블에 데이터를 추가하려면 다음 단계를 따르세요.

schema.gql에서 유형 선언 위의 데이터 추가 버튼을 클릭합니다 (예: 앱의 특성에 따라 Movie, Product, Account).
새 파일 <type>_insert.qgl가 작업 디렉터리(예: Movie_insert.gql 또는 Product_insert.gql)에 추가됩니다. 해당 유형의 필드에 데이터를 하드 코딩합니다.
실행 (프로덕션) 버튼을 클릭합니다.
이전 단계를 반복하여 다른 테이블에 레코드를 추가합니다.

데이터가 추가되었는지 빠르게 확인하려면 다음 단계를 따르세요.

schema.gql로 돌아가서 유형 선언 위의 데이터 읽기 버튼을 클릭합니다.
결과 <type>_read.gql 파일(예: Product_read.gql)에서 실행(프로덕션) 버튼을 클릭하여 쿼리를 실행합니다.

문서에서 Data Connect 변형에 대해 자세히 알아보기

로컬 흐름: 쿼리 정의

이제 재미있는 부분인 쿼리를 살펴보겠습니다. 개발자는 GraphQL 쿼리 대신 SQL 쿼리를 작성하는 데 익숙하므로 처음에는 약간 다르게 느껴질 수 있습니다. 그러나 GraphQL은 원시 SQL보다 훨씬 간결하고 유형 안전성이 높습니다. VS Code 확장 프로그램을 사용하면 개발 환경이 간소화됩니다.

쿼리를 구현하려면 CodeLens로 생성된 쿼리를 조정하면 됩니다.

/dataconnect/schema/schema.gql에서 유형 (Movie, Product, Account 등) 위의 데이터 읽기 CodeLens 버튼을 클릭합니다.
생성된 <type>_read.gql 파일에서 실행 (프로덕션) 버튼을 클릭하여 쿼리를 테스트합니다.
작동하는 쿼리를 /dataconnect/connector/queries.gql에 복사합니다.
이 쿼리를 배포할 수 있게 하려면 고유한 이름을 선언합니다.

예를 들어 다음 일반 예에서 query_name는 ListMovies, ListProducts 또는 ListAccounts일 수 있습니다.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

근처의 CodeLens 버튼을 사용하여 쿼리를 실행합니다.

문서에서 Data Connect 쿼리에 대해 자세히 알아보기

로컬 흐름: SDK 생성

앱에 SDK 추가 버튼을 클릭합니다.
표시되는 대화상자에서 앱의 코드가 포함된 디렉터리를 선택합니다. Data Connect SDK 코드가 생성되어 여기에 저장됩니다.

참고: 아직 앱 디렉터리가 없는 경우 지금은 SDK 코드의 새 디렉터리를 만들고 선택한 후 나중에 앱에 연결할 수 있습니다.
앱 플랫폼을 선택하면 선택한 디렉터리에 SDK 코드가 즉시 생성됩니다.

로컬 흐름: 스키마 및 쿼리를 프로덕션에 배포

개발 반복을 진행했습니다. 이제 Firebase 확장 프로그램 UI 또는 Firebase CLI를 사용하여 스키마와 마찬가지로 스키마 및 쿼리를 서버에 배포할 수 있습니다.

IDE 창의 VS Code 확장 프로그램 UI에서 프로덕션에 배포 버튼을 클릭합니다.

배포가 완료되면 Firebase 콘솔로 이동하여 스키마 업데이트 (해당하는 경우) 및 작업이 클라우드에 업로드되었는지 확인합니다. 콘솔에서도 스키마를 보고 작업을 실행할 수 있습니다. PostgreSQL용 Cloud SQL 인스턴스가 최종적으로 배포된 생성된 스키마 및 데이터로 업데이트됩니다.

문서에서 Data Connect 에뮬레이터 사용에 대해 자세히 알아보기

로컬 흐름: SDK를 사용하여 앱에서 쿼리 호출

이제 업데이트된 스키마 (해당하는 경우)와 쿼리가 프로덕션에 배포되었으므로 Data Connect에서 생성한 SDK를 사용하여 ListMovies 쿼리 호출을 구현할 수 있습니다.

웹

웹 앱에 Firebase를 추가합니다.

React 앱의 기본 파일에서 다음을 실행합니다.

생성된 SDK 가져오기
Data Connect 메서드를 호출합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

function App() {
  const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
  useEffect(() => {
    listMovies.then(res => setMovies(res.data));
  }, []);
  return (
    movies.map(movie => <h1>{movie.title}</h1>);
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Swift

iOS 앱에 Firebase를 추가합니다.
생성된 SDK를 사용하려면 Xcode에서 종속 항목으로 구성합니다.

Xcode 상단 탐색 메뉴에서 File(파일) > Add Package Dependencies(패키지 종속 항목 추가) > Add Local(로컬 추가)을 선택하고 생성된 Package.swift가 포함된 폴더를 선택합니다.

앱의 기본 대리자에서 다음을 실행합니다.

생성된 SDK 가져오기
Data Connect 메서드를 호출합니다.

import SwiftUI

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

struct ListMovieView: View {
@StateObject private var queryRef = connector.listMovies.ref()

    var body: some View {
        VStack {
            Button {
                Task {
                    do {
                        try await refresh()
                    } catch {
                        print("Failed to refresh: \(error)")
                    }
                }
            } label: {
                Text("Refresh")
            }

            // use the query results in a view
            ForEach(queryRef.data?.movies ?? []) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}

Kotlin Android

Android 앱에 Firebase를 추가합니다.

생성된 SDK를 사용하려면 Gradle에서 Data Connect를 종속 항목으로 구성합니다.

app/build.gradle.kts에서 plugins 및 dependencies를 업데이트합니다.

plugins {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest as of March 14, 2025.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.9.0"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.10"
  kotlin("android") version kotlinVersion
  kotlin("plugin.serialization") version kotlinVersion
}

dependencies {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest versions as of March 14, 2025.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")

  // These dependencies are not strictly required, but will very likely be used
  // when writing modern Android applications.
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
  implementation("androidx.appcompat:appcompat:1.7.0")
  implementation("androidx.activity:activity-ktx:1.10.1")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

앱의 기본 활동에서 다음을 실행합니다.

생성된 SDK 가져오기
Data Connect 메서드를 호출합니다.

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import kotlinx.coroutines.launch


private val connector = com.myapplication.MoviesConnector.instance

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val textView: TextView = findViewById(R.id.text_view)

    lifecycleScope.launch {
      lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        
        val result = connector.listMovies.runCatching { execute { } }
        
        val newTextViewText = result.fold(
          onSuccess = {
            val titles = it.data.movies.map { it.title }
            "${titles.size} movies: " + titles.joinToString(", ")
          },
          onFailure = { "ERROR: ${it.message}" }
        )
        textView.text = newTextViewText
      }
    }
  }
}

Flutter

Flutter 앱에 Firebase를 추가합니다.
flutterfire CLI dart pub global activate flutterfire_cli를 설치합니다.
flutterfire configure를 실행합니다.
앱의 main 함수에서 다음을 실행합니다.
- 생성된 SDK 가져오기
- Data Connect 메서드를 호출합니다.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemBuilder: (context, index) => Card(
                      child: Text(
                    snapshot.data!.data.movies[index].title,
                  )),
                  itemCount: snapshot.data!.data.movies.length,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

다음 단계

배포된 프로젝트를 검토하고 더 많은 도구를 살펴보세요.

Firebase 콘솔에서 데이터베이스에 데이터를 추가하고, 스키마를 검사 및 수정하고, Data Connect 서비스를 모니터링합니다.

문서에서 자세한 내용을 확인하세요. 예를 들어 빠른 시작을 완료했으므로 다음과 같이 할 수 있습니다.

스키마, 쿼리, 변형 개발에 대해 자세히 알아보기
클라이언트 SDK를 생성하고 웹, Android, iOS, Flutter의 클라이언트 코드에서 쿼리 및 변형을 호출하는 방법을 알아보세요.