[RN] Firebase 설치 및 세팅

류연찬·2024년 2월 28일

React Native

목록 보기
2/2

React Native Firebase 문서

Firebase 프로젝트 생성

Firebase console에 접속하여 프로젝트 하나를 생성합니다.

프로젝트명을 입력한 후, 계속을 눌러줍니다.

Google Analytics를 사용하신다면 체크를 해주시고 계속을 눌러줍니다.(선택사항)

Google Analytics를 선택하셨다면 기본 계정을 선택해주고 프로젝트 만들기를 눌러주며 프로젝트를 생성합니다.



플랫폼 추가하기

각 플랫폼마다 앱을 추가해보도록 하겠습니다.

우선 해당 Firebase 프로젝트 설정으로 이동합니다.

iOS

내 앱에서 iOS를 눌러줍니다.

Apple 번들 ID를 입력해주고 앱 등록를 눌러줍니다.

Apple 번들 ID는 어디서 확인하나요❓
Xcode -> 프로젝트 -> General -> Bundle Identifier

GoogleService-Info.plist 파일을 다운받고 다음을 눌러줍니다.

남은 모든 과정에서는 다음을 눌러주고 마지막에 콘솔로 이동을 눌러 과정을 완료해줍니다.

AOS

안드로이드도 마찬가지로 프로젝트 설정에서 앱 추가를 눌러주고 안드로이드 아이콘을 눌러줍니다.

Android 패키지 이름에 안드로이드 패키지명을 입력해주고 앱 등록을 눌러줍니다.

Android 패키지 이름은 어디서 확인하나요❓
프로젝트에서 app 폴더안의 build.gradle 파일을 확인하면 applicationId 에 패키지명이 있습니다.

google-services.json 파일을 다운받고 다음을 눌러줍니다.

남은 모든 과정에서는 다음을 눌러주고 마지막에 콘솔로 이동을 눌러 과정을 완료해줍니다.



Firebase 설치

이제 본격적으로 react native 프로젝트에 라이브러리를 설치하여 각 플랫폼에 맞게 설정해주도록 하겠습니다.

우선 프로젝트에 아래의 코드를 입력하여 라이브러리를 설치해줍니다.

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

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

iOS 설정

Xcode를 열어서 프로젝트 폴더 안에 아까 다운받은 GoogleService-Info.plist 파일을 넣어줍니다.

아래와 같이 체크가 되어있는지 확인 후 Finish를 눌러줍니다.

그러면 아래와 같이 파일이 정상적으로 들어가있는것을 확인할 수 있습니다.

파일이 정상적으로 들어갔다면 AppDelegate.mm 파일을 열어주고 코드를 입력합니다.

import중에서 제일 밑에 #import <Firebase.h> 를 삽입해줍니다.

그리고 didFinishLaunchingWithOptions 메소드 최상단에 [FIRApp configure]; 를 삽입해줍니다.

그러면 아래와 같은 코드가 됩니다.

frameworks를 사용하기 위해서는 cocoapods에 입력해주어야 합니다.

Podfile 파일을 열어 프로젝트 target안에서 config 밑에 코드를 입력해줍니다.

use_frameworks! :linkage => :static

그리고 바로 밑에 코드를 추가해줍니다.

$RNFirebaseAsStaticFramework = true

또한 frameworks를 사용하면 flipper를 사용하지 못하므로 flipper_configuration 라인을 주석 처리해줍니다.

그러면 아래와 같은 코드가 됩니다.

마지막으로 react native 프로젝트의 ios 폴더안에서 pod install 을 통해서 설치를 해줍니다.

그러면 아래와 같이 정상적으로 설치가 되면서 flipper는 제거된 것을 확인할 수 있습니다.

AOS 설정

우선 다운받은 google-services.json 파일을 안드로이드 app 폴더 안에 넣어줍니다.

/android/build.gradle 파일에 코드를 추가해줍니다.

classpath 'com.google.gms:google-services:4.4.1'

마지막으로 /android/app/build.gradle 최상단에 코드를 추가해줍니다.

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

0개의 댓글