[RN] Expo FCM 푸시알림 구현하기 (1)

 

 

 

 

Expo FCM 푸시알림 구현하기!

 

 

 

1. 라이브러리 설치

npm i expo-notifications
npm i @react-native-firebase/messaging

 

 

 

2. FCM 토큰 받기

	/**
	 * FCM 토큰을 받습니다.
	 */
	const getFcmToken = async () => {
		const fcmToken = await messaging().getToken();
		console.log('[+] FCM Token :: ', fcmToken);
	};

	/**
	 * FCM 메시지를 앱이 foreground 상태일 경우 메시지를 수신합니다.
	 */
	const subscribe = messaging().onMessage(async remoteMessage => {
		console.log('[+] Remote Message ', JSON.stringify(remoteMessage));
	});

 

토큰은 expo-notification을 통해 받을 수도 있다. expo는 expo용 토큰과 fcm토큰 둘다 받을 수 있음.

 

 

 

 

728x90

 

 

 

 

3. 테스트 해보기

firebase 사이트 접속 후 프로젝트 생성

 

 

---

 

 

---

 

 

---

 

 

계정 선택 후 프로젝트 만들기!

 

---

 

 

---

 

 

---

 

 

cloud messaging 클릭

 

---

 

 

앱 추가(난 웹 선택함)

 

프로젝트에 라이브러리 추가설치

npm install firebase

 

그 후 SDK값 초기화작업

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "ㅁㄴㅇㄴㅁㅇ",
  authDomain: "ㅁㄴㅇㅁㅇㄴㅁㅇ",
  projectId: "ㅁㄴㅇㄴㅁㅇ",
  storageBucket: "ㅁㄴㅇㄴㅁㅇ",
  messagingSenderId: "ㅇㅁㄴㅇㄴㅁ",
  appId: "ㅁㄴㅇㅁㄴㅇㄴㅁㅇ",
  measurementId: "G-JLMJLPPL47"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

 

---

 

추가하면 캠페인 만들기가 뜬다.

 

 

 

---

 

 

 

---

 

제목, 텍스트 입력 후 테스트 메시지 전송 클릭

 

 

 

---

 

 

기기 FCM 토큰 입력해주면

 

 

뜬다~

 

 

 

 

 

- 참고

https://adjh54.tistory.com/431