React native - 파이어베이스(FireBase) Ios, Android 세팅하기

파이어베이스 환경 세팅하기

파이어베이스를 react native 프로젝트에서 세팅하기 위해서는 ios 별 android별 환경 세팅을 각각 해줘야합니다.

일단 파이어베이스 홈페이지에 들어가서 공통적으로 프로젝트 생성을 해야합니다.

 

Firebase

구글 로그인 후 프로젝트 생성을 클릭하여 시작을 한다. 프로젝트 이름, 요금 등등을 선택하며 생성할 수 있습니다.

{
  "react-native": {
    "messaging_android_notification_channel_id": "high-priority"
  }
}

위의 코드를 react native 루트 프로젝트 디렉토리에 firebase.json 파일로 저장합니다.

 

 

파이어베이스 페이지에서 android 혹은 ios 아이콘를 눌러 원하는 os 버전을 선택합니다.

 

 

 

 

1. Android 세팅하기

 

프로젝트 이름, 프로젝트 닉네임 등을 설정하고 등록을 합니다.

다음으로 구글 서비스.json 파일을 다운받고 react native 프로젝트의 android/app 디렉토리에 삽입합니다.

 

 

 

 

 

Firebase SDK 추가를 위하여 android 폴터안에 있는 build.gradle 파일에 아래와 같이 코드를 세팅해줍니다.

..........

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        ndkVersion = "20.1.5948944"
    }

.........

buildscript {
  repositories {
   // 1번 세팅
    google()

  }
  dependencies {
    ..
     // 2번 세팅
    classpath 'com.google.gms:google-services:4.3.10'

  }
}

allprojects {
  ...
  repositories {
    // 3번 세팅
    google()

    ...
  }
}

 

 

 

android/app 디렉토리 폴더 안에 있는 build.gradle 파일에 아래와 같이 코드를 세팅해줍니다.

dependencies {

  // Add the SDKfor Firebase Cloud Messaging
    implementation 'com.google.firebase:firebase-messaging:20.2.3' //추가(푸시 메시지를 위한)

  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:28.4.2') //추가

  // Add the dependencyfor the Firebase SDKfor Google Analytics
  // When using the BoM, don't specify versions in Firebase dependencies
  implementation 'com.google.firebase:firebase-analytics' // GA 필요시 추가

  // Add the dependencies for any other desired Firebase products
  // <https://firebase.google.com/docs/android/setup#available-libraries>
}

apply plugin: 'com.android.application' //추가
apply plugin: 'com.google.gms.google-services' //추가

 

여기까지 세팅을 마쳤으면 다시 재빌드 하여 빌드 오류가 없는지 확인합니다.

 

 

 

 

 

2. IOS 세팅하기

ios에서 번들 ID는 반드시 제 프로젝트의 bundle ID 와 같아야 한다고 하니 주의해야 합니다.

bundle ID는 Xcode 에서 내 프로젝트를 켜고, General 탭에 들어가면 보이는 Bundle Identifier 입니다.

 

 

 

 

 

android와 마찬가지로 ios에서도 ios/{프로젝트 name} 디렉토리에 구글서비스.plist 파일을 삽입합니다.

 

 

 

 

 

그리고 Firebase SDK추가에서 react native firebase 패키지를 설치하면 자동으로 sdk가 설치되니 3번의 Podfile 파일의 Firebase SDK 세팅은 넘어가도 무방합니다.

 

아래의 패키지를 설치하면 됩니다.

"@react-native-firebase/app": "^12.7.3",

"@react-native-firebase/messaging": "^12.7.3",

 

 

 

 

이제 마지막으로 ios의 sdk관련하여 추가해줘야할 마지막 코드 세팅이 있습니다.

/ios/{projectName}/AppDelegate.m 의 디렉토리를 통해 AppDelegate.m에서 코드 세팅을 진행합니다.

#import <Firebase.h>

#import <Firebase.h>를 #ifdef FB_SONARKIT_ENABLED위에 위치하도록 import 해줍니다. 여기서 임포트 위치가 #ifdef FB_SONARKIT_ENABLED 아래에 있다면 빌드 오류가 발생할 수 있으니 주의 해야합니다.

 

 

 

 

 

그리고 didFinishLaunchingWithOptions 메서드 안쪽에 다음 내용을 추가해줍니다.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add me --- \\/
if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // Add me --- /\\
  // ...
}

위의 과정이 모두 끝났으며 pod install 후 재빌드를 통해 빌드 오류가 없는지 확인합니다.

 

 

 

 

※ ios는 위의 세팅 후 APN 인증키 관련된 추가 설정 또한 해줘야합니다.

인증 키 관련 정보는 아래의 포스팅 글을 참고해주세요

https://velog.io/@mayinjanuary/React-Native-Firebase-로-푸쉬-알림-구현하기-2-IOS-앱-세팅하기