[React Native] Push Notification 받기(with. Firebase)

[React Native] Push Notification 받기(with. Firebase) - Step.1

2021. 7. 30. 11:44ㆍDev/React Native

* React Native에서 푸쉬알람 개괄

어플리케이션에서 받는 Push Notification은 크게 2가지로 종류를 나눌 수 있다.

1. 어플리케이션 내부에서 특정 이벤트 발생 시 보내는 Local Push Notification
2. 서버에서 이벤트 발생 시 특정 유저들의 디바이스에 보내는 Remote Push Notification

1번과 같은 Local Push Notification을 설정하는 경우(즉 특정 시간대에 변동 없는 메시지만 보내거나 다른 유저와의 상호작용이 없는 Notification 같은 경우)는 단순히 react-native-push-notification을 사용하면 된다.

해당 Node Module은 아래에서 자세하게 확인 할 수 있다.

https://github.com/zo0r/react-native-push-notification

GitHub - zo0r/react-native-push-notification: React Native Local and Remote Notifications

React Native Local and Remote Notifications. Contribute to zo0r/react-native-push-notification development by creating an account on GitHub.

github.com

지금 할 내용은 서버에서 특정 유저 혹은 디바이스에 Push Notification을 뿌리는 것이다.

예를 들면, 특정 카테고리의 게시글이 작성 되었을 때 그 카테고리를 구독하는 독자에게 Push를 보낸다거나, 아니면 본인 게시글에 댓글이 달렸을 때 등.. 이러한 이벤트가 발생했을 때는 서버단에서 디바이스를 특정하여 메시지를 보내야 하기에, Remote Push Notification을 사용해야한다.

글을 읽기 전에 먼저 알아둬야 할 내용이 있다.

1. Remote Push Notification을 보내기 위해서는 반드시 각 Device의 고유 토큰(id)값이 필요하다.
2. 이 토큰값으로 Push Notification을 보내기 때문에, 만약 특정 유저에게 보내고 싶다면 해당 유저의 DB에 DeviceToken 컬럼을 추가하여 이 값으로 보내줘야 하는 것이다.
3. 일반적으로 RN에서 Push Notification을 사용할 때, FCM(Firebase Cloud Messaging)을 주로 이용한다. 해당 서비스는 Push Notification을 전송할 때는 무료이다.
4. 이 글에서는 가장 Reference가 많은 FCM을 이용한 Remote Push Notification을 구현할 것이다. 그 외의 여러가지 방법도 있을 것이다.

본격적으로 RN에 Push Notification을 구현하기 전에 설정해야 할 것들이 굉장히 많다. 해당 설정을 진행하지 않으면, 정상적으로 Push Notifcation을 받을 수 없기 때문에 반드시 진행해야 한다.

크게 설정을 해야 할 것들은 아래와 같다.

1. Firebase 설정 - 프로젝트 생성 / Android 및 IOS App 등록 / Firebase Key 발급 / 어플 인증 Key 발급
2. Android 설정 - Gradle 설정 / Firebase Key 설정
3. IOS 설정 - AppDelegate 설정 / APN 인증서 발급 및 등록 / Firebase Key 설정 / Notification Capability 설정

굉장히 설정해야 할 것들이 많기 때문에, 차근차근 해야한다. 그리고 위의 분류는 순서가 아닌, 대분류 이기 때문에 크게 순서는 상관 없으나 기본적으로 Firebase는 설정을 끝마치고 Android 설정 및 IOS 설정을 진행해야 한다.

먼저 Firebase부터 설정해보자.

* Firebase에 프로젝트 등록하기🔥

먼저 Firebaes Console로 들어가서 프로젝트를 생성해야한다.

https://console.firebase.google.com/

로그인 - Google 계정

하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인

accounts.google.com

콘솔로 들어가면 아래와 같은 화면이 나올건데, 프로젝트를 처음 생성한다면 화면이 조금 다를 수 있으니 참고하면 된다.

프로젝트를 추가하면 아래와 같은 화면들이 나올텐데, 어플리케이션 이름을 잘 적고 진행하면 된다. Step3의 애널리틱스 위치는 대한민국으로 설정하면 된다.

이렇게 프로젝트를 잘 생성했으면 해당 프로젝트 창으로 넘어갈텐데, 여기서 Android 및 IOS 어플리케이션을 등록하여 사용하면 된다. 어플리케이션 등록은 다음 글에서 진행하겠다.

* 마무리

어플을 등록하고 나면, Firebase 콘솔 내에서 Server key를 확인할 수 있고, Push Notification도 보내볼 수 있다.

여기서 확인한 Server Key와 Device Token을 이용하여 HTTP Post를 통해 Push Message에 Data를 담아서 보낼 수 있다. 이렇게 담아서 데이터를 보내서, 푸쉬 알람을 클릭했을 때 어플리케이션에서 어떤 Event나 Action을 발생 시킬 수 있을 것이다.

이후에 작성할 내용이지만, 미리 말하자면 HTTP Post를 할 때 레거시를 이용하여 전송할 것이다.

그 이유로는 1. 레퍼런스가 많고, 2. 사용이 간단하다.

사용법은 아래와 같이 Post를 보내면 된다.

//post url
https://fcm.googleapis.com/fcm/send

//Header
Authorization : `key=${SERVER_KEY}`
Content-Type : application/json

//Body
{
	to : DEVICE_TOKEN,	//Push Notification을 전송할 디바이스 고유 token
    notification : {
    	title : 푸쉬 알람 제목,
        body : 푸쉬 알람 내용,
        ...
    },
    data : {
    	... 	//원하는 데이터를 [key, value] 쌍으로 보내면 됨
    }
}

푸쉬에 성공하면 출력 메시지는 아래와 같다.