React-Native-Cli Firebase 연동

1. 템플릿 설치

아래의 명령어를 사용 하여 Firebase용 템플릿을 만들어 줍니다.

1 npx react-native init --template @react-native-firebase/template MyAwesomeApp

2. npm & yarn 설치

1 2 3 4 5 # Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-firebase/app

3. Firebase 콘솔 설정

3.1 Android 설정

3.1.1 firebase 프로젝트를 추가

아래의 firebase 홈페이지에 접속 하여 시작하기를 누르고 프로젝트를 추가 합니다.

• firebase 홈페이지 => https://firebase.google.com/

해당 프로젝트를 만들고 난뒤 아래의 그림 처럼 android 아이콘을 클릭 해줍니다!

android 아이콘을 클릭해서 들어 오면 앱을 등록 하는 페이지가 나오는데 앱등록에서 Android 패키지 이름을 작성 하는 란이 나오게 됩니다.

Android 패키지 이름은 android → app → src → main → AndroidManifest.xml 을 확인 하시면 아래의 그림과 같이 나오게 됩니다.

그중 package="com.testdata"이 패키지 이름 입니다.

그렇게 패키지 이름을 넣어 주시고 앱등록을 클릭 해줍니다.

아래의 그림과 같은 창으로 넘어가게 되면 구성 파일을 다운로드 받아 줍니다.

다운로드 받은 파일을 android → app에 넣어 줍니다!

넣어 주신 뒤 몇가지 작업을 더 해주셔야 됩니다.

3.1.2 코드 추가

위치는 android에 위치 하고 있는 build.gradle에서 코드를 추가 해줍니다.

buildscript { dependencies { // ... other dependencies classpath 'com.google.gms:google-services:4.2.0' } }

다음은 android → app → build.gradle 위치에서 맨 하단에 추가를 해줍니다.

1 apply plugin: 'com.google.gms.google-services'

아래의 명령어를 입력하여 빌드 하여 줍니다.

1 npx react-native run-android

3.1.3 빌드 후 에러

빌드 후 아래와 같은 에러가 나는 경우가 있습니다.

1 Execution failed for task ':app:mergeDexDebug' error.

그럴 땐 android → app → build.gradle 에서 아래의 코드를 추가 해줍니다!

1 2 3 4 5 6 7 8 9 10 11 android { defaultConfig { // ... multiDexEnabled true } // ... } dependencies { implementation 'com.android.support:multidex:1.0.3' }

그리고 다시 빌드 해주시면 됩니다!

3.2 ios 설정

3.2.1 firebase console 설정

+ 앱 추가 버튼을 클릭 합니다.

다음 아래의 그림과 같이 아이콘들이 나오게 되면 ios를 클릭 해줍니다

ios 아이콘을 클릭 하면 아래와 같은 화면이 나오게 됩니다.

아래의 창에서 ios 번들 ID를 추가 해줘야 하는데 ios 번들 ID는 xcode에서 확인이 간단 합니다.

xcode를 실행을 하고 만들어 났던 프로젝트에 ios파일을 넣어서 클릭 을 하면 아래와 같은 화면이 나오게 될 것이고

Bundle Identifler 가 ios 번들 ID 입니다.

번들 아이디를 복사 하여 추가 해주시면 됩니다.

그 다음 다음 버튼을 클릭 해주시면 아래와 같은 페이지가 나오게 됩니다.

android했을 때 처럼 파일을 다운로드 받아 주시고

xcode에서 해당 위치에 넣어 줍니다.

3.2.2 Xcode 설정

넣어준 후 xcode에서 ios → projecyName → AppDelegate.m 에 들어 갑니다.

1 #import <Firebase.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

if ([FIRApp defaultApp] == nil) { [FIRApp configure]; }

를 각 각 추가 해줍니다.

3.2.3 빌드

1 2 3 4 5 6 7 # Android apps npx react-native run-android # iOS apps cd ios/ pod install --repo-update npx react-native run-ios

각각 빌후 후 실행 시켜 줍니다.!