@anpigon님께서 나중에 작업할 때 참고도 되시라고, 그리고 저도 까먹기 전에 정리하는 차원에서 설정 방법 정리합니다. 조언을 해주신 @jacobyu님께도 고마움을 전합니다.

작업은 React-Native로 생성한 이타인클럽 앱에서 Firebase를 이용한 push message 보내는 내용입니다. 분량상 일단 설정 방법을 먼저 올립니다.

> For non-Korean users, I attached all the detail images, so you can follow this test.

## Firebase Cloud Messaging 셋업
### 안드로이드 앱 생성
![image.png](https://ipfs.busy.org/ipfs/QmNNL8cbCS13teD4WohpVnprpEdLb6GYn5FpDjBnig9mKW)

저는 우선 안드로이드용 앱을 만들 것이기 때문에 위 화면에서 안드로이드 앱을 생성합니다.

### 앱 패키지 이름 설정 및 앱 등록
![image.png](https://ipfs.busy.org/ipfs/QmNPZRv6dDGvvLzXGwjDUG6XVjfR8RUbrmPYqwoCao8GQp)

조금 중요합니다.
앱 생성할 때, android package name을 react-native로 만든 package name과 동일하게 입력해야 합니다.

react-native로 생성한 android앱을 Android Studio로 열어서 확인합니다.
![image.png](https://ipfs.busy.org/ipfs/QmT4uGe8sEF36y6hWhK9VvC2NQkMJonDaStjerPkTBBG1E)


### config 파일 다운로드
![image.png](https://ipfs.busy.org/ipfs/QmeCTKpzGW3kBF1Kk3dbeLkgMUoHZgz5SwaFVSrhCQgcy1)

위 그림대로 config 파일을 다운로드 하고, react-native로 생성한 안드로이드앱의 app폴더 밑에 복사합니다. 위치에 주의하세요. 반드시 "app"폴더 밑에 위치해야 합니다.

### SDK 설정
![image.png](https://ipfs.busy.org/ipfs/QmYBrXyiM6ez2poanAAmf2SmbidstmvyWHP8XJGd8cCkgx)

위 그림과 같이 Android Studio에서 설정을 합니다. 단, 위와 같이 정식 메누얼대로 했을 때, 오류가 발생하여 다음과 같이 "app"폴더 밑의 build.gradle 파일을 변경합니다.

```
dependencies {
    implementation project(':react-native-firebase')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation 'com.google.firebase:firebase-core:16.0.7'
    implementation "com.google.android.gms:play-services-base:16.0.1"
    implementation "com.google.firebase:firebase-messaging:17.4.0
}

apply plugin: 'com.google.gms.google-services'
```
위 코드를 보면 firebase-core의 버전이 16.0.9가 아니라 16.0.7입니다. 그리고 추가로 2개의 sdk 설정을 추가했습니다.

### AndroidManifest.xml 수정
application 태그 안에, 아래 내용을 내용을 추가합니다.
```
<application>

        <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>
        <!-- For background messaging -->
        <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

</application>
```

### MainApplication.java 파일 수정
**MainActivity.java 파일이 아니라 MainApplication.java파일을 아래와 같이 수정합니다.** ` new RNFirebaseMessagingPackage()`만 추가합니다. 필요한 패키지도 import합니다.
```
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new RNFirebasePackage(),
              new RNFirebaseMessagingPackage()
      );
    }

생략
```

### 앱 빌드
Android Studio에서 build.gradle sync하고 앱을 빌드합니다. (Build -> Make Build)
아래 그림과 같이 앱이 오류 없이 빌드 되어야 합니다.
![image.png](https://ipfs.busy.org/ipfs/QmciZaLaRaxX9Maabi4u4fAeiJCD2a9kTn3w196tMhTrLc)

### 앱 실행
마지막 설정단계로, Cloud Messaging 셋업이 잘 되었는지 확인합니다.
![Screenshot from 2019-05-22 23-37-58.png](https://ipfs.busy.org/ipfs/QmWz7VhKfZzmGNf8oQEB5SA1oDuVJq3fNPjwGyk6pHE38Z)

Android Studio에서 AVD 가상 디바이스를 띄웁니다.

이제 앱 폴더로 이동하여 앱을 실행합니다. 먼저 터미널을 열어 모니터링(Metro Bundler)을 시작합니다.
```
$ yarn start
```
다음으로 앱을 실행합니다.
```
$ react-native run-android
```

![image.png](https://ipfs.busy.org/ipfs/QmWwtGAsggEmzxKkTF44M3rZcMSonvt7Gue2qiycrQ2t8i)

Firebase 셋업 화면을 확인하면 아래와 같이 셋업이 완료됩니다.
![image.png](https://ipfs.busy.org/ipfs/QmNZTfraSVtsbPZHsnLf6BkrDAQQQBCRJCbhTze6GAGavF)

---
위 화면이 나오면 일단 안심하시면 됩니다. 다음글에서 메시지 테스트를 해 보겠습니다.