브라우저에서 브랜드의 알림이나 업데이트를 구독한 적이 있었는데 데스크톱 화면 오른쪽 상단에 주기적으로 팝업되는 알림이 어떻게 작동하는지 궁금하여 사용해 봐야겠다고 생각했습니다. 그 기능이 "웹 푸시"라는 기능이었고 최근 웹푸시를 지원하는 브라우저가 많아지면서 이에 대한 관심이 많아지고 있다는 것을 알고 직접 기능을 개발하면서 공식 문서나 제대로 정리되어 있는 블로그가 없다는 것을 느꼈습니다. 이에 자주 쓰던 React환경에서 PWA를 적용하여 PC나 모바일에서 원활하게 웹푸시를 보낼 수 있도록 하는 FCM 사용법을 모든 사람들에게 알려주고 싶어 아이템을 선정하게 되었습니다.
# 개발하면서 발생했던 문제점
## 1. <StrictMode> must be deleted because token issuance requests are made twice.
StrictMode가 적용되어있어 api콜(token발급)이 두번씩 되는 오류가 있었습니다. <StrictMode>삭제 하여 해결하였습니다.
## 2. You must manage the key received from fcm through the .env file.