그랜파 개발자의 프론트엔드 공부

92. FCM 알림 서비스 Source code1. src/firebase.js// src/firebase.jsimport { initializeApp } from 'firebase/app';import { getMessaging } from 'firebase/messaging';import { getAuth } from 'firebase/auth';import { getFirestore, collection } from "firebase/firestore";// Your Firebase configuration (from Firebase Console)const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_PROJECT_ID.fireb..

91. FCM 알림 서비스 개발 완료다음의 모든 과정을 완료하여 푸시 알림을 보내고 받을 수 있도록 완료하였습니다. 물론 현실에서 실제 사용하기에는 많이 부족한 가장 기본적인 기능 구현을 완료한 것입니다. firebase v9을 기본으로 구현하였습니다.ChatGPT가 시키는 대로 했습니다.1. 프로젝트 설정vue create my-fcm-3? Please pick a preset: Manually select features? Check the features needed for your project: Babel, PWA, Router, Vuex? Choose a version of Vue.js that you want to start the project with 2.x? Use history mod..

90. 알림에 링크 추가알림에 링크를 추가하고자 합니다.ChatGPT에게 물었습니다.How to put a link in onMessage()?onMessage()에 link를 넣는 방법은?ChatGPT To include a link in the notification displayed by onMessage() when using Firebase Cloud Messaging (FCM) with Firebase v9, you can modify the notification options to include a click_action or handle the click event manually. Here's how you can do it:Firebase v9에서 FCM(Firebase Cloud M..

89. 알림 수신 - Service Worker vs onMessage알림을 수신하는 방법은 Service Worker와 onMessage 두 가지가 있다고 합니다. 이들의 차이가 뭔지 물었습니다.ChatGPT에게 물었습니다.service worker와 onMessage의 관계는? ChatGPT The relationship between a service worker and the onMessage function in the context of Firebase Cloud Messaging (FCM) revolves around handling push notifications in both the foreground and background states of a web application. FCM..

88. 알림 수신다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.알림 수신 허가를 받고 Token 얻기Token을 firestore에 저장하기firebase functions cloud 함수를 이용하여 알림 보내기웹앱에서 알림을 받아 나타내기ChatGPT에게 물었습니다.Create a function to receive push notifications and display them on the screen.푸시 알람을 받아 화면에 나타내는 기능을 만들어 줘.ChatGPTTo create a function that receives push notifications and displays them on the screen, you need to follow these steps:푸시 알림을 수신하..

87.CORS 문제 해결ChatGPT가 시키는 대로 했을 때 다음과 같은 오류가 발생하였습니다.Access to fetch at 'https://your-project-id.cloudfunctions.net/sendPushNotification' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the..

86. 푸시 알림 전송다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.알림 수신 허가를 받고 Token 얻기Token을 firestore에 저장하기firebase functions cloud 함수를 이용하여 알림 보내기웹앱에서 알림을 받아 나타내기ChatGPT에게 물었습니다.Create a function to send push notifications in firebase functions.firebase functions에서 푸시 알림을 보내는 기능을 만들어 줘.ChatGPTTo create a function to send push notifications using Firebase Functions, follow these steps. This involves setting up Fireb..

85. Token을 firestore에 저장하기다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.알림 수신 허가를 받고 Token 얻기Token을 firestore에 저장하기firebase functions cloud 함수를 이용하여 알림 보내기웹앱에서 알림을 받아 나타내기ChatGPT에게 물었습니다.Create a function to save tokens in firestore.Token을 firestore에 저장하는 기능을 만들어 줘.ChatGPT Here’s how to create a function to save Firebase Cloud Messaging (FCM) tokens in Firestore using JavaScript or TypeScript. This function ca..

84. FCM - getToken다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.알림 수신 허가를 받고 Token 얻기Token을 firestore에 저장하기firebase functions cloud 함수를 사용하여 알림 보내기웹앱에서 알림을 받아 화면에 나타내기ChatGPT에게 물었습니다.Receive permission to receive notifications and obtain a token.알림 수신 허가를 받고 Token를 얻어줘.ChatGPT To receive permission to send notifications and obtain a Firebase Cloud Messaging (FCM) token in a Vue.js application, follow these ste..

83. messaging.getToken과 pushManager.subscribe의 차이점messaging.getToken과 pushManager.subscribe의 차이점이 뭘까요? messaging.getToken은 Firebase 클라우드 메시징의 일부이고, pushManager.subscribe는 브라우저에서 제공하는 하위 수준 API라고 합니다. 이것을 구분하지 못해 미로에 갇힌 것 같습니다.ChatGPT에게 물었습니다.What is the difference from registration.pushManager.subscribe?registration.pushManager.subscribe 와의 차이점은?ChatGPT Both messaging.getToken from Firebase Clou..