[React Native] Firebase Cloud Firestore 연결하기 #1 - 프로젝트 설정

 

React Native에서 사용할 DB를 찾아보다 Firebase를 붙여 사용해 봐야 겠다는 생각이 들었습니다.

오프라인 일때는 로컬 DB를 사용하고 온라인이 되면 서버 DB와 동기화 되며 다양한 기능들을 사용할 수 있을 것이라 기대 했기 때문이죠. 천천히 React Native에 Firebase를 붙여보는 과정을 정리해보려고 합니다.

 

00. Firebase 프로젝트 생성하기.

 

구글 콘솔에 접속해서 프로젝트를 먼저 생성해 주어야 합니다.

Firebase의 기능을 사용하려면 프로젝트가 먼저 있어야 하거든요.

 

https://console.firebase.google.com/

 

Firebase 콘솔에 접속하여 프로젝트를 추가 합니다.

 

안내에 따라 프로젝트를 생성하면 되니 따로 정리하지는 않겠습니다.

프로젝트를 생성하고 해당 프로젝트로 이동하빈다.

아래와 같은 화면으로 이동한다면 프로젝트 생성 완료.

 

Firebase에서 Cloud Firestore를 제공하는데 데이터베이스라고 이해하시면 됩니다.

 

두가지 종류로 제공하는데 아래 사이트에 자세히 설명되어 있으니 한번 확인해보시면 좋습니다.

 

https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=2

가격 정책도 꼭 한번 살펴보세요.

 

https://firebase.google.com/pricing?authuser=2

Firebase Pricing

 

01. Firebase 설치

 

그럼 Cloude Firestore를 붙여보기 위해 가장 먼저할 것은 Firebase를 프로젝트에 설치하는 것이죠.

npm과 yarn 중 원하는 방법으로 설치 합니다.

 

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

 

02. Firebase Project 연결하기

 

이제 ReactNative Project에 Firebase Project를 연결해주어야 합니다.

우선 Android에 연결시키는 방법으로 진행하겠습니다.

 

Firebase Console 초기 화면에 "앱에 Firebase를 추가하여 시작하기"아래 Android를 선택하여 추가 합니다.

 

Firebase 홈페이지에 있는 순서대로 진행하면 됩니다.

 

주의 할점은 Android Pakage name"은 local project와 동일해야 합니다.

/android/app/src/main/AndroidManifest.xml 파일에 manifest tag의 package 이름을 확인하세요.

 

그리고 google-services.json을 다운로드 받은 뒤 android/app 폴더에 복사해줍니다.

이제 google-services 플러그인을 프로젝트에 설정합니다.

 

/android/build.gradle 파일에 아래를 추가해주세요.

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
    // Add me --- /\
  }
}

/android/app/build.gradle 에도 아래를 추가해주세요.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

이제 설정 완료 입니다.

 

설정이 완료되었다면 프로젝트를 재실행합니다.

재실행하면 ReactNative 0.60+ 버전에서는 autolinking을 지원하여 빌드만 다시 진행하면 됩니다.

# Android apps
npx react-native run-android

# iOS apps
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

 

빌드하여 프로젝트다 다시 정상 실행된다면 설정 완료.

다음편에서 Cloud Firestore를 연결을 이어가 보겠습니다.

 

참고 사이트

rnfirebase.io/

firebase.google.com/