eatthefrog
FCM(Firebase Clouding Messageing) 본문
개념
Goggle의 무료 크로스 플랫폼 푸시 알림 서비스로, 서버에서 클라이언트 (ios,Andoriod, WEB)로 메시지를 안정적으로 전송할 수 있게 해준다.
구현 방법
1. Firebase 프로젝트 설정
- Firebase Console에서 새 프로젝트 생성
- 앱 등록 및 구성 파일 다운로드 (google-services.json / GoogleService-Info.plist)
2. 클라이언트 앱 개발
- React Native 예시
//패키지 설치
npm install @react-native-firebas/app @react-native-firebase/messaging
//패키지 사용하기
import messaging from '@react-narive-firebase/messaging';
//FCM 토큰 가져오기
cosnt token = await messaging().getToken();
//포그라우드 메시지 수신
messaging().onMeesag(async remoteMesssage => {
console.log('메시지 수신:', remoteMessage);
}));
3. 앱 서버 개발
// NODE.JS + Firebase Admin SDK (Firebase Admin SDK를 사용할지 아니면 서버 프로토콜을 사용할지 결정가능)
import admin from 'firebase-admin';
await admin.messaging().send({
toekn:'device_token',
norifiaction : {
title : '제목',
body : '내용'
},
data: {
customKey:'value'
}
});
- FCM Token : 각 디바이스의 고유 식별자 (서버에 저장 필요)
- Notification : 시스템 알림 (자동 표시)
- Data : 백그라운드에서 처리할 커스텀 데이터
FCM 작동 원리
전체 흐름 : 서버 -> FCM 서버 -> 디바이스
핵심 메커니즘
- Persistent Connection : FCM 서버와 디바이스 간 항상 열린 소켓 유지
- Token 기반 라우팅 : 각 디바이스의 FCM 토큰으로 정확한 전달 보장
- 배터리 최적 : Google Play Services가 모든 앱의 푸시를 하나의 연결로 통합 관리
단계별 작동 과정
1. 초기 설정 (Registartion)
앱 실행 -> FCM SDK가 Google 서버에 등록 요청
-> FCM 고유 토큰 생성 및 반환
-> 앱이 토큰을 서버에 전송하여 저장
2. 메시지 전송 (Send)
서버 -> FCM 토큰 + 메시지를 FCM API로 전송
-> FCM 서버가 메시지 큐에 저장
3. 메시지 전달 (Delivery)
FCM 서버 -> 디바이스와 지속 연결(Persistent Connection)유지
-> 타켓 디바이스로 메시지 푸시
-> 디바이스 오프라인 시 최대 4주가 보관 후 재전송
4. 메시지 수신 (Receive)
- 앱 실행 중(Foreground): onMessage 핸들러 실행
- 앱 백그라운드: *시스템 트레이*어에 알림 자동 표시
- 앱 종료: 알림 표시 후 탭 시 앱 실행
* 시스템 트레이? *
시스템 트레이란 스마트폰 상단에서 아래로 스와이프하면 보이는 알림 목록 영역을 말한다.


시스템 트레이 알림 사용 예시
ex. 카카오톡
- 앱을 사용하고 있을 때 (Foreground) : 채팅 창에 바로 메시지 표시
- 앱을 끄고 다른 일을 할 때 (Background) : 화면 위에 "새 메시지"알림 팝업
'프론트엔드 노트' 카테고리의 다른 글
| 리엑트 1000줄 리팩토링 하기 (0) | 2025.11.13 |
|---|---|
| 비동기 프로그래밍 입문: async, Promise, await 쉽게 이해하기 (0) | 2025.11.12 |
| JavaScript: ?? vs || 연산자 비교 (0) | 2025.11.11 |
| 리엑트 라우팅 시스템 (1) | 2025.09.01 |
| React 디깅 (0) | 2025.08.12 |
