[React Native] ios FCM으로 푸시알림 적용하기(2) - Firebase 설정

* 사전 준비: FCM 세팅 중에 APN 인증키(.p8 파일)가 필요하다. 인증 키 발급 방법은 다음 글에서 확인 가능하다.

https://pocket-dev.tistory.com/43

[React Native] ios FCM으로 푸시알림 적용하기(1) - APN 인증키(.p8) 발급받기

 

 

---

 

1. firebase 프로젝트 생성하기

https://firebase.google.com/?hl=ko 접속 > 로그인 후 우측 상단 프로필 옆 Go to console 클릭 > 프로젝트 추가

 

1) Go to console 클릭

Go to console 선택

2) 프로젝트 추가 버튼 클릭

프로젝트 추가

 

2. firebase console에서 ios 앱 생성하기

1) iOS+ 아이콘 클릭

 

2) Apple 번들 ID 부분에 프로젝트 bundle ID 작성

 

2-2) 프로젝트 bundle ID 확인

Xcode에서 TARGET > General > Identity > Bundle Identifier에 있는 값이 프로젝트 번들 ID이다.

 

3) 인증 파일 내 프로젝트에 넣기

GoogleService-Info.plist 파일을 다운로드 받아서 Xcode에서 아래 이미지와 동일한 위치에 넣어준다.(Info.plist와 같은 경로)

다운받은 파일을 Xcode로 드래그앤드롭해서 넣어주면 된다.

 

그럼 아래 창이 나타나는데, 이미지와 동일하게 체크박스를 선택해 준 후에 Finish 버튼을 눌러준다.

 

잘 들어간 것을 확인할 수 있다.

Xcode

 

3. firebase SDK 추가

이 단계는 넘어간다.

React Naitve 프로젝트에서 npm으로 @react-native-firebase 패키지를 설치하면서 같이 설치되는데, 나는 아래 이미지에 있는 가이드대로 했다가 나중에 sdk가 중복되었다는 에러를 만나서 결국 Xcode에서 firebase-ios-sdk 패키지를 다시 제거해주었다. 아래 두 케이스 중에 하나만 골라서 진행하자.

1. npm으로 @react-native-firebase 패키지 추가

2. Xcode에서 패키지 추가(아래 이미지)

 

4. 초기화 코드 추가

Objective-C 선택해서 나오는 코드처럼 [FIRApp configure]; 코드를 추가해줄 차례이다.

 

Xcode에서 AppDelegate.mm 파일을 열어서 아래 이미지에 있는 빨간 박스 두 곳처럼 코드를 추가해준다.

#import <Firebase.h>

if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
}

 

5. Pod install로 변경사항 프로젝트에 적용하기

// 내 프로젝트 경로에서 명령어 수행
cd ios && pod install --repo-update
cd .. && npm run ios

 

 

6. firebase에 APN 인증키 등록하기

* 이 단계를 진행하기 전에 .p8 파일을 발급받아놔야 한다. 아직 .p8 파일을 발급하지 않았다면, 발급 방법은 다음 글에서 확인 가능하다: 

https://pocket-dev.tistory.com/43

[React Native] ios FCM으로 푸시알림 적용하기(1) - APN 인증키(.p8) 발급받기

 

 

.p8 파일을 발급받았다면 firebase 콘솔 페이지에서 APN 인증 키를 등록한다.

프로젝트 설정 > 클라우드 메시징 > Apple 앱 구성 > APN 인증 키 > 업로드

'APN 인증 키' 아래에 있는 'APN 인증서'서는 .p12 인증서를 위한 칸이므로, APN 인증 키 부분에서 작업을 수행한다.

• APNs 인증 키: .p8 파일을 넣어준다.
• 키 ID: .p8 파일명 AuthKey_XXXXXXXXXX.p8에서 XXXXXXXXXX 부분에 해당하는 문자열

• 팀 ID: https://developer.apple.com/ > Account > 멤버십 세부 사항

 

등록 완료!

 

 

7. Xcode 설정

Xcode > TARGETS > Signing & Capabilities 에서 + Capability 클릭.

Background Modes와 Push Notifications 추가

* 만약 Push Notifications가 추가할 수 있는 목록에서 보이지 않는다면, Signing 탭에 있는 Automatically manage signing 체크박스를 풀어주고 + Capability를 다시 클릭해서 Push Notifications를 추가해주면 된다. 그 후에 다시 Automatically manage signing 체크박스를 체크해주면 된다.

 

Xcode > TARGETS > Signing & Capabilities > Background Modes에서 Remote notifications 체크박스를 체크해준다.

 

 

 

Firebase 설정 완료!

 

---

 

테스트는 다음 글에서 진행한다.

https://pocket-dev.tistory.com/41

[React Native] ios FCM으로 푸시알림 적용하기(3) - 연동 테스트