[Firebase] Firebase 란? / 사용법 ( React Native )

👉 Firebase 란?

앱에서 사용할 데이터를 온라인에 저장하고, 가져올 수 있도록 해주는 도구 ( feat. 구글 )

 

기능

회원인증, 데이터 읽기 쓰기, 이미지 업로드 등등..

 

가입

Firebase

 

👉 사용법

 

콘솔로 이동

프로젝트 만들기

애널리틱스 사용할지 선택하기

'앱에 Firebase를 추가하여 시작하기'

 

android ( React Native 0.69 기준 )

 

- 프로젝트 / android / app / build.gradle 열기

- applicationId 찾아서 복사

- 프로젝트 경로에서 명령어 실행해서, SHA-1 서명인증서 얻기 ( 기본 비밀번호 : android, 그냥 엔터치면 넘어가짐 )

keytool -J-Duser.language=en -list -v -alias androiddebugkey -keystore ./android/app/debug.keystore

- SHA-1 등록

- 앱 등록

- google-services.json 다운, android / app 경로에 저장

 

 

- android / build.gradle 파일에 설정 추가

* 아래에 사용하는 설정은, Firebase와 gradle이 업데이트시 마다 변경되므로,

참고만하고, Firebase 공식페이지에서 안내하는 설정을 이용하셔야 합니다.

* 설정 변경은 VSCode를 사용하며, 변경후 Sync 버튼을 눌러주셔야 합니다.

 

dependencies {
    ...
    // Google services Gradle plugin 추가
    classpath 'com.google.gms:google-services:4.3.13'

  }

- android / app / build.gradle 파일 최상단 설정 추가

// 기존 최상단 요소
apply plugin: "com.android.application"
// 구글 서비스 적용
apply plugin: "com.google.gms:google-services:4.3.13"

- android / app / build.gradle 파일 설정 추가

// Firebase 플랫폼 추가
implementation platform('com.google.firebase:firebase-bom:30.3.2')

// 구글 애널리틱스 선택했을때만 추가
implementation 'com.google.firebase:firebase-analytics'


...
// 기본 설정 추가
defaultConfig {
        applicationId "com.nogallery0"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
        // 추가한 내용
        multiDexEnabled true
        ...
}

- android 빌드

// 프로젝트 경로

$ npx react-native run:android

 

 

ios ( React Native 0.69 기준 )

- xcode로 프로젝트 열기 ( 프로젝트 / ios / 프로젝트이름.xcworkspace )

- 프로젝트 / 프로젝트이름 선택 => General => TARGETS 에서 프로젝트이름 선택 => Identifier 의 Bundle Identifier 확인

- Bundle Identifier 변경하기 ( com.닉네임.프로젝트이름 )

- Firebase에 Bundle Identifier 입력하기

- 프로젝트 이름 입력하기

- 앱등록하기

- 3, 4 단계 건너뛰기 ( React Native에서 처리 )

- ios / 프로젝트 / AppDelegate.h 파일 설정 추가

// 최상단
#import <Firebase.h>

- ios / 프로젝트 / AppDelegate.mm 파일 설정 추가

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

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

#if RCT_NEW_ARCH_ENABLED
  ...
#endif

  /// Firebase 설정
  if([FIRApp defaultApp] == nil){
    [FIRApp configure];
  }

- ios / Podfile에 Firebase 추가

...

target 'PublicGalleryNoway' do
  use_frameworks!
  use_expo_modules!
  config = use_native_modules!

  ## Pod 설치
  pod 'FirebaseCore'
  pod 'FirebaseAuth'
  pod 'FirebaseFirestore'
  pod 'FirebaseStorage'
  
...

-ios / Podfile에 static 관련 프레임워크 설정

에러 - [!] The following Swift pods cannot yet be integrated as static libraries:

내용 : Swift Pod을 static 라이브러리로 통합할수 없다.

ios / Podfile 을 수정

// static 라이브러리 통합 프레임워크 사용
use_frameworks! :linkage => :static

 

React Native Firebase 라이브러리 설치

yarn add @react-native-firebase/app @react-native-firebase/auth @react-native-firebas
e/firestore @react-native-firebase/storage

app : 기본 (필수)
auth : 인증
firestore : 저장소 (DB)
storage : 이미지 업로드

 

Pod 설치 및 ios 빌드

// 프로젝트 경로
$ cd ios

$ pod install --repo-update

$ cd ..

$ npx react-native run:ios