Google I/O 2022에서 Firebase의 새로운 기능을 확인하세요. 자세히 알아보기

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

Firebase Data Connect 시작하기

이 빠른 시작에서는 Firebase Data Connect를 빌드하는 방법을 알아봅니다. 실행할 수 있습니다

Firebase 프로젝트에 Firebase Data Connect를 추가합니다.
프로덕션 인스턴스에서 작동하도록 Visual Studio Code 확장 프로그램을 포함한 개발 환경을 설정합니다.
그런 다음 다음 작업을 수행하는 방법을 안내해 드리겠습니다.
- 영화 리뷰 앱에 대한 스키마를 만들어 프로덕션에 배포합니다.
- 스키마의 쿼리 및 변형을 정의합니다.
- 강력한 유형의 SDK를 생성하고 앱에서 사용
- 최종 스키마, 쿼리, 데이터를 프로덕션에 배포합니다.

기본 요건

로컬 환경에서 이 빠른 시작을 사용하려면 다음이 필요합니다.

Linux, macOS 또는 Windows
Visual Studio Code

Firebase 프로젝트에 연결

아직 Firebase 프로젝트가 없는 경우 프로젝트를 만드세요.
1. Firebase Console에서 프로젝트 추가를 클릭한 다음 화면에 표시되는 안내를 따릅니다.
Firebase 콘솔의 Data Connect 섹션으로 이동합니다. 제품 설정 워크플로를 따릅니다
프로젝트를 Blaze 요금제로 업그레이드합니다. 이렇게 하면 PostgreSQL용 Cloud SQL 인스턴스를 만들 수 있습니다.

참고: Blaze 업그레이드에서 결제를 설정하더라도 Data Connect 또는 PostgreSQL용 기본 Cloud SQL 구성 미리 볼 수 있습니다.
PostgreSQL용 CloudSQL 데이터베이스의 위치를 선택합니다.
나중에 확인할 수 있도록 프로젝트, 서비스, 데이터베이스 이름 및 ID를 기록해 둡니다.
나머지 설정 단계를 따르고 완료를 클릭합니다.

참고: Cloud SQL 프로비저닝을 완료하는 데 최대 15분이 걸릴 수 있습니다. PostgreSQL 인스턴스입니다. Data Connect 설정 흐름을 확인할 수 있습니다. Google Cloud 콘솔의 Google Cloud 콘솔

개발 환경 선택 및 설정

Data Connect는 두 가지 개발 환경을 지원합니다.

Kotlin Android, iOS, Flutter 또는 웹 개발자인 경우 VS Code 개발을 사용하여 PostgreSQL용 Cloud SQL 인스턴스에 연결하는 동안 로컬에서 스키마와 작업을 설계하고 테스트할 수 있습니다.
웹 개발자는 IDX 개발을 사용하여 PostgreSQL이 포함된 사전 구성된 IDX 템플릿, Data Connect 에뮬레이터가 포함된 VS Code 확장 프로그램, 자동으로 설정된 빠른 시작 클라이언트 코드를 사용하여 IDX 워크스페이스에서 프로토타입을 만들 수 있습니다. 자세한 내용은 Project IDX 사이트.

이 빠른 시작에서는 VS Code 확장 프로그램 개발 흐름에 중점을 둡니다. 계속하려면 다음 안내를 따르세요.

로컬 프로젝트의 새 디렉터리를 만듭니다.
새 디렉터리에서 VS Code를 엽니다.
Visual Studio Code Marketplace에서 Firebase Data Connect 확장 프로그램을 설치합니다.

참고: 이 확장 프로그램에는 마켓플레이스 GraphQL 구문 강조 표시 확장 프로그램이 포함되어 있습니다. 설치하는 다른 GraphQL 확장 프로그램이 Firebase Data Connect 확장 프로그램에 번들로 제공된 GraphQL 지원과 충돌할 수 있습니다.

로컬 프로젝트 설정

일반 안내에 따라 CLI를 설치합니다. npm이 이미 설치되어 있으면 다음 명령어를 실행합니다.

npm install -g firebase-tools

프로젝트 디렉터리 설정

로컬 프로젝트를 설정하려면 프로젝트 디렉터리를 초기화합니다.

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

Google 계정으로 로그인 버튼을 클릭합니다.
Firebase 프로젝트 연결 버튼을 클릭하고 이전에 Console에서 만든 프로젝트를 선택합니다.
firebase init 실행 버튼을 클릭합니다.
프로젝트에서 Blaze 요금제를 사용하는 경우 '지금 백엔드 리소스를 구성하시겠어요?'라는 메시지가 표시되면 '예'라고 답합니다.
Start emulators 버튼을 클릭합니다.

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

스키마 만들기

Firebase 프로젝트 디렉터리의 /dataconnect/schema/schema.gql 영화가 포함된 GraphQL 스키마를 정의합니다.

영화

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
}

영화 메타데이터

이제 영화가 있으므로 영화 메타데이터를 모델링할 수 있습니다.

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

# 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 스키마 자세히 알아보기

프로덕션에 스키마 배포

Firebase VS Code 확장 프로그램을 사용하여 프로덕션 데이터베이스를 사용하려면 계속하기 전에 스키마를 배포해야 합니다. 후(After) 프로덕션 데이터베이스에 스키마를 배포하면 확인할 수 있습니다

Data Connect VS Code 확장 프로그램을 사용하여 배포할 수 있습니다.
- 확장 프로그램 UI의 Firebase Data Connect 패널에서 프로덕션 배포
스키마 변경사항을 검토하고 잠재적으로 손상될 수 있는 수정사항을 승인해야 할 수도 있습니다. 다음 작업을 수행하라는 메시지가 표시됩니다. <ph type="x-smartling-placeholder">
- firebase dataconnect:sql:diff를 사용하여 스키마 변경사항 검토
- 변경사항이 만족스러우면 다음을 사용하여 변경사항을 적용합니다. firebase dataconnect:sql:migrate

테이블에 데이터 추가

VS Code 편집기 패널에서 /dataconnect/schema/schema.gql의 GraphQL 유형 위에 CodeLens 버튼이 표시되는 것을 볼 수 있습니다. 스키마를 프로덕션에 배포했으므로 데이터 추가 및 실행(프로덕션) 버튼을 사용하여 백엔드의 데이터베이스에 데이터를 추가할 수 있습니다.

Movie 테이블에 레코드를 추가하려면 다음 안내를 따르세요.

schema.gql에서 Movie 유형 선언 위의 데이터 추가 버튼을 클릭합니다.
생성된 Movie_insert.gql 파일에서 4개의 필드에 데이터를 하드 코딩합니다.
실행 (프로덕션) 버튼을 클릭합니다.

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

schema.gql로 돌아가서 데이터 읽기 버튼을 클릭합니다.
결과로 반환되는 Movie_read.gql 파일에서 실행 (프로덕션)을 클릭합니다. 버튼을 클릭하여 쿼리를 실행합니다.

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

쿼리 정의

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

/dataconnect/connector/queries.gql 파일 수정을 시작합니다. 모든 영화를 가져오려면 다음과 같은 쿼리를 사용하세요.

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

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

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

문서에서 데이터 연결 쿼리에 대해 자세히 알아보기

SDK를 생성하여 앱에서 사용

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

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

생성된 SDK를 사용하여 클라이언트에서 쿼리 및 변형을 호출하는 방법 알아보기 앱 (웹, Android, iOS, Flutter).

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

개발 반복을 진행했습니다. 이제 GCP 콘솔에서 스키마, 데이터, 쿼리를 Firebase 확장 프로그램 UI 또는 Firebase CLI에 연결할 수 있습니다.

Firebase VS Code 확장 프로그램을 사용하여 배포하는 경우 프로덕션에 배포 버튼

배포가 완료되면 Firebase 콘솔로 이동하여 스키마, 작업, 데이터가 클라우드에 업로드되었는지 확인합니다. 나 스키마를 볼 수 있는 권한이 있어야 하며, 좋습니다. PostgreSQL용 Cloud SQL 인스턴스가 최종 버전으로 업데이트됩니다. 스키마와 데이터를 배포합니다

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

다음 단계

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

Firebase 콘솔에서 데이터베이스에 데이터를 추가하고, 스키마를 검사 및 수정하고, 데이터 연결 서비스를 모니터링합니다. 문서에서 자세한 내용을 확인하세요. 예를 들어 빠른 시작을 완료했다고 가정해 보겠습니다.
스키마, 쿼리, 변형 개발에 대해 자세히 알아보기
클라이언트 SDK를 생성하고 웹, Android, iOS, Flutter의 클라이언트 코드에서 쿼리 및 변형을 호출하는 방법을 알아보세요.