[RN] React Native Firebase Analytics + Crashlytics 이해 및 설정 방법 : iOS

해당 글에서는 React Native에서 iOS 개발환경에서 Firebase Analytics와 Crashlytics를 이해하고 설정하는 방법에 대해 확인합니다.

 

💡 React Native 환경에서 Firebase 설정에 관련된 링크들입니다.

분류	플랫폼	링크
Firebase Analytics + Crashlytics 이해 및 설정 방법	Android	https://adjh54.tistory.com/254
Firebase Analytics + Crashlytics 이해 및 설정 방법	iOS	https://adjh54.tistory.com/530
firebase 개발/운영 분리(Android) google-services.json	Android	https://adjh54.tistory.com/297
firebase 개발/운영 분리(iOS) : GoogleService-Info.plist	iOS	https://adjh54.tistory.com/531
Firebase Cloud Message(FCM) 이해 및 환경설정, 간단 테스트	Android	https://adjh54.tistory.com/431

 
 
 

1) React Native Firebase

---

💡 React Native Firebase

- React Native 애플리케이션에서 Firebase 서비스를 사용할 수 있게 해주는 라이브러리입니다.

 
 

1. React Native Firebase 특징

---

장점	설명
크로스 플랫폼 개발	React Native Firebase는 iOS 및 Android 플랫폼 모두에서 작동하므로 개발자는 단일 코드베이스로 앱을 개발할 수 있습니다.
실시간 데이터 동기화	Firebase의 실시간 데이터베이스를 사용하면 앱에서 실시간으로 데이터를 동기화 할 수 있습니다.
인증 및 사용자 관리	Firebase Authentication을 사용하여 앱에서 사용자 인증 및 관리를 간편하게 처리할 수 있습니다.
푸시 알림 및 메시징	Firebase Cloud Messaging을 통해 푸시 알림 및 메시지를 전송하고 관리할 수 있습니다.
애널리틱스 및 성능 모니터링	Firebase의 애널리틱스 및 성능 모니터링 도구를 사용하여 앱의 사용 통계 및 성능을 추적할 수 있습니다.
클라우드 기능	Firebase의 클라우드 기능을 사용하여 앱에서 백엔드 기능을 실행하고 관리할 수 있습니다.

 
 

2) Google Firebase Analytics 웹 페이지 설정 방법

---

 💡 Google Firebase Analytics 웹 페이지 설정 방법

- Google Firebase에 가입이 되어있다는 가정하에 Google Firebase Analytics를 설정하는 방법에 대해 확인해 봅니다.

 

1. firebase에 접속을 합니다.

---

Firebase | Google's Mobile and Web App Development Platform

 
 
 

2. firebase console로 접근하면 기존에 android로 구성한 프로젝트를 선택합니다.

---

 
 

3. ‘앱 추가’ 버튼을 누릅니다.

---

 
 

4. iOS 버튼을 누릅니다.

---

 
 
 

5. Apple 앱에 Firebase 추가하고 ‘앱 등록’ 버튼을 누릅니다.

---

💡 Apple 앱에 Firebase 추가하고 ‘앱 등록’ 버튼을 누릅니다.

- 항목 중에서 Apple 번들 ID의 경우 ID Xcode - TARGETS - 앱 선택 - Signing & Capablities 탭 선택 - Bundle Identifier 내의 항목을 복사합니다.

 
 
 

6. 구성 파일을 미리 다운로드하고 ‘다음’ 버튼을 누릅니다.

---

 
 
 

7. 우선 다음 버튼을 눌러줍니다.

---

 
 
 

8. 해당 정보에 대해서 AppDelegate.mm 파일 내에 추가합니다.

---

 
 

💡 [참고] AppDelegate.mm 파일 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // [추가] Firebase 설정
  [FIRApp configure];
  self.moduleName = @"프로젝트이름";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

 
 

9. ‘콘솔로 이동’ 버튼을 누릅니다.

---

 
 

10. ios가 추가됨을 확인하였습니다.

---

 
 

3) React Native Google Analytics 소스코드 내 설정

---

 💡 Google Analytics

- 웹 사이트 또는 앱의 트래픽 및 사용자 동작을 추적하고 분석하는 도구입니다. 이를 통해 웹사이트 또는 앱의 성과를 측정하고 개선할 수 있습니다.
- Google Analytics를 사용하면 사용자의 방문 정보, 페이지 조회 수, 이벤트 추적 등 다양한 데이터를 수집하고 분석할 수 있습니다. 이를 통해 사용자 행동 패턴을 파악하고 마케팅 전략을 최적화할 수 있습니다.

 

1. 라이브러리 추가

---

# Install & setup the app module
$ yarn add @react-native-firebase/app

# Install the analytics module
$ yarn add @react-native-firebase/analytics

# If you're developing your app using iOS, run this command
cd ios/ && pod install

 

💡 [참고] 공식 사이트 설치 과정

Analytics | React Native Firebase

 

2. Podfile 내 변수 추가

---

💡 Podfile 내 변수 추가

1. $RNFirebaseAnalyticsWithoutAdIdSupport = true
- 이 설정은 Google Analytics를 광고 식별자(Ad ID) 없이 사용할 수 있도록 합니다. 이는 개인 정보 보호를 강화하고 광고 ID를 사용하지 않으려는 경우에 유용합니다.

2. $RNFirebaseAnalyticsEnableAdSupport = true
- 이 설정은 Google Analytics에서 광고 지원을 활성화합니다. 광고 식별자를 사용하여 광고와 관련된 데이터를 수집하고 분석할 수 있게 됩니다. 이는 마케팅 전략을 최적화하는 데 도움이 됩니다.

# firebase analytics Option : 어린이 카테고리 앱에서 광고 ID("IDFA") 사용을 엄격히 금지
$RNFirebaseAnalyticsWithoutAdIdSupport = true

# firebase analytics Option : Google Analytics에서 광고 지원을 활성화합니다. 광고 식별자를 사용하여 광고와 관련된 데이터를 수집하고 분석할 수 있게 됩니다. 이는 마케팅 전략을 최적화하는 데 도움이 됩니다.
$RNFirebaseAnalyticsEnableAdSupport = true

 
 
 

3. [Xcode] Xcode를 실행하고 프로젝트를 선택하고 Add Files to “프로젝트명”을 선택합니다.

---

💡 Xcode를 실행하고 프로젝트를 선택하고 Add Files to “프로젝트명”을 선택합니다.

 
 

4. [Finder] 이전에 다운로드 받은 GoogleService-Info.plist를 추가합니다.

---

 
 

💡 주의사항 💡 

- 해당 GoogleService-Info.plist 파일은 다른 디렉터리 내에서 참조하는것이 아닌 프로젝트 내에 파일을 복사해두고 불러와야합니다. 이유는 해당 파일을 삭제하게 된다면 프로젝트에서 해당 파일을 불러올 수 없기 때문입니다!
- 꼭 프로젝트 안에 파일을 넣은 후에 불러오기를 해야합니다

 
 
 
 

5. [Xcode] 아래와 같이 추가가 됨을 확인하였습니다.

---

 
 
 

6. [Firebase Console] Analytics Dashboard 탭을 이동하면 출력이 됨을 확인하였습니다.

---

 
 

 
 

4) Google Firebase Crashlytics 설치

---

💡 Firebase Crashlytics

- 사용자의 장치 및 앱 환경과 관련된 디버그 정보를 수집하고 보고서를 생성합니다. 이를 통해 개발자는 앱의 문제를 신속하게 파악하고 수정할 수 있습니다. Crashlytics는 앱의 안정성과 품질을 향상하는 데 도움을 줄 수 있습니다.
- Firebase와의 통합을 통해 앱의 분석과 성능 모니터링을 한 곳에서 관리할 수 있습니다.

 

1. 라이브러리 설치

---

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the Crashlytics module
yarn add @react-native-firebase/crashlytics

# If you're developing your app using iOS, run this command
cd ios/ && pod install

 

💡 [참고] 설치과정

Crashlytics - Android Setup | React Native Firebase

 

2. firebase.json

---

💡 firebase.json

- 파일을 생성하여 프로젝트 하위에 추가하여 아래를 입력하여 구성합니다.

{
    "react-native": {
        "crashlytics_debug_enabled": true
    }
}

 
 
 

3. 아래의 소스코드를 넣고 강제로 crash 로그를 발생시켜 확인합니다.

---

 

import crashlytics from '@react-native-firebase/crashlytics';
const App = () => {
	useEffect(() => {
		crashlytics().crash();
	}, []);
	return <></>;
};
export default App;

 

💡 Xcode 내에서 아래와 같이 강제 Crash 로그를 감지하였습니다.
- 테스트를 위한 것이니 Command + . 을 통해서 종료해 줍니다.

 
 
 

4. 아래와 같이 Crashlytics - WARNING: Debugger detected. Crashlytics will not receive crash reports. 오류가 발생했습니다.

---

 
 

5. [Firebase Console] 강제로 발생시킨 오류가 잘 출력됨을 확인하였습니다.

---

 
 
 
 
 
오늘도 감사합니다. 😀