react-native-firebase V6 Crashlytics

2020-06-10 hit count image

react-native-firebase(V6)을 사용하여 Firebase의 Crashlytics를 사용하는 방법에 대해서 알아봅시다.

개요

React Native 프로젝트에서 FirebaseCrashlytics를 사용하기 위해 react-native-firebase를 사용하는 방법에 대해서 알아보려고 합니다.

이 블로그는 시리즈로 제작되어있습니다. 다른 내용을 확인하고 싶으신 분들은 아래에 블로그 리스트를 참고하시기 바랍니다.

react-native-firebase의 이전 버전(V5)을 사용하는 방법에 대해서는 아래에 블로그 리스트를 참고하시기 바랍니다.

react-natiev-firebase 설치 및 준비

아래에 블로그를 참고하여 react-native-firebase를 설치하고, Firebase 프로젝트를 생성합니다.

라이브러리 설치

아래에 명령어를 사용하여 react-native-firebaseCrashlytics를 설치합니다.

npm install --save @react-native-firebase/crashlytics

아래에 명령어를 사용하여 iOS 프로젝트에 react-native-firebase의 Crashlytics를 연결합니다.

cd ios
pod install

Firebase 프로젝트 설정

다음은 구글의 파이어베이스(Google Firebase)에서 프로젝트에 Crashlytics를 설정할 필요가 있습니다. Firebase의 Console로 이동한 후, 왼쪽 메뉴에서 Crashlytics를 선택합니다.

crashlytics add sdk

상단에 있는 Add SDK 버튼을 눌러서 SDK를 추가합니다. 또한 상단에 Crashlytics 타이틀 옆에 있는 프로젝트를 선택하여 iOS/안드로이드로 변경 한 후, Add SDK를 눌러 iOS, 안드로이드 모두 SDK를 추가해 줍니다.

iOS 설정

react-native-firebase의 Crashlytics를 사용하기 위해 iOS를 설정하는 방법에 대해서 알아봅시다.

Build Phase 추가

iOS에서 Crashlytics를 사용하기 위해서는 Build Phase를 설정할 필요가 있습니다. ios/[project name].xcworkspace을 선택하여 Xcode를 실행시킵니다.

crashlytics build phase

Xcode가 실행되면 왼쪽의 프로젝트를 선택하고 오른쪽 상단의 Build Phases 탭을 선택합니다. Build Phase를 추가하기 위해, 왼쪽 상단의 + 버튼을 선택하고, New Run Script Phase 메뉴를 선택합니다.

crashlytics add script

New Run Script Phase 메뉴로 추가한 Run Script를 열고 아래에 내용을 그대로 복사-붙여넣기 합니다.

"${PODS_ROOT}/Fabric/run"

iOS 프로젝트 실행

위와 같이 모든 설정이 끝났다면, 아래에 명령어를 통해 iOS 프로젝트를 실행합니다.

npm run ios

안드로이드 설정

react-native-firebase의 Crashlytics를 사용하기 위해 안드로이드를 설정하는 방법에 대해서 알아봅시다.

Fabric 설정

안드로이드에서 Crashlytics를 사용하기 위해서는 Fabric을 설정할 필요가 있습니다. android/build.gradle 파일을 열고 아래와 같이 수정합니다.

...
buildscript {
  ...
  repositories {
    ...
    maven {
      url 'https://maven.fabric.io/public'
    }
  }
  dependencies {
    ...
    classpath 'io.fabric.tools:gradle:1.28.1'
  }
  ...
}
...

그리고 android/app/build.gradle 파일을 열고 아래와 같이 수정합니다.

apply plugin: "com.android.application"
apply plugin: 'io.fabric'
...
applicationVariants.all { variant ->
    ...
}
crashlytics {
    enableNdk true
}

안드로이드 프로젝트 실행

위와 같이 설정하였다면 아래에 명령어를 사용하여 안드로이드 프로젝트를 실행합니다.

npm run android

완료

이것으로 Firebase의 Crashlytics를 사용하기 위해, react-native-firebase 라이브러리를 사용하는 방법에 대해서 알아보았습니다.

crashlytics integration

react-native-firebase로 Crashlytics를 잘 설정하고, React Native 프로젝트를 잘 실행하였다면, 위와 같은 화면을 확인할 수 있습니다.

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native React Native로 실전 스마트폰 앱 만들기
Posts