Here's everything we announced at I/O, from new Firebase Studio features to more ways to integrate AI. Read blog.

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

로컬에서 Firebase Data Connect 시작하기
컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

이 빠른 시작에서는 프로덕션 SQL 인스턴스를 설정하지 않고 애플리케이션에서 로컬로 Firebase Data Connect를 빌드하는 방법을 알아봅니다. 실습할 내용은 다음과 같습니다.

Firebase 프로젝트에 Firebase Data Connect를 추가합니다.
로컬 인스턴스에서 작업할 수 있도록 Visual Studio Code 확장 프로그램을 포함한 개발 환경을 설정합니다.
그런 다음 다음 작업을 수행하는 방법을 안내해 드리겠습니다.
- Gemini Code Assist와 함께 VS Code 확장 프로그램 도구를 사용하여 다음 작업을 실행합니다.
  - 앱의 스키마 만들기
  - 관리 쿼리 및 변형을 만들어 로컬 데이터베이스를 채웁니다.
  - 배포 가능한 커넥터에서 앱의 쿼리 및 변형을 구현할 수 있도록 지원
- 로컬 에뮬레이터에서 샘플 데이터를 사용하여 쿼리 및 변형을 테스트합니다.
- 강력한 유형의 SDK를 생성하고 앱에서 사용
- 최종 스키마와 커넥터를 클라우드에 배포합니다 (선택사항, Blaze 요금제 업그레이드 필요).

로컬 개발 흐름 선택

Data Connect는 개발 도구를 설치하고 로컬에서 작업하는 두 가지 방법을 제공합니다.

기본 요건

이 빠른 시작을 사용하려면 다음이 필요합니다.

Firebase 프로젝트 아직 프로젝트를 만들지 않았다면 Firebase Console에서 만듭니다.

로컬 흐름: 개발 환경 설정

로컬 프로젝트의 새 디렉터리를 만듭니다.
새로 만든 디렉터리에서 다음 명령어를 실행합니다.
```
  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 버튼을 클릭합니다.
에뮬레이터 시작 버튼을 클릭합니다.

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

스키마 만들기

Firebase 프로젝트 디렉터리의 /dataconnect/schema/schema.gql 파일에서 영화 리뷰와 같은 항목에 관한 GraphQL 스키마를 정의합니다.

Gemini Code Assist를 사용하여 스키마 빌드

Gemini Code Assist를 사용하여 영화 리뷰 앱 스키마를 만들려면 다음 단계를 따르세요.

Data Connect VS Code 확장 프로그램 아이콘을 클릭하여 사이드바를 엽니다.
@data-connect로 Gemini 사용해 보기를 클릭합니다. Gemini Code Assist 채팅 창이 열립니다.
채팅 인터페이스를 클릭하고 @data-connect를 입력하여 관련 명령어를 필터링합니다.
/generate_schema 명령어를 선택하고 프롬프트에서 명령어를 완료하여 Gemini에 개발 중인 앱의 스키마를 빌드하도록 요청합니다.

예를 들면 다음과 같습니다.
```
@data-connect /generate_schema I want to build an app to track movie reviews from multiple users
```
잠시 후 권장 스키마가 표시됩니다. 스키마를 검토합니다.

참고: 초기 스키마를 수정하려면 새 @data-connect /generate_schema 명령어를 실행하고 Gemini에 스키마에서 유형을 삭제하거나 유형에 특정 필드를 추가하도록 요청할 수 있습니다.
schema.gql에 코드를 추가하려면 다음 단계를 따르세요.
1. 파일 하단에 삽입 버튼을 클릭합니다.
2. 또는 커서 위치에 코드를 삽입하려면 채팅 응답 상단의 + 버튼을 클릭합니다.

영화

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

다음 스니펫을 복사하거나 파일에서 해당 줄의 주석 처리를 삭제합니다.

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

다음 스니펫을 복사하거나 파일에서 해당 줄의 주석 처리를 삭제합니다.

# 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 버튼이 표시됩니다. 데이터 추가 및 실행 (로컬) 버튼을 사용하여 로컬 데이터베이스에 데이터를 추가할 수 있습니다.

Movie 및 MovieMetadata 테이블에 레코드를 추가하려면 다음 단계를 따르세요.

schema.gql에서 Movie 유형 선언 위의 데이터 추가 버튼을 클릭합니다.
생성된 Movie_insert.gql 파일에서 세 필드의 데이터를 하드 코딩합니다.
Run (Local)(실행(로컬)) 버튼을 클릭합니다.
이전 단계를 반복하여 MovieMetadata 테이블에 레코드를 추가하고 생성된 MovieMetadata_insert 변형에서 메시지가 표시되는 대로 movieId 필드에 영화의 id를 제공합니다.

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

schema.gql로 돌아가서 Movie 유형 선언 위의 데이터 읽기 버튼을 클릭합니다.
생성된 Movie_read.gql 파일에서 Run (Local) 버튼을 클릭하여 쿼리를 실행합니다.

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

쿼리 정의

이제 더 재미있는 작업을 해 보겠습니다. 애플리케이션에 필요한 쿼리를 정의합니다. 개발자는 GraphQL 쿼리 대신 SQL 쿼리를 작성하는 데 익숙하므로 처음에는 약간 다르게 느껴질 수 있습니다.

하지만 GraphQL은 원시 SQL보다 훨씬 간결하고 유형 안전성이 높습니다. 또한 VS Code 확장 프로그램을 사용하면 쿼리와 변형 모두에서 개발 환경이 간소화됩니다.

Gemini Code Assist를 사용하여 쿼리를 만들려면 다음 단계를 따르세요.

Data Connect VS Code 확장 프로그램 아이콘을 클릭하여 사이드바를 엽니다.
@data-connect로 Gemini 사용해 보기를 클릭합니다. Gemini Code Assist 채팅 창이 열립니다.
채팅 인터페이스를 클릭하고 @data-connect를 입력하여 관련 명령어를 필터링합니다.
/generate_operation 명령어를 선택하고 프롬프트에서 명령어를 완료하여 Gemini에 쿼리 빌드를 요청합니다.

예를 들면 다음과 같습니다.
```
@data-connect /generate_operation List all movies with titles start with "A".
```
잠시 후 추천 검색어가 표시됩니다. 쿼리를 검토합니다.

참고: 초기 쿼리를 수정하려면 새 @data-connect /generate_operation 명령어를 실행하고 Gemini에게 숫자로 시작하는 제목을 필터링하도록 요청할 수 있습니다. 또는 '모든 스키마 유형에 관한 변형 생성'과 같은 안내를 사용하여 여러 변형을 생성하도록 요청할 수 있습니다.
queries.gql에 코드를 추가하려면 다음 단계를 따르세요.
1. 파일 하단에 삽입 버튼을 클릭합니다.
2. 또는 커서 위치에 코드를 삽입하려면 채팅 응답 상단의 + 버튼을 클릭합니다.

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

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

SDK 생성 및 앱에서 사용

IDE 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Data Connect VS Code 확장 프로그램 UI를 엽니다.

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

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

SDK를 사용하여 앱에서 쿼리 호출

Data Connect에서 생성한 SDK를 사용하여 ListMovies 쿼리 호출을 구현할 수 있습니다. 그런 다음 Data Connect 에뮬레이터를 사용하여 이 쿼리를 로컬에서 실행할 수 있습니다.

웹

웹 앱에 Firebase를 추가합니다.

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

생성된 SDK 가져오기
Data Connect 에뮬레이터에 연결하도록 앱 계측
Data Connect 메서드를 호출합니다.

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

import { connectDataConnectEmulator } from 'firebase/data-connect';

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

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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 에뮬레이터에 연결하도록 앱 계측
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

// Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

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 에뮬레이터에 연결하도록 앱 계측
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
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }


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 에뮬레이터에 연결하도록 앱 계측
- 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

스키마 및 쿼리를 프로덕션에 배포

앱에 로컬 설정을 완료했으면 이제 스키마 및 커넥터를 클라우드에 배포할 수 있습니다. Cloud SQL 인스턴스를 설정하려면 Blaze 요금제 프로젝트가 필요합니다.

Firebase 콘솔의 Data Connect 섹션으로 이동하여 무료 체험판 Cloud SQL 인스턴스를 만듭니다.

참고: PostgreSQL용 Cloud SQL 인스턴스를 프로비저닝하는 데 최대 15분이 걸릴 수 있습니다. 인스턴스가 준비될 때까지는 배포할 수 없습니다.
참고: 고객 관리 암호화 키 (CMEK)를 사용하려면 기존 Cloud SQL 인스턴스 사용을 선택하고 CMEK가 있는 기존 Cloud SQL 데이터베이스를 선택해야 합니다.
IDE 통합 터미널에서 firebase init dataconnect을 실행하고 방금 콘솔에서 만든 지역/서비스 ID를 선택합니다.
'파일 dataconnect/dataconnect.yaml이 이미 존재합니다. 덮어쓰시겠습니까?'라는 메시지가 표시되면 'Y'를 선택합니다.
IDE 창의 VS Code 확장 프로그램 UI에서 프로덕션에 배포 버튼을 클릭합니다.
배포가 완료되면 Firebase 콘솔로 이동하여 스키마, 작업, 데이터가 클라우드에 업로드되었는지 확인합니다. 콘솔에서 스키마를 확인하고 작업을 실행할 수도 있습니다. PostgreSQL용 Cloud SQL 인스턴스가 최종적으로 배포된 생성된 스키마 및 데이터로 업데이트됩니다.

다음 단계

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

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

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

스키마, 쿼리, 변형을 생성하는 데 도움이 되는 AI 지원 도구와 안내를 자세히 알아보세요. AI 지원 가이드에서는 프롬프트 작성 권장사항을 다룹니다.
스키마, 쿼리, 변형 개발에 대해 자세히 알아보기
클라이언트 SDK를 생성하고 웹, Android, iOS, Flutter의 클라이언트 코드에서 쿼리 및 변형을 호출하는 방법을 알아보세요.