• 가상 기기에서는 전송이 되지만, 실제 기기에서는 전송이 안되고 있었음

useEffect(() => {
    if (!isapp) return;
    const listener = (event: any) => {
      const { data, type } = JSON.parse(event.data);
      switch (type) {
        case 'FCM_TOKEN':
          postFCMToken({ token: data }).then(() => {
            alert(data);
          });
      }
    };
    document.addEventListener('message', listener);
    window.addEventListener('message', listener);
    return () => {
      document.removeEventListener('message', listener);
      window.removeEventListener('message', listener);
    };
  }, [isapp]);

기존 코드입니다. postFCMToken은 axios를 이용해서 서버에 FCM토큰 값을 전다하는 함수입니다. document.addEventListener에는 함수가 등록이 안되는 걸까?

경우의 수

1. document.addEventListener에 listener가 등록이 안되었다.
   • alert디버깅해보니 잘된다.
2. document.addEventListener에 함수가 등록이 안되었다.
   • alert디버깅해보니 잘된다.
3. post메소드에 문제가 있다.
   • 가상 기기에서 잘되는 걸로 봐서 api의 문제는 아니다.
   • error를 alert찍어보니 Network Error란다. 다른 api는 잘되는데 왜 post notification/tokens api만 에러가 뜰까? useEffect라서?
   • 처음 앱을 틀었을 때 가끔씩 grouping게시글을 못가져와서 에러가 뜰 때가 있다. 이 이슈와 연관이 있는듯하다.

결론은, CORS문제였다. 다른 api는 잘 되는데 이 api만, 휴대폰에서만 안되는 이유가 바로 이것이었다. 알림 api만 서버 분리를 한 까닭에, 알림 서버에 아직 CORS 설정이 안되어 있어 Network Error가 발생한 것이었다.

서버에 곧장 전달하여 CORS문제를 말씀드렸다.

결론

실제 앱에서 디버깅 하는 것은 쉽지 않다. 에러 console을 찍어보지 못하고, 개발 서버에 배포 > alert메시지로 에러 확인을 해야 한다. 배포하는데만 한 번에 3분 가까이 걸리고, 또 디버깅을 하려면 또 3분을 기다려야 한다. 그래서, 우선 디버깅이 가장 편하고 익숙한 웹에서 디버깅을 해보자.