푸시 알림을 사용하면 사용자가 현재 관련 애플리케이션을 사용하고 있는지 여부에 관계없이 정보, 업데이트 또는 개인화된 커뮤니케이션을 사용자의 디바이스로 즉시 전송할 수 있습니다. 이러한 지속적인 연결은 사용자의 지속적인 참여를 보장합니다.
처음에는 브라우저가 웹 애플리케이션에 관한 알림을 가로채서 수신한 다음 관련 소프트웨어로 전송합니다.
Firebase 프로젝트 설정
‘다음 간단한 단계에 따라 Firebase 프로젝트를 시작하고 설정하세요’라는 대체 문구를 제공할 수 있습니다.
⭐ Firebase 개발자 콘솔 로 이동하여 Google 이메일 주소로 로그인한 후 콘솔로 이동 버튼을 클릭하여 콘솔 개요 페이지로 이동합니다.
⭐ 콘솔 개요 페이지에서 프로젝트 만들기 버튼을 클릭하여 새 프로젝트를 만듭니다. 그런 다음 프로젝트 이름을 입력합니다. 
⭐ 프로젝트가 성공적으로 생성되면 프로젝트의 개요 페이지로 이동합니다. API 키를 생성하려면 Firebase에 애플리케이션을 등록해야 합니다. 앱을 등록하려면 웹 아이콘을 클릭하고 앱 이름을 입력한 후 앱 등록 버튼을 클릭합니다. 
React 애플리케이션 등록에 성공하면 Firebase 구성 코드를 확보하여 복제합니다.
Firebase 클라우드 메시징(FCM) 서비스 구성
프로그램을 Firebase에 등록한 후, 다음 단계는 Firebase 클라우드 메시징(FCM) 플랫폼을 설정하는 것입니다.
⭐ 프로젝트 설정 페이지로 이동합니다. 
⭐ 다음으로 프로젝트 설정 페이지에서 클라우드 메시징 탭을 클릭합니다. Firebase 클라우드 메시징은 애플리케이션 ID 키 쌍을 사용하여 외부 푸시 서비스와 연결합니다. 따라서 고유한 ID 키를 생성해야 합니다. 
⭐ 클라우드 메시징 설정에서 웹 구성 섹션으로 이동한 후 키 쌍 생성 버튼을 클릭하여 고유 키를 생성합니다. 
React 앱 설정
React 애플리케이션을 설치한 후, React 프레임워크 내에서 푸시 알림을 구현하기 위해 Firebase 및 react-hot-toast 패키지를 도입합니다.
npm install firebase react-hot-toast
이 프로젝트의 소스 코드의 출처는 GitHub에 호스팅된 리포지토리로 거슬러 올라갈 수 있습니다.
Firebase 및 클라우드 메시징 서비스 구성
`src` 디렉터리에 `firebase.js` 파일을 새로 생성하고 다음 코드를 추가하세요:
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
Firebase 구성 개체가 프로젝트 설정 페이지에서 가져온 새 개체로 대체되어 앱 내에서 Firebase 클라우드 메시징(FCM)에 필요한 구성 요소를 사용할 수 있습니다. 제공된 코드는 Firebase 인스턴스를 설정하고 그에 따라 클라우드 메시징 객체를 초기화합니다.
알림의 사용자 권한 요청 관리
React 애플리케이션이 Firebase 클라우드 메시징의 푸시 알림을 수락하도록 하려면 사용자 권한 요구 사항을 해결해야 합니다.
주어진 문장을 좀 더 설득력 있게 바꿔서 명확하게 설명해 주세요.
메시징 객체를 초기화한 후 Firebase와 통합된 메시징 시스템을 통해 메시지를 보내는 기능을 활용하기 위해 다음 코드 스니펫을 Firebase JavaScript SDK에 추가하고 싶을 수 있습니다. 이 코드는 다음과 같이 프로젝트의 `firebase.js` 파일의 해당 섹션에 추가할 수 있습니다:
export const requestPermission = () => {
console.log("Requesting User Permission......");
Notification.requestPermission().then((permission) => {
if (permission === "granted") {
console.log("Notification User Permission Granted.");
return getToken(messaging, { vapidKey: `Notification_key_pair` })
.then((currentToken) => {
if (currentToken) {
console.log('Client Token: ', currentToken);
} else {
console.log('Failed to generate the app registration token.');
}
})
.catch((err) => {
console.log('An error occurred when requesting to receive the token.', err);
});
} else {
console.log("User Permission Denied.");
}
});
}
requestPermission();
사용자에게 알림을 보낼 수 있는 권한이 요청되고 그에 따른 승인 상태가 코드에 의해 처리됩니다. 사용자가 승인을 부여하면 getToken 메서드를 사용하여 등록 토큰을 얻습니다.
등록 토큰을 통해 알림 수신자에게 고유 식별자가 할당되며, 이 고유 식별자는 이후 Firebase 클라우드 메시징 설정 패널을 통해 알림 캠페인을 설정하는 데 사용될 수 있습니다.
웹 구성 섹션에서 이전에 생성한 실제 키 쌍으로 자리 표시자 “알림\_키\_쌍”을 대체해야 합니다.
알림 리스너 정의
모든 종류의 수신 알림을 수용하려면 수신 알림을 모니터링하는 메시지 리스너와 모든 메시징 발생을 시작하는 콜백 기능을 설정하는 것이 중요합니다.
Firebase.js 파일에 다음 코드를 포함하세요.
export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
resolve(payload);
});
});
본 함수는 특히 푸시 알림을 위한 메신저 리스너를 설정하여 애플리케이션이 포커스를 맞추고 있는 동안 푸시 알림을 수신하면 `onMessageListener` 내부의 함수가 활성화되도록 합니다.
수신 알림은 메시지 페이로드에 포함될 메시지의 제목 및 내용과 같은 정보를 포함할 것이다.
Firebase 메시징 서비스 워커 정의
FCM을 구현하려면 수신 푸시 알림을 관리하기 위해 Firebase 메시징 서비스 워커를 활용해야 합니다.
서비스 워커는 웹 애플리케이션의 푸시 알림을 관리하기 위해 백그라운드에서 은밀하게 작동하는 JavaScript 파일입니다. 이를 통해 사용자가 세션을 종료했는지, 다른 탭이나 창으로 포커스를 이동했는지, 브라우저를 완전히 닫았는지 여부에 관계없이 해당 애플리케이션이 알림을 수신하고 표시할 수 있습니다.
“firebase-messaging-sw.js”가 무엇을 의미하며 어떤 종류의 코드가 포함되어야 하는지 자세히 설명해 주세요.
importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
//the Firebase config object
const firebaseConfig = {
"configuration information"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
본 코드는 React 애플리케이션 내에서 Firebase 클라우드 메시징을 위한 서비스 워커를 설정하여 알림의 관리 및 표시를 용이하게 합니다.
알림 컴포넌트 생성
“/src” 디렉토리 내에 “components/Notification.js”라는 이름의 파일을 새로 생성한 후 다음 코드를 포함시켜주세요.
import React, { useState, useEffect } from 'react';
import { Toaster, toast } from 'react-hot-toast';
import { requestPermission, onMessageListener } from '../firebase';
function Notification() {
const [notification, setNotification] = useState({ title: '', body: '' });
useEffect(() => {
requestPermission();
const unsubscribe = onMessageListener().then((payload) => {
setNotification({
title: payload?.notification?.title,
body: payload?.notification?.body,
});
toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
duration: 60000,
position: 'top-right', section of the browser page
});
});
return () => {
unsubscribe.catch((err) => console.log('failed: ', err));
};
}, []);
return (
<div>
<Toaster />
</div>
);
}
export default Notification;
이 코드는 푸시 알림을 관리하는 요소를 인스턴스화하며, 최종 사용자에게 메시지를 표시하기 위해 react-hot-toast 라이브러리를 사용합니다.
이 컴포넌트는 사용자 권한을 요청하고, onMessageListener 함수를 사용하여 수신 메시지를 수신 대기하며, 기본적으로 브라우저 페이지의 오른쪽 상단 섹션에 수신된 제목과 본문이 포함된 토스트 알림을 1분 동안 표시합니다. 공식 react-hot-toast 문서와 CSS 위치 속성을 사용하여 알림을 추가로 사용자 정의할 수 있습니다.
마지막으로 App.js 파일을 수정하여 알림 컴포넌트를 통합합니다.
import './App.css';
import Notification from './components/Notification';
function App() {
return (
<div className="App">
<header className="App-header">
<Notification />
</header>
</div>
);
}
export default App;
푸시 알림 기능 테스트
개발 서버를 시작하고 브라우저에서 웹 주소
권한을 부여하면 클라이언트 토큰이 생성되어 브라우저 콘솔에 기록됩니다. 이 토큰은 지정된 React 애플리케이션에 캠페인 알림을 전송하기 위한 수단으로 사용됩니다.
클라이언트 토큰 복사를 진행한 후 프로젝트 개요 페이지로 이동하여 Firebase 개발자 콘솔로 이동하세요. 이 페이지에 도착하면 Clou
를 찾아 “첫 번째 캠페인 만들기” 버튼을 클릭한 후 Firebase를 사용하여 알림을 만드는 옵션을 선택합니다. 그런 다음 제공된 필드에 알림의 제목과 메시지를 입력합니다.”디바이스 미리 보기” 섹션에서 “테스트 메시지 보내기” 버튼을 클릭하여 알림 데모를 전송합니다.
클라이언트 토큰을 복사하여 팝업 창 내의 지정된 필드에 붙여넣은 다음 “테스트”를 클릭하여 푸시 알림을 발송하세요.
애플리케이션의 범위 내에 있는 경우 푸시 알림을 받을 수 있습니다. 그러나 사용자의 위치가 파악되지 않는 경우에도 백그라운드 알림을 제공합니다.
Firebase 클라우드 메시징 서비스를 사용하여 푸시 알림 보내기
웹 및 모바일 애플리케이션의 전반적인 사용성을 개선하는 데 중요한 요소인 푸시 알림의 통합에 대해 이 매뉴얼에서 설명했습니다. 사용자 권한 부여 및 알림 수신기 설정과 관련된 고려 사항과 함께 Firebase를 통해 푸시 알림을 구현하는 프로세스가 설명되어 있습니다.
Firebase 클라우드 메시징 API의 기능을 활용하면 시간에 민감한 정보와 사용자 정의된 메시지를 React 애플리케이션에 효율적으로 배포할 수 있습니다.