React Native, Expo 연동하기
플레어레인을 사용하여 React Native(리액트 네이티브), Expo 앱 푸시 알림을 쉽게 구현하는 방법에 대해 알아봅니다.
1. 사전 준비
타 푸시 솔루션과 함께 사용할 수 있습니다!
플레어레인 SDK 1.1.0 버전부터 플레어레인과 다른 푸시 솔루션을 병행 사용할 수 있습니다.
병행 사용을 위해서는 iOS: Swizzling 비활성화 가이드를 참고하여 몇 가지 작업을 추가해야합니다.
Expo 프로젝트는 Managed workflow 환경에서 벗어나(Ejected) Native Modules 설치가 가능한 환경이어야 합니다. 자세한 내용은 Expo의 아래 문서를 참고하세요.
Managed workflow vs Bare workflow
- Android: FCM 인증 정보 설정 iOS: APNS 인증 정보 설정
2. SDK 설치
터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력합니다
Terminal
|
3. iOS 프로젝트 설정
- 터미널에서 cd ios 를 입력하여 ios 디렉토리로 이동합니다.
- Podfile 파일의 상단에 platform :ios, '11.0' 혹은 11.0 버전 이상을 입력합니다.
- pod install 을 입력하여 CocoaPods 설치를 완료합니다.
- <YOUR_PROJECT_NAME>.xcworkspace 파일을 열어 Xcode 프로젝트를 실행합니다.
- 대상 PROJECT의 Deployment Target 을 11.0 혹은 그 이상으로 입력합니다.
- 대상 TARGET의 Deployment Info을 11.0 혹은 그 이상으로 입력합니다.
- 앱푸시 발송 권한을 추가합니다. Target 의 "Signing & Capabilites" 탭으로 들어와 좌상단의 "+ Capability" 를 클릭합니다.
- "Push Notifications" 를 선택하여 추가합니다.
4. 초기화 코드 작성
index.js에서 초기화 코드를 입력합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.
index.js
|
5. 테스트
여기까지 모두 완료하셨으면 앱 빌드, 실행 후 푸시 알림 구독 시 자동으로 플레어레인 전체 기기 리스트에 추가됩니다.
실제 배포 전, 푸시를 실제 발송하여 기기에 잘 오는지, 푸시 클릭 시 통계에 잘 잡히는지 반드시 직접 확인하시기 바랍니다.
6. (선택) 추가 개발 연동
푸시 알림 아이콘을 별도 설정하고 싶습니다.
- [Android] Android: 알림 아이콘 설정 을 참고하여 아이콘 애셋 세팅을 합니다.
- [iOS] 기존 앱 아이콘을 기본으로 따릅니다.
푸시 알림에 이미지 첨부를 하고 싶습니다.
- [iOS] iOS: Rich Notification 을 참고하여 Notification Extension 세팅을 합니다.
- [Android] 추가 작업이 필요하지 않습니다.