eatthefrog

FCM(Firebase Clouding Messageing) 본문

프론트엔드 노트

FCM(Firebase Clouding Messageing)

eater_forg 2025. 11. 12. 13:37



개념

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 핸들러 실행
- 앱 백그라운드: *시스템 트레이*어에 알림 자동 표시
- 앱 종료: 알림 표시 후 탭 시 앱 실행

 

* 시스템 트레이? *

시스템 트레이란 스마트폰 상단에서 아래로 스와이프하면 보이는 알림 목록 영역을 말한다.

 

Android : 화면 상단의 알림 영역 (Notification Bar) iOS : 알림 센터 (Notification Center)

 

시스템 트레이 알림 사용 예시

ex. 카카오톡

- 앱을 사용하고 있을 때 (Foreground) : 채팅 창에 바로 메시지 표시

- 앱을 끄고 다른 일을 할 때 (Background) : 화면 위에 "새 메시지"알림 팝업