React Native 시작

  • 아티클

중요

Visual Studio App Center는 2025년 3월 31일에 사용 중지될 예정입니다. Visual Studio App Center가 완전히 사용 중지될 때까지 계속 사용할 수 있지만 마이그레이션을 고려할 수 있는 몇 가지 권장 대안이 있습니다.

지원 타임라인 및 대안에 대해 자세히 알아봅니다.

App Center SDK는 모든 서비스를 사용할 수 있도록 모듈식 아키텍처를 사용합니다.

App Center 분석 및 App Center 크래시를 사용하도록 앱에서 App Center React Native SDK 설정부터 시작해 보겠습니다.

1. 사전 요구 사항

시작하기 전에 다음 필수 조건을 충족시키는지 확인합니다.

  • React Native 0.34 이상을 실행하는 React Native 프로젝트를 사용하고 있습니다.
  • Android 버전 5.0/API 수준 21 이상 또는 iOS 버전 9.0 이상에서 실행되는 디바이스를 대상으로 합니다.
  • iOS에서 크래시 보고 기능을 제공하는 다른 라이브러리는 사용하지 않습니다.
  • iOS의 경우 SDK를 사용하는 기본 방법에는 CocoaPods가 필요합니다. CocoaPods를 설치하지 않은 경우 CocoaPods 시작 따라 설치합니다. 그럼에도 불구하고 SDK를 수동으로 연결할 수 있습니다.

2. App Center 포털에서 앱을 만들어 앱 비밀을 가져옵니다.

App Center 포털에서 앱을 이미 만든 경우 이 단계를 건너뛸 수 있습니다.

  1. appcenter.ms.
  2. 등록하거나 로그인하고 포털의 오른쪽 위 모서리에 있는 파란색 단추를 누르면 새로 추가 라는 내용이 표시되고 드롭다운 메뉴에서 새 앱 추가 를 선택합니다.
  3. 앱의 이름 및 선택적 설명을 입력합니다.
  4. 적절한 OS(Android 또는 iOS)를 선택하고 플랫폼으로 React Native 선택합니다.
  5. 오른쪽 아래에 새 앱 추가라는 단추를 누릅니다.

앱을 만든 후에는 App Center 포털의 설정 페이지에서 앱 비밀을 가져올 수 있습니다. 설정 페이지의 오른쪽 위 모서리에서 세로 세로 점을 클릭하고 을 선택하여 Copy app secret 앱 비밀을 가져옵니다.

3. App Center SDK 모듈 추가

SDK의 기본 통합은 iOS용 CocoaPods를 사용합니다. 앱에서 CocoaPods를 사용하지 않는 경우 iOS 앱에 React Native SDK를 수동으로 통합해야 합니다.

터미널을 열고 React Native 프로젝트의 루트로 이동한 다음, 다음 줄을 입력하여 App Center Analytics 및 크래시를 앱에 추가합니다.

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

보다 npm선호하는 yarn 경우 다음 명령을 사용하여 App Center를 설치합니다.

yarn add appcenter appcenter-analytics appcenter-crashes --exact

App Center SDK는 사용하려는 App Center 서비스에 대한 모듈을 추가하는 모듈식 접근 방식을 사용합니다. appcenter-analytics 및 appcenter-crashes는 추가 설정 없이 값을 제공하므로 거의 모든 앱에 추가하는 것이 좋습니다. appcenter 는 여러 서비스에 유용한 범용 App Center API를 제공합니다.

3.1 React Native 0.60에 대해 SDK를 자동으로 통합

React Native App Center SDK를 사용하는 두 가지 방법으로 AppCenter-Config.plist 수행할 수 있습니다. iOS용 구성 및 Android용 appcenter-config.json 또는 appSecret을 인수로 수락하는 네이티브 시작 함수를 호출합니다.

3.1.1 React Native iOS 통합

iOS 디렉터리에서 를 실행 pod install --repo-update 하여 CocoaPods 종속성을 설치합니다.

3.1.1.1 AppSecret 옵션 설정 1: 구성 AppCenter-Config.plist

  1. 다음 콘텐츠를 사용하여 이름을 AppCenter-Config.plist 사용하여 새 파일을 만들고 를 앱 비밀 값으로 바꿉 {APP_SECRET_VALUE} 니다. Xcode 프로젝트에 이 파일을 추가하는 것을 잊지 마세요(Xcode에서 앱을 마우스 오른쪽 단추로 클릭하고 AppName>에 <파일 추가...를 클릭합니다.).

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

  2. SDK를 시작하기 위한 코드를 포함하도록 앱의 AppDelegate.m 또는 AppDelegate.mm 파일을 수정합니다.

    • 다음 가져오기를 추가합니다.
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • 메서드에 application:didFinishLaunchingWithOptions: 다음 줄을 추가합니다.
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 AppSecret 옵션 설정 2: 코드에서 구성

SDK를 시작하기 위한 코드를 포함하도록 앱의 AppDelegate.m 또는 AppDelegate.mm 파일을 수정합니다.

  • 다음 가져오기를 추가합니다.
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • 메서드에 application:didFinishLaunchingWithOptions: 다음 줄을 추가합니다.
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 React Native Android 통합

다음 줄을 포함하도록 앱의 res/values/strings.xml 수정합니다.

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
3.1.2.1 AppSecret 옵션 설정 1: appcenter-config.json 구성

다음 콘텐츠로 appcenter-config.jsonandroid/app/src/main/assets/ 이름으로 새 파일을 만들고 를 앱 비밀 값으로 바꿉 {APP_SECRET_VALUE} 니다.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

참고: assets라는 폴더가 없으면 "project_root/android/app/src/기본/assets" 아래에 만들어야 합니다.

3.1.2.2 AppSecret 옵션 설정 2: 코드에서 구성

App Center Analytics 및 App Center 크래시를 사용하도록 앱의 기본 활동 클래스'에 콜백 만들기에 다음 줄을 추가합니다.

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 0.60보다 React Native SDK를 자동으로 통합

참고

podfile 내의 상대 경로를 사용하여 연결된 React 모듈이 있지만 프로젝트에서 참조되지 않은 경우 연결 스크립트는 정적 Pod 버전을 사용하여 App Center를 연결하기 때문에 실패합니다. 연결 스크립트를 이미 실행한 경우 React Native 문제 해결 섹션의 단계를 따르거나 직접 연결해야 합니다.

  1. react-native link 명령을 사용하여 플러그 인을 React Native 앱에 연결합니다.

    react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes

    iOS의 경우 다음과 같은 오류가 표시되면 CocoaPods에서 iOS 및 macOS용 App Center SDK를 다운로드하려고 시도합니다.

    Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version})

    다음 명령 실행:

    pod repo update

    그런 다음, 를 다시 실행 react-native link합니다.

    참고

    App Center SDK는 연결 프로세스 중에 App Center 모듈에 대해 모의 항목을 자동으로 설정하지 않습니다. 애플리케이션에서 Jest 테스트 프레임워크를 사용하고 Jest로 테스트를 실행하는 동안 App Center SDK로 인한 오류가 발생하는 경우 package.json 파일의 jest 섹션에 다음을 추가합니다(사용 중인 모듈만 포함).

    "setupFiles": [
   "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
   "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
   "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
]

    참고

    크래시 처리가 자동인지 Javascript 메서드에 의해 트리거되는지 여부에 관계없이 크래시는 애플리케이션을 다시 시작한 후에 항상 처리됩니다. 애플리케이션이 충돌할 때 크래시를 처리할 수 없습니다.

  2. 프로젝트를 android/app/src/main/assets/appcenter-config.json 편집하고 자리 표시자 값을 App Center 프로젝트의 애플리케이션 비밀로 바꿉 YOUR_APP_SECRET 니다.

  3. 프로젝트의 ios/{YourAppName}/AppCenter-Config.plist 파일을 편집하고 자리 표시자 값을 App Center 프로젝트의 애플리케이션 암호로 바꿉 YOUR_APP_SECRET 니다. AppCenter-Config.plist가 이미 있지만 Xcode 프로젝트의 일부가 아닌 경우 Xcode 프로젝트에 수동으로 추가해야 합니다(XCode에서 앱을 마우스 오른쪽 단추로 클릭하고 앱 이름>에 <파일 추가...).

CocoaPods를 사용하지 않으려면 이 통합을 수행합니다. 위에서 설명한 대로 CocoaPods를 통해 SDK를 통합 하는 것이 좋습니다 . 그럼에도 불구하고 iOS 네이티브 SDK를 수동으로 통합할 수도 있습니다.

참고

iOS SDK가 업데이트되고 React Native 전에 릴리스되기 때문에 최신 App Center React Native SDK가 최신 App Center iOS SDK에 반드시 의존하지는 않습니다.

그 결과 React Native SDK가 의존하는 iOS SDK 버전을 알아야 합니다.

  1. zip 파일로 제공되는 React Native 프레임워크용 App Center SDK를 다운로드하고 압축을 풉니다.

  2. 필요한 React Native iOS 브리지에 대한 단일 프레임워크가 포함된 AppCenterReactNativeShared라는 폴더가 표시됩니다.

  3. zip 파일로 제공되는 iOS 프레임워크용 해당 App Center SDK 를 다운로드하고 압축을 풉니다.

  4. 각 App Center 서비스에 대해 서로 다른 프레임워크를 포함하는 AppCenter-SDK-Apple/iOS 라는 폴더가 표시됩니다. 호출 AppCenter 된 프레임워크는 서로 다른 모듈 간에 공유되는 코드를 포함하기 때문에 프로젝트에 필요합니다.

  5. [선택 사항] 타사 라이브러리에 대한 하위 디렉터리를 만듭니다.

    • 타사 라이브러리는 일반적으로 하위 디렉터리(공급업체라고도 함) 내에 상주하므로 라이브러리에 대한 하위 디렉터리로 구성된 프로젝트가 없는 경우 현재(프로젝트의 ios 디렉터리 아래) 공급업체 하위 디렉터리를 만듭니다.
    • Xcode 프로젝트 내에 Vendor 라는 그룹을 만들어 디스크의 파일 구조를 모방합니다.

  6. Finder를 열고 이전에 압축을 푼 AppCenter-SDK-Apple/iOS 및 AppCenterReactNativeShared 폴더를 원하는 위치의 프로젝트 폴더에 복사합니다.

  7. Xcode에서 프로젝트에 SDK 프레임워크를 추가합니다.

    • 프로젝트 탐색기가 표시되는지 확인합니다(⌘+1).
    • AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework 및 AppCenterReactNativeShared.framework 파일을 Finder(이전 단계의 위치)에서 Xcode의 프로젝트 탐색기로 끌어서 놓습니다. AppCenter.framework 및 AppCenterReactNativeShared.framework 파일은 SDK를 시작하고 프로젝트에 추가되었는지 확인해야 합니다. 그렇지 않으면 다른 모듈이 작동하지 않으며 앱이 컴파일되지 않습니다.
    • 대화 상자가 나타나고 앱 대상이 선택되어 있는지 확인한 다음 마침을 클릭합니다.

  8. AppCenter React Native 플러그 인 프로젝트를 앱의 프로젝트에 연결합니다.

    • 프로젝트 탐색기가 표시되는지 확인합니다(⌘+1).

    • 각 AppCenter React Native 플러그 인에 대해 소스 코드가 포함된 폴더로 이동합니다. 각각 경로는 다음과 같습니다.

      • /node_modules/appcenter/ios
      • /node_modules/appcenter-analytics/ios
      • /node_modules/appcenter-crashes/ios

    • Finder에서 Xcode의 프로젝트 탐색기로 파일을 끌어서 놓 .xcodeproj 습니다. 일반적으로 라이브러리 그룹 아래에 있습니다 .

  9. AppCenter React Native 플러그 인에 대한 라이브러리를 연결합니다. 프로젝트 설정을 열고 연결된 프레임워크 및 라이브러리 섹션의 일반 탭에서 이전 단계에서 추가된 대상 라이브러리를 참조하는 새 항목을 추가합니다.

    • libAppCenterReactNative.a
    • libAppCenterReactNativeAnalytics.a
    • libAppCenterReactNativeCrashes.a

  10. 헤더 검색 경로를 수정하여 AppCenter React Native 플러그 인 프로젝트에서 헤더를 찾습니다. 프로젝트 설정을 열고 헤더 검색 경로 섹션의 빌드 설정 탭에서 헤더 파일에 대한 새 위치를 추가합니다.

  • $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
  • $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
  • $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes

  1. SDK를 시작하기 위한 코드를 포함하도록 앱의 AppDelegate.m 또는 AppDelegate.mm 파일을 수정합니다.

    • 다음 가져오기를 추가합니다.
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • 메서드에 application:didFinishLaunchingWithOptions: 이러한 줄을 추가합니다.
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. 다음 콘텐츠를 사용하여 이름을 AppCenter-Config.plist 사용하여 새 파일을 만들고 를 앱 비밀 값으로 바꿉 {APP_SECRET_VALUE} 니다. XCode 프로젝트에 이 파일을 추가하는 것을 잊지 마세요(XCode에서 앱을 마우스 오른쪽 단추로 클릭하고 앱 이름>에 <파일 추가...).

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

참고

다음 두 단계는 React Native 0.60 이상을 사용하는 앱에만 해당됩니다.

  1. React Native 0.60 이상에 대해 자동 연결을 사용하지 않도록 설정합니다.

    • 각 App Center 패키지의 node_modules 폴더 내에서 react-native.config.js 열고 로 null설정합니다dependency.platforms.ios.
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. 헤더 검색 경로를 수정하여 App Center React Native 플러그 인 프로젝트에서 React Native 헤더를 찾습니다.

    • 프로젝트 탐색기가 표시되는지 확인합니다(⌘+1).
    • 8단계에서 라이브러리 그룹에 추가한 각 AppCenter React Native 플러그 인 프로젝트에 대해 다음을 수행합니다.
      • 프로젝트를 선택하고 헤더 검색 경로 섹션의 빌드 설정 탭에서 옵션을 사용하여 헤더 파일에 recursive 대한 새 위치를 추가합니다.${SRCROOT}/../../../ios/Pods/Headers

명령이 없는 react-native link 통합 단계입니다.

  1. android/settings.gradle 파일을 열고 다음 줄을 삽입합니다. 프로젝트에 원하는 종속성을 포함합니다. 각 SDK 모듈은 이 섹션에서 별도의 종속성으로 추가되어야 합니다. App Center Analytics 및 크래시를 사용하려면 다음 줄을 추가합니다.

      include ':appcenter-crashes'
  project(':appcenter-crashes').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-crashes/android')
  include ':appcenter-analytics'
  project(':appcenter-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-analytics/android')
  include ':appcenter'
  project(':appcenter').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter/android')

참고

jCenter 지원 종료로 인해 모든 어셈블리가 Maven Central 리포지토리로 이동되었습니다. jCenter에서 Maven Central로의 마이그레이션에 대한 이 가이드 를 따르세요.

  1. 프로젝트의 앱 수준 build.gradle 파일(android/app/build.gradle)을 열고 섹션에 dependencies 다음 줄을 추가합니다.

    dependencies {
    implementation project(':appcenter-crashes')
    implementation project(':appcenter-analytics')
    implementation project(':appcenter')
    ...
}

  2. SDK를 시작하기 위한 코드를 포함하도록 앱의 MainApplication.java 파일을 수정합니다.

    • 가져오기 섹션에 이러한 줄을 추가합니다.
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • 메서드에 List<ReactPackage> getPackages() AppCenter 패키지 추가
    @Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)),
        new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)),
        new AppCenterReactNativePackage(MainApplication.this)
  );
}

  3. strings.xml 파일(android/app/src/main/res/values)을 열고 태그 내에 <resources></resources> 다음 줄을 추가합니다.

    <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>

  4. 다음 콘텐츠로 appcenter-config.jsonandroid/app/src/main/assets/ 이름으로 새 파일을 만들고 를 앱 비밀 값으로 바꿉 APP_SECRET_VALUE 니다.

    {
    "app_secret": "APP_SECRET_VALUE"
}

경고

소스 코드에 앱 비밀을 포함하지 않는 것이 좋습니다.

3.5 자동 백업을 사용하여 디바이스에 대한 잘못된 정보를 가져오지 않도록 하는 경우 다음 단계를 수행합니다.

참고

Android 6.0(API 수준 23) 이상을 대상으로 하는 앱은 자동 백업을 자동으로 사용하도록 설정됩니다. 

참고

백업 규칙이 있는 사용자 지정 파일이 이미 있는 경우 세 번째 단계로 전환합니다.

a. android/app/src/기본/res/xml 폴더에appcenter_backup_rule.xml파일을 만듭니다.

b. 프로젝트의 AndroidManifest.xml 파일을 엽니다. 요소에 android:fullBackupContent 특성을 추가합니다 <application> . appcenter_backup_rule.xml 리소스 파일을 가리킵니다.

android:fullBackupContent="@xml/appcenter_backup_rule"

다. appcenter_backup_rule.xml 파일에 다음 백업 규칙을 추가합니다.

<full-backup-content xmlns:tools="http://schemas.android.com/tools">
    <exclude domain="sharedpref" path="AppCenter.xml"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
    <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
    <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. SDK 시작

이제 명령줄 또는 Xcode/Android Studio에서 애플리케이션을 빌드하고 시작할 수 있습니다.

4.1 명령줄에서 애플리케이션 빌드 및 실행

다음 명령을 사용하여 iOS 애플리케이션을 빌드하고 시작할 수 있습니다.

react-native run-ios

팁

에서 iOS 디바이스 이름을 지정하여 iOS 시뮬레이터 또는 iOS 디바이스에서 시작할 수 있습니다react-native run-ios --device "myDeviceName".

다음 명령을 사용하여 Android 애플리케이션을 빌드하고 시작할 수 있습니다.

react-native run-android

팁

에서 디바이스 ID를 지정하여 android 에뮬레이터 또는 Android 디바이스에서 react-native run-android --deviceId "myDeviceId" 시작할 수 있습니다(deviceId 명령에서 adb devices ).

4.2 Xcode 또는 Android Studio에서 애플리케이션 빌드 및 실행

iOS의 ios/{appname}.xcworkspace 경우 Xcode에서 프로젝트 또는 ios/{appname}.xcodeproj 파일을 열고 여기에서 빌드합니다.

참고

3.1단계와 같이 App Center를 통해 자동으로 react-native link 연결한 경우 Xcode에서 프로젝트의 ios/{appname}.xcworkspace 파일을 열어야 합니다. App Center CocoaPods 종속성은 가 아닌 xcodeproj경우에만 xcworkspace 작동하므로 ios/{appname}.xcodeproj 파일에는 App Center CocoaPods 종속성이 연결되지 않습니다.

Android의 경우 Android Studio에서 Android 프로젝트를 가져와서 빌드합니다.

SDK가 자동으로 수집하는 포털에서 분석 및 크래시 데이터를 시각화하도록 설정되었습니다. 추가 설정이 필요하지 않습니다. API 가이드 및 연습에 대한 분석 및 크래시 섹션을 참조하여 App Center에서 수행할 수 있는 작업을 알아봅니다.