다음을 통해 공유

React 네이티브 시작하기

  • 아티클

중요합니다

Visual Studio App Center는 2026년 6월 30일까지 계속 지원되는 분석 및 진단 기능을 제외하고 2025년 3월 31일에 사용 중지되었습니다. 자세히 알아보기.

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

App Center Analytics 및 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

yarn를 npm보다 선호하는 경우, 다음 명령을 사용하여 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를 사용하는 방법은 iOS용 구성 AppCenter-Config.plist 및 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.json이라는 이름으로 android/app/src/main/assets/에 새 파일을 만들고, 다음 내용을 추가한 후 {APP_SECRET_VALUE}을(를) 앱 비밀 값으로 대체하세요.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

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

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

App Center Analytics 및 App Center 크래시를 사용하려면 앱의 기본 활동 클래스의 onCreate 콜백 내에 다음 줄을 추가합니다.

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

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

3.2 React Native에 대해 0.60보다 낮은 SDK를 자동으로 통합

비고

Podfile 내에 상대 경로를 사용하여 React 모듈을 링크했지만 프로젝트에서 참조되지 않은 경우, App Center를 정적 Pod 버전으로 링크하기 때문에 링크 스크립트가 실패합니다. 연결 스크립트를 이미 실행한 경우 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을 편집하고 YOUR_APP_SECRET의 자리 표시자 값을 App Center 프로젝트의 애플리케이션 비밀로 교체합니다.

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

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

비고

최신 App Center React 네이티브 SDK가 반드시 최신 App Center iOS SDK에 종속되는 것은 아닙니다. iOS SDK가 React Native SDK 이전에 업데이트되고 릴리스되기 때문입니다.

그 결과 React Native SDK가 종속된 iOS SDK의 버전을 알아야 합니다.

  1. zip 파일로 제공된 React 네이티브 프레임워크용 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 네이티브 플러그 인 프로젝트를 앱의 프로젝트에 연결합니다.

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

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

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

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

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

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

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

  • $(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을 열고 dependency.platforms.ios를 null로 설정합니다.
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. App Center React 네이티브 플러그 인 프로젝트에서 React 네이티브 헤더를 찾으려면 헤더 검색 경로를 수정합니다.

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

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

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

      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.json이라는 이름으로 android/app/src/main/assets/에 새 파일을 만들고, 다음 내용을 추가한 후 APP_SECRET_VALUE을(를) 앱 비밀 값으로 대체하세요.

    {
    "app_secret": "APP_SECRET_VALUE"
}

경고

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

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

비고

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

비고

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

a. android/app/src/main/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

팁 (조언)

Android 에뮬레이터 또는 Android 디바이스에서 react-native run-android --deviceId "myDeviceId"를 시작하려면 명령에서 디바이스 ID를 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 종속성은 xcworkspace로만 작동하며, xcodeproj으로는 작동하지 않습니다. 또한 ios/{appname}.xcodeproj 파일에는 App Center CocoaPods 종속성이 연결되지 않습니다.

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

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