인프런 커뮤니티 질문&답변

제가 이해한 방식이 맞는지 체크 부탁드립니다!!

1. 프론트엔드에서 PushNotification.createChannel로 알림 채널을 생성

PushNotification.createChannel(
  {
    channelId: 'todo', // 채널 ID
    channelName: '해야 할 일', // 채널 이름
    channelDescription: '해야 할 일을 알리는 채널', // 채널 설명
    importance: 'high', // 알림 중요도 설정
    soundName: 'default', // 알림 사운드
    vibrate: true, // 진동 설정
  },
  (created) => console.log(`채널 생성됨: ${created}`) // 채널이 생성된 후 콜백
);

여기서 importance high를 하면, foreground 상태에서도, 푸시알림이 오게됨

2. 프론트엔드에서 백엔드 통신시 (이미, FCM 토큰을 전달했다는 가정) 만약, Todo를 만든다는 가정
POST: /api/v1/todo

{
  title: '할 일 제목',
  content: '할 일 내용',
// 위에서 설정한 채널 아이디를 같이 보내줌
// 이걸 같이 보내주어야 하나요??
// 아니면 백엔드에 이런 채널이 있다고만 알려줘도 될까요?
  channelId: 'todo',
}

3. 서버 -> 프론트

   
   POST: /api/v1/todo
   해당 엔드포인트로, 응답이 올 때, 푸시 알림을 전송해줌 (채널: todo)로

   
   안드는 channel 개념이 있고
   iOS는 channel 개념이 없으나, category가 이를 대신. 이게 맞을까요?

    

messaging()
  .send({
    token: FCMToken, // 클라이언트의 FCM 토큰
    notification: {
      title: '할 일이 생성되었습니다',
      body: '할 일 내용을 확인하세요',
    },
    android: {
      notification: {
        channelId: 'todo', // 채널 ID를 지정하여 알림을 보냄
        vibrateTimingsMillis: [0, 500, 500, 500], // 진동 패턴
        priority: 'high', // 높은 중요도 설정
        defaultVibrateTimings: false, // 기본 진동 사용 여부
      },
    },
    apns: {
      payload: {
        aps: {
          sound: "default",
          category: 'todo',
        },
      },
    },
  })
  .then(console.log)
  .catch(console.error);

todo라는 채널로, 데이터를 보내줍니다.

4. 프론트

받은 푸시알림은

PushNotification.configure({
  onNotification: function (notification) {
    console.log('알림 수신:', notification);

    // 알림이 수신되었을 때 처리
    PushNotification.localNotification({
      channelId: notification.channelId, // 서버로부터 받은 채널 ID
      title: notification.title,
      message: notification.body,
      importance: 'high',
      priority: 'high',
    });
  },
});

이 쪽에서 데이터가 들어오므로, 채널별로 분기 처리를 하여 작업해주면 되나요??

채널이 여러개일 경우, 계속 위의 작업을 반복하면 되는게 맞는지 궁금합니다!

이렇게 백엔드와 프론트엔드가 동작하는게 맞는지 AI 답변으로도 잘 이해가 되지 않아 확인차 다시 답글 남깁니다!!

제가 원하는 형태는 아래와 같이 foreground 형태로 나오는 것 입니다

일단 importance: 'high'로 하시면 알아서 알림이 뜰 것이고요. 기본 알림이 마음에 안 들어 수정해야 하는 경우에는 백엔드로부터 push 알림이 오면 onNotification에서 localNotification 띄워주시면 됩니다. notification 객체 안에 정보를 통해 분기처리 하시면 되고요. 다만 localNotification이 뜨면 다시 onNotification 콜백이 호출되므로 localNotification의 경우에는 onNotification에서 아무 것도 하지 않게 막아두셔야 합니다(무한 호출 방지).

백엔드에 이미 todo라고 channelId 하드코딩해두었으므로 프론트에서는 channelId를 보내실 필요가 없습니다.

PushNotification.localNotification({
    channelId: Platform.OS === 'android' ? channelId : undefined, // Android 채널
    title: "My Notification",
    message: "This is a test notification",
    playSound: true,
    soundName: Platform.OS === 'ios' ? "customSound.caf" : "default",
    category: "categoryID", // iOS에서 카테고리 설정
});

감사합니다!!!!!

import {LogBox, Platform} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {DevToolsBubble} from 'react-native-react-query-devtools';
import messaging from '@react-native-firebase/messaging';
import PushNotification, {Importance} from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';

import Toast, {
  BaseToast,
  BaseToastProps,
  ErrorToast,
} from 'react-native-toast-message';

import AppSetupContainer from './src/containers/AppSetupContainer.tsx';
import RootNavigator from './src/navigators/root/RootNavigator.tsx';

LogBox.ignoreLogs(['Sending']);

const toastConfig = {
  success: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      style={{borderLeftColor: 'pink'}}
      contentContainerStyle={{paddingHorizontal: 15}}
      text1Style={{
        fontSize: 15,
        fontWeight: '400',
      }}
    />
  ),
  error: (props: BaseToastProps) => (
    <ErrorToast
      {...props}
      text1Style={{
        fontSize: 17,
      }}
      text2Style={{
        fontSize: 15,
      }}
    />
  ),
};

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Messaging handled in the background', remoteMessage);
  console.log('underground', remoteMessage);
});

// Must be outside of any component LifeCycle (such as `componentDidMount`).
PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: function (token) {
    // 기기마다 고유한 토큰
    console.log('TOKEN:', token);
  },

  // (required) Called when a remote is received or opened, or local notification is opened
  onNotification: function (notification: any) {
    console.log('NOTIFICATION:', notification);

    // iOS에서 foreground 상태이고, 알림이 로컬 알림에서 온 것이 아니라면만 로컬 알림을 생성
    if (
      Platform.OS === 'ios' &&
      notification.foreground &&
      !notification.userInteraction // 로컬 알림으로 인한 상호작용이 아닌 경우
    ) {
      PushNotification.localNotification({
        title: notification.title,
        message: notification.message,
        playSound: true,
        soundName: 'default',
        priority: 'high',
        vibrate: true,
      });
    }

    // 알림 처리 완료 후 마무리
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },

  // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
  onAction: function (notification) {
    console.log('ACTION:', notification.action);
    console.log('NOTIFICATION:', notification);

    // process the action
  },

  // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
  onRegistrationError: function (err) {
    console.error(err.message, err);
  },

  // IOS ONLY (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  // Should the initial notification be popped automatically
  // default: true
  popInitialNotification: true,

  /**
   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
   * - if you are not using remote notification or do not have Firebase installed, use this:
   *     requestPermissions: Platform.OS === 'ios'
   */
  requestPermissions: true,
});

// PushNotification 채널 생성 함수
const createNotificationChannel = (
  channelId: string,
  channelName: string,
  channelDescription: string,
) => {
  PushNotification.createChannel(
    {
      channelId,
      channelName,
      channelDescription,
      importance: Importance.HIGH,
      soundName: 'default',
      vibrate: true,
    },
    (created: boolean) =>
      console.log(`channel ${channelName} 생성, ${created}`),
  );
};

// 여러 채널 생성
const channels = [
  {id: 'TODO', name: '할 일', description: '할 일 알림'},
  {id: 'PLAN', name: '일정', description: '일정 알림'},
  {id: 'COMMENT', name: '댓글', description: '댓글 알림'},
  {id: 'POST', name: '게시글', description: '게시글 알림'},
  {id: 'CHATROOM', name: '채팅', description: '채팅 알림'},
  {id: 'MOIM', name: '모임', description: '모임 알림'},
  {id: 'REVIEW', name: '리뷰', description: '리뷰 알림'},
  {id: 'EVENT', name: '이벤트', description: '이벤트 알림'},
];

// 채널 생성 반복
channels.forEach(channel => {
  createNotificationChannel(channel.id, channel.name, channel.description);
});

function App() {
  return (
    <AppSetupContainer>
      <GestureHandlerRootView>
        <RootNavigator />
        <Toast config={toastConfig} />
        {/*<DevToolsBubble />*/}
      </GestureHandlerRootView>
    </AppSetupContainer>
  );
}

let AppEntryPoint = App;

if (process.env.STORYBOOK_ENABLED) {
  AppEntryPoint = require('./.ondevice').default;
}

if (__DEV__) {
  require('./ReactotronConfig');
}

export default AppEntryPoint;

1. 아래와 같이 flag를 세워 재귀를 해결하는 방식을 채택해서 코드를 수정해보았습니다.
   

   
   import {LogBox, Platform} from 'react-native';
   import {GestureHandlerRootView} from 'react-native-gesture-handler';
   import {DevToolsBubble} from 'react-native-react-query-devtools';
   import messaging from '@react-native-firebase/messaging';
   import PushNotification, {Importance} from 'react-native-push-notification';
   import PushNotificationIOS from '@react-native-community/push-notification-ios';
   
   import Toast, {
     BaseToast,
     BaseToastProps,
     ErrorToast,
   } from 'react-native-toast-message';
   
   import AppSetupContainer from './src/containers/AppSetupContainer.tsx';
   import RootNavigator from './src/navigators/root/RootNavigator.tsx';
   
   LogBox.ignoreLogs(['Sending']);
   
   const toastConfig = {
     success: (props: BaseToastProps) => (
       <BaseToast
         {...props}
         style={{borderLeftColor: 'pink'}}
         contentContainerStyle={{paddingHorizontal: 15}}
         text1Style={{
           fontSize: 15,
           fontWeight: '400',
         }}
       />
     ),
     error: (props: BaseToastProps) => (
       <ErrorToast
         {...props}
         text1Style={{
           fontSize: 17,
         }}
         text2Style={{
           fontSize: 15,
         }}
       />
     ),
   };
   
   messaging().setBackgroundMessageHandler(async remoteMessage => {
     console.log('Messaging handled in the background', remoteMessage);
     console.log('underground', remoteMessage);
   });
   
   let isNotificationHandled = false; // 플래그 초기화
   
   // Must be outside of any component LifeCycle (such as `componentDidMount`).
   PushNotification.configure({
     // (optional) Called when Token is generated (iOS and Android)
     onRegister: function (token) {
       // 기기마다 고유한 토큰
       console.log('TOKEN:', token);
     },
   
     // (required) Called when a remote is received or opened, or local notification is opened
     onNotification: function (notification: any) {
       if (isNotificationHandled) {
         // 이미 처리된 알림이면 종료
         return;
       }
   
       console.log('NOTIFICATION:', notification);
   
       // iOS에서 foreground 상태이고, 알림이 로컬 알림에서 온 것이 아니라면만 로컬 알림을 생성
       if (
         Platform.OS === 'ios' &&
         notification.foreground &&
         !notification.userInteraction // 로컬 알림으로 인한 상호작용이 아닌 경우
       ) {
         PushNotification.localNotification({
           title: notification.title,
           message: notification.message,
           playSound: true,
           soundName: 'default',
           priority: 'high',
           vibrate: true,
         });
       }
   
       // 알림 처리 완료 후 플래그 설정
       isNotificationHandled = true;
   
       // 알림 처리 완료 후 마무리
       notification.finish(PushNotificationIOS.FetchResult.NoData);
     },
   
     // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
     onAction: function (notification) {
       console.log('ACTION:', notification.action);
       console.log('NOTIFICATION:', notification);
   
       // process the action
     },
   
     // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
     onRegistrationError: function (err) {
       console.error(err.message, err);
     },
   
     // IOS ONLY (optional): default: all - Permissions to register.
     permissions: {
       alert: true,
       badge: true,
       sound: true,
     },
   
     // Should the initial notification be popped automatically
     // default: true
     popInitialNotification: true,
   
     /**
      * (optional) default: true
      * - Specified if permissions (ios) and token (android and ios) will requested or not,
      * - if not, you must call PushNotificationsHandler.requestPermissions() later
      * - if you are not using remote notification or do not have Firebase installed, use this:
      *     requestPermissions: Platform.OS === 'ios'
      */
     requestPermissions: true,
   });
   
   // PushNotification 채널 생성 함수
   const createNotificationChannel = (
     channelId: string,
     channelName: string,
     channelDescription: string,
   ) => {
     PushNotification.createChannel(
       {
         channelId,
         channelName,
         channelDescription,
         importance: Importance.HIGH,
         soundName: 'default',
         vibrate: true,
       },
       (created: boolean) =>
         console.log(`channel ${channelName} 생성, ${created}`),
     );
   };
   
   // 여러 채널 생성
   const channels = [
     {id: 'TODO', name: '할 일', description: '할 일 알림'},
     {id: 'PLAN', name: '일정', description: '일정 알림'},
     {id: 'COMMENT', name: '댓글', description: '댓글 알림'},
     {id: 'POST', name: '게시글', description: '게시글 알림'},
     {id: 'CHATROOM', name: '채팅', description: '채팅 알림'},
     {id: 'MOIM', name: '모임', description: '모임 알림'},
     {id: 'REVIEW', name: '리뷰', description: '리뷰 알림'},
     {id: 'EVENT', name: '이벤트', description: '이벤트 알림'},
   ];
   
   // 채널 생성 반복
   channels.forEach(channel => {
     createNotificationChannel(channel.id, channel.name, channel.description);
   });
   
   function App() {
     return (
       <AppSetupContainer>
         <GestureHandlerRootView>
           <RootNavigator />
           <Toast config={toastConfig} />
           {/*<DevToolsBubble />*/}
         </GestureHandlerRootView>
       </AppSetupContainer>
     );
   }
   
   let AppEntryPoint = App;
   
   if (process.env.STORYBOOK_ENABLED) {
     AppEntryPoint = require('./.ondevice').default;
   }
   
   if (__DEV__) {
     require('./ReactotronConfig');
   }
   
   export default AppEntryPoint;
   
   

   이렇게 onNotification 내부에 선언하여 해결하는 방식이 맞는지, 조금 더 좋은 깔끔한 방식이 있는지 궁금합니다.
   그리고, 해당 방식으로 했을 떄, foreground 상태가 아닐때 푸시알림을 클릭하고, 다시 푸시알림을 보낼때 false로 계속 인식하여, 푸시알림이 오지 않는 현상이 발생합니다. 강사님은 어떤 식으로 이러한 문제점을 해결할려고 접근하셨는지 궁금합니다!
   
   
   2. 상단바에 보여줄 알림 개수 같은 경우는 원래는 소켓같은 것으로 구현할려했으나
   PushNotification.getApplicationIconBadgeNumber()와, setApplicationBadgeNumber() 메서드로 뭔가 구현 할 수 있을 것 같은데, 실제로도 이걸 사용해서 많이 구현하는지 궁금합니다.
   onNotification에서 호출 될 떄, 백엔드에서 주는 count 개수로, set을 한 후, 해당 알림을 보여주는 스크린에 들어왔을떄 useEffect로 다시 0으로 초기화하는, 이런식으로 구현해도 괜찮을지 더 좋은 방법이 있는지 궁금합니다!