์ฒซ๋ฒ์งธ ์ฐธ๊ณ ๊ฒ์๊ธ์ ์ธํ ์ ๋ฐ๋ผํ๋,
firebase๋ฅผ ์ค์นํ๋ ํํธ๋ firebase ๊ณต์ ๋ฌธ์์ Get Started ๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ต๋๋ค.
๋ฒ์ ๋ณ๋ก ์ค์น ๋ฐฉ๋ฒ์ด ์์ดํ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ ๋๋ฌธ์ด์์.
์ ๊ฒ์๊ธ์ ์ฐธ๊ณ ๋ง ํ์๊ณ ๊ณต์ ๋ฌธ์๋ฅผ ๋ฐ๋ผํ์๋๊ฒ ๊ฐ์ฅ ์ ํํฉ๋๋ค.
์ด ๊ณณ์ด ๋ฐ๋ก Firebase Console ์
๋๋ค. ์๋์์ ๊ณ์ Firebase ์ฝ์๋ก ์ง์นญํ๊ฒ ์ต๋๋ค!!
์ด ๊ณณ์์ ๊ตฌ๊ธ ๊ณ์ ์ผ๋ก ๋ก๊ทธ์ธํ ๋ค์, Firebase ํ๋ก์ ํธ๋ฅผ ์์ฑํฉ๋๋ค.
์๋์ ๊ฐ์ ํ๋ฉด์ด ๋ณด์ด๋ฉด ์ฑ๊ณต์
๋๋ค.
(์ด๋ฏธ ์๋๋ก์ด๋ ์ฑ์ ์ถ๊ฐํ๊ณ ํ
์คํ
์ด ์๋ฃ๋ ์ํ๋ผ ์ด๊ธฐ ํ๋ฉด๊ณผ๋ ์กฐ๊ธ ๋ค๋ฅด์ง๋ง...
์๋ฌดํผ ๋ณธ์ธ ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ฃผ์ธ์!^^;;)
ํ๋ก์ ํธ์์ Firebase ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ์ผ๋จ @react-native-firebase/app
์ด ๋จผ์ ์ค์น๋์ด์ผ ํฉ๋๋ค.
# Using npm
npm install --save @react-native-firebase/app
# Using Yarn
yarn add @react-native-firebase/app
์ด ๊ธ ์ฒซ ํํธ์์ Firebase ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์์ฃ ?
๊ทธ ํ๋ก์ ํธ์ ๋ด ์๋๋ก์ด๋ ์ฑ์ ์ฐ๊ฒฐํ๋ ์์
์
๋๋ค.
์ผ๋จ Firebase ์ฝ์ ์ฐฝ์์ ์๋๋ก์ด๋ ์ฑ์ ์์ฑํด์ผ ํ๊ณ ,
์๋๋ก์ด๋ ์ฑ ์์ฑ ์ ์ฆ๋ช
์ ํ์ผ์ด ๋ฐ๊ธ๋๋๋ฐ
๊ทธ ์ฆ๋ช
์ ํ์ผ์ ๋ด ํ๋ก์ ํธ ์์ ์ง์ด๋ฃ์ด์ผ ํฉ๋๋ค.
Firebase ์ฝ์์์ ์๋ก์ด ์๋๋ก์ด๋ ์ฑ์ ์์ฑํฉ๋๋ค.
์๋ ์ฌ์ง์ ๋ณด์ด๋ ์ฑ ์ถ๊ฐ ๋ฒํผ์ ๋๋ฅด๊ณ ์๋๋ก์ด๋ ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
๊ทธ๋ฌ๋ฉด ์ฑ์ ๋ฑ๋กํ๋ ํ์ด์ง๊ฐ ๋์ต๋๋ค.
Android ํจํค์ง ์ด๋ฆ์ ๋ฐ๋์ ๋ด ํ๋ก์ ํธ์ android/app/src/main/AndroidManifest.xml
ํ์ผ์ ์ฒซ๋ฒ์งธ <manifest>
ํ๊ทธ ์์ ์๋ ์ด๋ฆ๊ณผ ๋์ผํด์ผ ํฉ๋๋ค.
com.
์ผ๋ก ์์๋๋ ๋ฐ๋ก ์ ์ด๋ฆ์
๋๋ค.
๋๋จธ์ง ๋ ํญ๋ชฉ์ ์ ํ์ฌํญ์ ๋๋ค.
๋๋ฒ๊ทธ ์๋ช ์ธ์ฆ์ SHA-1ํญ๋ชฉ์ ๊ฒฝ์ฐ ์ ํ์ฌํญ์ด์ง๋ง, ๋์ ๋งํฌ, ์ด๋, Google ๋ก๊ทธ์ธ ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ค๋ฉด ํ์๋ผ๊ณ ํฉ๋๋ค.
ํ์ํ ๊ฒฝ์ฐ,cd android && ./gradlew signingReport
์ปค๋งจ๋๋ฅผ ์ฌ์ฉํ ํdebug
ํค์SHA1
๋ฅผ ๊ธ์ด์ ์ ๋ ฅํ๋ฉด ๋๋ค๊ณ ํฉ๋๋ค. ์ ํ์ ์์ด์ ํจ์ค
(์ด๋ฏธ ์ฑ ์์ฑ์ด ์๋ฃ๋ ์ํ๋ผ ์ฐธ๊ณ ํ ๋ธ๋ก๊ทธ์ ์ฌ์ง์ ์บก์ณํด์์ต๋๋ค. ์ถ์ฒ)
์ ์ฒ๋ผ ์ด๋ฏธ ์ฑ์ ์์ฑํ๋ค๋ฉด ์๋ ์ฌ์ง์ ๋ณด์ด๋ ๊ณณ์์๋ ๋ค์ด๋ก๋ ๋ฐ์ ์ ์์ต๋๋ค.
ํด๋น ํ์ผ์ ๋ค์ด๋ฐ์ผ์
จ๋ค๋ฉด, /android/app
๊ฒฝ๋ก ์๋์ ํด๋น ํ์ผ์ ๋ฃ์ด์ฃผ์ธ์!!
์ค์!! android ๋๋ ios ํด๋ ์๋์ ํญ๋ชฉ์ ์์ ํ์ค ๋ ๋ฐ๋์ android studio ๋ Xcode ๋ฅผ ์ผ์ ์์ ํด์ฃผ์ธ์.
VSCode ๊ฐ์ IDE ์์ ์์ ์ ํ๊ฒ ๋๋ฉด ๋๊ธฐํ๊ฐ ์ ๋ฉ๋๋ค.
google-services.json
ํ์ผ๋ android ํด๋ ์๋์ ๋ค์ด๊ฐ๋ ํ์ผ์ด๊ธฐ ๋๋ฌธ์
android studio ๋ฅผ ์ด์ด์ ์งํํด์ฃผ์ธ์!!!!!
/android/app/google-services.json
์ด ์์น์ ํ์ผ์ด ์ ๋ค์ด๊ฐ ์๋ค๋ฉด ์ฑ๊ณต์
๋๋ค.
๊ทธ๋ฐ๋ฐ Firebase ๊ฐ ์ธ์ฆ์๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํ๋ ค๋ฉด, ํ๋ก์ ํธ์์ google-services
ํ๋ฌ๊ทธ์ธ์ ํ์ฑํํด์ผ ํฉ๋๋ค.
google-services
ํ๋ฌ๊ทธ์ธ์ ํ์ฑํํ๋ ค๋ฉด android
๋๋ ํ ๋ฆฌ์ ๋ ๊ฐ ํ์ผ์ ์์ ํด์ผ ํฉ๋๋ค.
์์ ๋งํ๋ฏ ๋ฐ๋์ Android Studio ๋ฅผ ์ด์ด์ ์ฝ๋๋ฅผ ์์ ํด์ฃผ์ธ์!!!
/*
/android/build.gradle
*/
buildscript {
dependencies {
// ... other dependencies
classpath 'com.google.gms:google-services:4.2.0'
// ^ ์ด๊ฑฐ ํ ์ค ์ถ๊ฐ
}
}
/*
/android/app/build.gradle
*/
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- ์ถ๊ฐ
...
dependencies {
...
// ์๋ ๋ ์ค ์ถ๊ฐ
// Add the SDK for Firebase Cloud Messaging
implementation 'com.google.firebase:firebase-messaging:20.2.3'
...
}
์์ ๊ณผ์ ์ด ๋ชจ๋ ๋๋ฌ๋ค๋ฉด,
firebase ๋ฅผ ๋ด ํ๋ก์ ํธ์ ๋งํฌํ๊ธฐ ์ํด์ ํ๋ก์ ํธ๋ฅผ rebuild ํด์ผ ํฉ๋๋ค.
npx react-native run-android
์ฌํ๊น์ง ํ ๋ด์ฉ์ Firebase ๋ฅผ ์ค์นํ๊ณ , ๋ด ์๋๋ก์ด๋ ์ฑ์ ์ฐ๊ฒฐํ๋ ์์
์ด์์ต๋๋ค.
๋ฉ์ธ์ง ๋ฐ์ก์ ๋์ค์ Firebase ์ฝ์์์ ํ
์คํ
ํด๋ณผ๊ฑฐ๊ณ ,
ํ๋ก์ ํธ ๋ด๋ถ์ ๋ฉ์ธ์ง ์์ ์ฝ๋๋ฅผ ์์ฑ ํด์ผ ํฉ๋๋ค.
๊ทธ๋์ผ ๋ฉ์ธ์ง๋ฅผ ๋ฐ์๋ณผ ์ ์๊ฒ ์ฃ ??
์ด ๋ถ๋ถ์ ํ ๋ฒ ์ฝ์ด๋ณด์ธ์.
์ธ ๊ฐ์ง ๊ฒฝ์ฐ์ ๋ํ ํธ๋ค๋ง์ ํด์ผ ํฉ๋๋ค.
์ฑ์ด Foreground ์ธ ์ํ์์ ํธ์ฌ์๋ฆผ์ ๋ฐ์ผ๋ ค๋ฉด, messaging
์ onMessage
๋ฉ์๋๋ฅผ ํธ์ถํด์ผ ํฉ๋๋ค.
์ฑ์ ๊ฐ์ฅ ์ ๋จ์ ํด๋น ์ฝ๋๋ฅผ ์ง์ด๋ฃ์ด ์ฃผ๋ ๊ฒ ์ข๊ฒ ์ฃ ? ๋ฐ๋ผ์ App.tsx
์ ํด๋น ์ฝ๋๋ฅผ ๋ฃ๋๋ก ํ๊ฒ ์ต๋๋ค.
// App.tsx
import React, { useEffect } from 'react';
import { Alert } from 'react-native';
import messaging from '@react-native-firebase/messaging';
function App() {
useEffect(() => {
const unsubscribe = messaging().onMessage(async remoteMessage => {
Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
});
return unsubscribe;
}, []);
}
ํธ์ฌ ์๋ฆผ์ด ์์ ๋์์ ๋ React Native ์ Alert
api ๋ฅผ ์ฌ์ฉํด ์๋ฆผ์ ๋์ฐ๋ ํ
์คํธ ์ฝ๋์
๋๋ค.
onMessage
์คํ ์ดํ์ ์ฝ๋๋ ์ถํ ํ๋ก์ ํธ์ ๋ง๊ฒ ์์ ๋์ด์ผ ํ๊ฒ ์ฃ !!
์ฑ์ด Background ์ด๊ฑฐ๋ ๊บผ์ง ์ํ์์ ํธ์ฌ์๋ฆผ์ ๋ฐ์ผ๋ฉด ์์ ์ฌ์ฉํ๋ messaging
์ onMessage
๋ฉ์๋๋ ๋ถ๋ฆฌ์ง๊ฐ ์์ต๋๋ค.
๋์ setBackgroundMessageHandler
๋ฉ์๋๋ผ๋ ๊ฒ ์กด์ฌํ๋๋ฐ, ์ด๊ฑธ ์ฌ์ฉํด์ ๋ฉ์ธ์ง๋ฅผ ๋ฐ์์ต๋๋ค.
๊ณต์ ๋ฌธ์์์๋ ํด๋น ๋ฉ์๋๊ฐ ์ต๋ํ ๋นจ๋ฆฌ ๋ถ๋ ค์ผ ํ๋ค๊ณ ์ ํ ์์ต๋๋ค. index.js
์ ์์ฑํ ์์๊ฐ ์ ํ ์์ผ๋ ์ ๋ ๊ทธ๋๋ก ์งํํฉ๋๋ค!
// index.js
// index.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';
// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
});
AppRegistry.registerComponent('app', () => App);
ํธ์ฌ ์๋ฆผ์ด ์์ ๋์์ ๋ console.log
๋ฅผ ์ฐ๋๋ก ๊ตฌํ๋ ์์ ์ฝ๋์ธ๋ฐ,
ํ
์คํธ ํด ๋ณธ ๊ฒฐ๊ณผ ์ฑ์ด ๋ฐฑ๊ทธ๋ผ์ด๋์ ์์ ๋๋ ์๋ฆผ์ด ์์ ๋๊ธฐ๋ง ํ๋ฉด console
์ด ์ฐํ๋๋ค.
์ฑ์ด ์์ ๊บผ์ ธ์์ ๊ฒฝ์ฐ์๋ ์๋ฆผ์ ๋๋ฌ ์ฑ์ด ์ผ์ก์ ๋ console
์ด ์ฐํ๋๋ค.
์ด์ ํ ์คํธ ๋ฉ์ธ์ง๋ฅผ ๋ณด๋ด๋ณผ๊น์?!
IOS ๋ ์ค์ ๊ธฐ๊ธฐ์์๋ง ํ
์คํธ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
์๋๋ก์ด๋๋ ์๋ฎฌ๋ ์ดํฐ์์๋ ํ
์คํธ ๊ฐ๋ฅํฉ๋๋ค.
์ง๊ธ์ ์๋๋ก์ด๋์์ ํ ์คํ ํ ์์ ์ด๋ ์๋ฎฌ๋ ์ดํฐ๋ก๋ ํ ์คํ ๊ฐ๋ฅํฉ๋๋ค!!
๐ซ ์ผ๋จ Firebase ์ฝ์ ์ฐฝ์์ Cloud Messaging ์ ๋ค์ด๊ฐ๋๋ค.
๐ซ ๊ทธ๋ฆฌ๊ณ '์ ์๋ฆผ' ์ ํด๋ฆญํฉ๋๋ค.
๐ซ ์ ๋ชฉ๊ณผ ๋ด์ฉ๋ง ํ์์ฌํญ์ ๋๋ค. ํ ์คํธ ํ๊ณ ์ถ์ ๋ด์ฉ์ ์ ๋ ฅํ๊ณ ~
๐ซ ํ ์คํธํ ์ฑ์ ์ ํํด์ค๋๋ค.
๐ซ ๋๋จธ์ง ๋ด์ฉ์ ์ ํ์ฌํญ์ด๋ผ ๋ฐ๋ก ๊ฒํ ๋ฅผ ๋๋ฌ์ค๋๋ค.
๐ซ ๊ฒ์!!!!!!!!!!
๐ซ ๋ฉ์ธ์ง๊ฐ ๋์ฐฉํ๋์??????
๋ฌด์ ์๋ฆผ์ธ ๊ฒฝ์ฐ๋ ์์ผ๋ ์์ ์๋ ์ํ์ฐฝ์ ๋๋๊ทธํด์ ์ด์ด๋ณด์๋ฉด ์๋ฆผ์ด ์ ์๋ ๊ฒฝ์ฐ๋ ์์ต๋๋ค.
foreground ์์ ํ
์คํธํ๋ App.tsx
์ ์ค์ ํด๋ ๋๋ก Alert ์ด ๋ด์ต๋๋ค!!
๋ค๋ค ์ ๋์๋์?
ํฌ์คํ
์ ๋ง ๊ฐ์ฌํด์! ๋์ ๋ง์ด ๋ฐ์์ต๋๋ค!!
๊ทผ๋ฐ ํน์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์๋ฆผ์ด ์์๋! ์ฑ์ ๊บผ๋ฒ๋ฆฌ๊ณ ์๋ฆผ์ ๋๋ ์๋์ ์ฒ๋ฆฌ๋ ์ด๋ป๊ฒ ํ์
จ๋์ง ์ฌ์ญ์ด ๋ด๋ ๋ ๊น์?
์๋ ํ์ธ์!!! ์ฌ์ง๊ณผ ํจ๊ป ์น์ ํ ์ค๋ช ์ง์ง ๊ฐ์ฌ๋๋ฆฝ๋๋คใ ใ ใ
๊ฐ์์ค๋ฝ๊ฒ ๋ ธํฐ๋ฅผ ๊ตฌํํ๋ ๋ฏธ์ ์ ๋ฐ์์ ๋ฉ๋ถ์ด์๋๋ฐ May๋ ๋๋ถ์ ์๋์์ ๋ ธํฐ ๋์ ์ด์!!!!
(์์ง ๊ฐ๊ณตํ ๊ฒ ๋ง์ด ๋จ์์ง๋ง........)
๊ทธ๋ฐ๋ฐ ํค๋์ ์๋ฆผ์ ์๋์, ๊ตฌ๊ธ ํญํ ๊ฒ์์ค์ธ๋ฐ.... ํน์ ํค๋์ ๋ ๊ตฌํ ํด๋ณด์ จ๋์ง์ใ ใ ...?