1. 문제

푸쉬알림을 구현하는데, Firebase 사이트에서 가상기기(iOS)의 토큰을 입력하면 푸쉬 알림이 잘 뜬다. 그런데, 서버 측에서 이 가상기기로 푸쉬 알림을 전송하면 알림이 뜨지 않는다. 아직 프론트 이슈인지, 백엔드 이슈인지 확실하지는 않지만, 확실하게 프론트단의 이슈가 아님을 증명하기 위해 가상기기아 아닌 실제 휴대폰에서 테스트를 먼저 해보려 한다.

FCM 토큰값은 기기마다 고유한 값이기에, 가상기기가 아닌 휴대폰에서 발급받은 토큰 값을 알아야 한다. FCM푸쉬 알림의 과정은 다음과 같다.

1. React Native에서 Firebase 서버에 토큰 요청하여 발급받음
2. React Native > React로 발급받은 FCM 토큰 전달
3. React는 이 FCM토큰 값을 백엔드 서버에 전달
4. 백엔드 서버는 DB에 FCM토큰 값을 저장
5. 푸쉬 알림이 발생하면, 백엔드 서버는 Firebase 서버에 해당 유저의 FCM토큰값을 전달하며 알림을 요청
6. Firebase 서버는 해당 FCM토큰값을 가진 유저의 휴대폰에 푸쉬 알림을 전송

이 때, React가 익숙한 나에게는 2번에서 React에서 FCM 토큰을 전달받아 이 값을 우리에게 넘겨주는 것이 가장 편하다고 생각하였다. 이걸 어떻게 해야할까. Alert를 띄어봤는데, 이 방식으로 하니 길고 복잡한 토큰 문자열을 복사가 안되는 것이다. 그래서, 다른 방안은 모색해야 한다.

2. 해결 방법

다음과 같은 해결 방법들이 떠올랐다.

1. 백엔드 팀에 요청하여 하나의 api 만들어 달라고 하기

   • 토큰 값 확인하는 api

2. Firebase 서버리스 서비스 이용하기

3. 백엔드 서버를 따로 내가 띄우기

4. Alert 외에 복사 가능한 방법으로 웹뷰에 띄우기

   • 해당 토큰 값으로 redirect 시키기 → 주소 복사

   • 해당 토큰 값을 searchParams로 넘기기 → navigator.clipboard.writeText메서드를 이용하여 누르면 복사되도록 하기

     // get-value/page.tsx
     'use client';
     import { Flex } from '@/components/Layout';
     import { copyToClipboard } from '@/utils/copyToClipboard';
     
     export default function page({ searchParams }: any) {
       const { value } = searchParams;
       return (
         <Flex justify="center" align="center" className="h-200" onClick={() => copyToClipboard(value)}>
           {value}
         </Flex>
       );
     }
     

5. navigator.clipboard.writeText 이용하여 복사

   • 4번처럼 굳이 페이지 이동을 안해줘도 된다.