React & React Native/환경 설정 및 구성

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

adjh54 2024. 7. 17. 20:55
반응형
해당 글에서는 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

개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.

firebase.google.com

 
 
 

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

Copyright © 2017-2020 Invertase Limited. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. Some partial documentation, under the

rnfirebase.io

 

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

Copyright © 2017-2020 Invertase Limited. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. Some partial documentation, under the

rnfirebase.io

 

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] 강제로 발생시킨 오류가 잘 출력됨을 확인하였습니다.


 
 
 
 
 
오늘도 감사합니다. 😀
 
 
 

반응형