* 사전 준비: FCM 세팅 중에 APN 인증키(.p8 파일)가 필요하다. 인증 키 발급 방법은 다음 글에서 확인 가능하다.
https://pocket-dev.tistory.com/43
[React Native] ios FCM으로 푸시알림 적용하기(1) - APN 인증키(.p8) 발급받기
iOS 환경에서 FCM을 사용하기 위해서는 APN(Applie Push Notification)인증키가 필요하다.APN 인증키를 발급받아보자. 1. APN 인증키 발급하기1) https://developer.apple.com/account 접속 > 인증서, ID 및 프로파일 >
pocket-dev.tistory.com
1. firebase 프로젝트 생성하기
https://firebase.google.com/?hl=ko 접속 > 로그인 후 우측 상단 프로필 옆 Go to console 클릭 > 프로젝트 추가
1) 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 버튼을 눌러준다.
잘 들어간 것을 확인할 수 있다.
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) 발급받기
iOS 환경에서 FCM을 사용하기 위해서는 APN(Applie Push Notification)인증키가 필요하다.APN 인증키를 발급받아보자. 1. APN 인증키 발급하기1) https://developer.apple.com/account 접속 > 인증서, ID 및 프로파일 >
pocket-dev.tistory.com
.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) - 연동 테스트
* 참고: ios는 FCM 테스트가 에뮬레이터에서 안되고, 실제 기기에서만 확인 가능하다.ios 실제 기기(아이폰)에서 프로젝트를 구동하는 방법은 다음 포스팅을 참고하면 된다: https://pocket-dev.tistory.com
pocket-dev.tistory.com
'ReactNative' 카테고리의 다른 글
[React Native] 특정 Android 기기에서 프로젝트 실행하기 (0) | 2024.07.16 |
---|---|
[React Native] android fcm 테스트 시 MISSING_INSTANCEID_SERVICE 에러 (0) | 2024.07.16 |
[React Native] ios FCM으로 푸시알림 적용하기(1) - APN 인증키(.p8) 발급받기 (0) | 2024.07.10 |
[React Native] ios FCM으로 푸시알림 적용하기(3) - 연동 테스트 (0) | 2024.07.10 |
[React Native] 실제 기기 구동 시 @expo/vector-icons 아이콘 안나옴. (0) | 2024.07.05 |