[RN]push알림 구현하기(react-native-push-notification) feat. Chat GPT

사이드프로젝트의 알람앱을 만들던중 이제는 가장 중요하고 핵심적인 기능인 알림기능을 구현해야할 때가 왔다.

알람이 울릴때 push 알림이 필요한데 이 push notification기능에는 크게 두가지 방식이 있다.

원격알림과 로컬알림.

원격알림은 서버에서 알림을 관리하지만 로컬알림은 서버가 필요하지 않다.

알람기능에 서버의 사용이 굳이 필요할까 싶어 로컬push 방법을 사용하기로 했다.

 

여러 라이브러리를 찾던 중 요즘 핫한 chat GPT를 이용해보았다.

역시 똑똑한 해결사.. 코드예시까지 알려주고, 마지막엔 주의사항도 잊지않고 알려준다. 

 

 

어쨌든 가장 대중적으로 사용하는 라이브러리이기에 react-native-push-notification을 사용해보기로 했다. 

 

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

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

 

공식문서를 보며 android와 ios의 초기설정을 해줬다.

2년전이 마지막 업데이트라 그런지 추가해줘야할것들이 약간씩 있었다.

 

그중 안드로이드가 빌드가 안되는 문제가 있었는데 이것때매 이틀을 애먹었다. 

 

호옥시 나와 같은 증상에 이 글을 읽는 분이 있다면 도움이 되었으면 좋겠다.

참고로 나의 리액트 환경은 아래와 같다. 

   "react": "18.2.0",
   "react-native": "0.71.0"

 

우선 핵심적인 오류는 AndroidManifest.xml 파일에서 발생했다.

 

깃헙 Issues를 샅샅히 찾아가며 하나씩 시도해 보았다.

 

1. android/app/src/main/AndroidManifest.xml 의 상단에 아래의 권한을 추가한다.

    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" /> 
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

 

2. android/app/src/main/AndroidManifest.xml의 receiver 코드 끝에 android:exported="false"를 추가한다.(아래와 같이)

     <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" android:exported="false" />
     <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" android:exported="false"/>
     <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver" android:exported="false">

 

이렇게 수정해주었더니 안드로이드 빌드는 문제없이 실행되었다.

 

하지만 push알림은 여전히 작동이 안되었는데.. 이유는 localNotificationSchedule를 실행시키려면 

channelId가 필수로 있어야하는데 내가 이부분을 간과했었다...🤦

 

 

여담으로 ios에서는 없어도 작동을 하길래 채널아이디가 꼭 있어야하는지 물어봤는데 똑똑이 chat gpt가 이유를 알려주었다. 

오홍 그렇군~!

 

[채널생성하는 방법]

1. createCannel 메소드를 사용하여 채널을 만들어준뒤 

  PushNotification.createChannel(
    {
      channelId: 'channel-id', // 채널 ID
      channelName: 'Channel Name', // 채널 이름
      channelDescription: 'Channel Description', // 채널 설명
      soundName: 'default', // 알림음
      importance: 4, // 중요도 (1 ~ 5)
      vibrate: true, // 진동 여부
    },
    created => console.log(`Channel ${created ? '' : 'not '}created`), // 생성 여부 출력
  );

2. localNotificationSchedule의 메소드에 chnnelId를 넣어준다.

 PushNotification.localNotificationSchedule({
    channelId: 'channel-id',
    title: '알람', // 제목
    message: 'My Notification Message', // 내용
    date: new Date(Date.now() + 10 * 1000), // 예약 시간 (현재 시간으로부터 10초 후)
    allowWhileIdle: true, // 기기가 활성화되지 않은 상태에서도 알림을 보낼 수 있도록 허용
    repeatType: 'day', // 알림 반복 주기 (day, hour, minute 중 하나)
  });

 

3. 안드로이드 스튜디오 - android SDK - SDK Tools - Google Play Licensing Library 체크 확인

이렇게 하면 안드로이드에서도 무난하게 작동이 된다.

 

---