ReactNative + Firebase Setup (android/ios)
준비사항
-
react native 프로젝트 생성
저는 push-notification-demo라는 react-native 프로젝트를 생성해주었습니다. -
firebase console 프로젝트 생성
Android Setup
기본 요건
- Android 스튜디오를 설치하거나 최신 버전으로 업데이트 합니다.
- 프로젝트가 다음 요구사항을 충족하는지 확인합니다.
- API 수준 16(Jelly Bean) 이상 타겟팅
- Gradle 4.1 이상 사용
- Jetpack(AndroidX) 사용
- com.android.tools.build:gradle v3.2.1 이상
- compileSdkVersion 28
- 실제 기기를 설정하거나 에뮬레이터를 사용하여 앱을 실행합니다.
- Google Play 서비스에 대한 종속 항목이 있는 Firebase SDK를 사용하려면 기기 또는 에뮬레이터에 Google Play 서비스가 설치되어있어야 합니다.
- Google 계정을 사용하여 Firebase에 로그인합니다.
firebase console 앱등록
- firebase console 에 들어가서 안드로이드 모양 클릭!
- 앱등록
- Android 패키지 이름
/android/app/src/main/AndroidManifest.xml 요기 들어가보면 나옵니당
- 앱닉네임(선택사항)
- 디버그 서명 인증서 SHA-1(선택사항)
필수사항이 아니지만 동적 링크, Google 로그인, 전화번호를 지원하는데 필요합니다. 필수사항이 아니니 패스하도록 하겠습니다.
-
구성 파일 다운로드
패키지이름, 앱닉네임, 서명인증서 등록하고 나서 앱등록 버튼을 누르면 구성 파일 다운로드할 수 있도록 버튼이 나타납니다.
다운받은 후 /android/app/google-services.json 다음 경로에 넣어주세요.
4.Firebase SDK 추가
친절하게 설명이 나와있습니다.추가하라고 나와있는걸 열심히 추가했습니다.
google-services 플러그인을 /android/build.gradle 파일 내부에 종속성으로 추가해 주었습니다.
/android/app/build.gradle 파일에 다음과 같이 추가하여 플러그인을 실행합니다.
Ios Setup
기본 요건
-
다음을 설치
- Xcode 12.2 이상
- CocoaPods 1.10.0 이상
-
프로젝트가 다음 요구사항을 충족하는지 확인
- 프로젝트에서 ios 10 이상을 타겟팅 해야합니다.
-
실제 ios 기기를 설정하거나 ios 시뮬레이터를 사용하여 앱을 실행합니다.
-
클라우드 메시징(푸쉬알림) 을 사용하기위해서 추가적인 세팅이 필요합니다.❗️❗️
- 실제 ios 기기를 설정합니다. (시뮬레이터에서는 안됨)
- Apple 개발자 계정의 Apple 푸시 알림 인증 키를 가져 옵니다.
- Xcode의 App(앱) > Capabilities(기능)에서 푸시 알림을 사용 설정합니다.
-
Google 계정을 사용하여 Firebase에 로그인
앱등록
-
firebase console 에 들어가서 ios 모양 클릭!
-
앱등록
-
ios 번들 ID (xCode를 켜보면 Bundle Identifier 가 있습니다. 정확히 입력해주세요~)
-
앱 닉네임(선택사항)
-
App Store ID(선택사항)
테스트용 프로젝트라 Store ID가 없습니다. 따라서 패스 있다면 넣어주세요!
- 구성파일 다운로드
-
필수 입력사항을 입력하고 앱등록 버튼을 누르면 구성 파일을 다운로드 할 수 있도록 버튼이 나타납니다. GoogleService-Info.plist 다운받아주세요
-
xCode에서 아래와 같이 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 프로젝트에 파일추가를 클릭
-
Copy items if needed 체크 되어있는것 확인하고 Add 클릭
-
Firebase SDK 추가
-
초기화 코드 추가
앱을 시작할 때 Firebase에 연결하려면 기본 AppDelegate 클래스에 아래의 초기화 코드를 추가해주세요!
아래와 같이 추가해 줬습니다. 두줄입니다.
import <Firebase.h>
[FIRApp configure];
Ios additional set up for Cloud Messaging
아래 사이트 참고하셔서 추가 세팅 해 주시면 됩니다.
https://rnfirebase.io/messaging/usage/ios-setup
세팅 끝
👏👏👏 react native + firebase ios/android 초기 세팅이 끝났습니다! 이제 본격적으로 react-native-firebase 라이브러리를 사용해 보겠습니다.
