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

Vue로 PWA 개발 - 그랜파 개발자 Firestore 트리거 기능을 이용하면 mylog가 firestore에 저장될 때 이벤트를 받을 수 있습니다.exports.sendMylogNotification = onDocumentCreated('/mylogs/{mylogId}', (event) => { const mylog = event.data; console.log('New mylog created:', mylog);}); 수신한 이벤트 데이터에 방금 저장한 마이로그의 모든 정보가 저장되어 있습니다. 마이로그 userId로 독자들의 userId를 구해 푸시 알림을 전송하려고 합니다.Firebase Cloud Functions에서 Firestore의 데이터를 가져오는 방법을 알아야 겠습니다.ChatGP..

Vue로 PWA 개발 - 그랜파 개발자 마이로그를 저장하면 구독자에게 알림을 전송하는 기능을 구현합니다. 잎에서 구현한 FCM 푸시 메시지 전송 기능을 그대로 두고 새로운 함수로 기능을 구현하고자 합니다.Firebase Cloud Functions에서 여러 함수를 export해야 합니다.ChatGPT에게 물었습니다.How to export multiple functions from firebase functions?firebase functions에서 여러 함수를 export 하는 방법은?ChatGPT To export multiple functions from Firebase Cloud Functions, you can define each function separately and then expor..

Vue로 PWA 개발 - 그랜파 개발자 CM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를 수신할 수 있습니다. 이것은 main.js에서 설정합니다.앱이 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다. 앱이 시작할 때 서비스 워커를 등록합니다.1. 앱이 Foreground에 있을 때 푸시 메시지 받기// src/main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router fro..

Vue로 PWA 개발 - 그랜파 개발자 Cloud에서 알림을 전송하는 기능을 구현합니다. ChatGPT가 알려준 코드에서 사용된 sendToDevice API는 더 이상 사용하지 않는다고 합니다. 그래서 구글 검색을 통하여 찾은 sendEachForMulticast를 사용하여 푸시 메시지를 보내는 기능을 구현하였습니다.기능 구현은 다음과 같은 단계를 따릅니다.1. Firebase Cloud Functions를 설정firebase init functions2. Firebase admin SDK 설치'functions/' 디렉터리로 이동합니다.'functions/' 디렉터리 내에 Firebase Admin SDK를 설치합니다.cd functions npm install firebase-admin3. FCM을..

Vue로 PWA 개발 - 그랜파 개발자 구독자가 알림을 요청하였다면 firestore에 토큰이 저장되어 있습니다. 한사람의 구독자가 PC와 모바일 등을 사용할 수 있으므로 각 구독자는 여러 토큰이 있습니다. 구독자 또한 여러 사람입니다. 나의 여러 구독자에 대해 각 구독자의 저장된 토큰의 목록을 구하여 이들 토큰에 대해 알림을 전송할 수 있습니다. 푸시 알림은 여러 상황에서 보낼 수 있습니다. 마이로그 앱의 경우 마이로그를 작성하여 firestore에 저장할 때 모든 구독자에게 알림을 보내려고 합니다. 또, 푸시 알림은 마이로그를 저장할 때 구독자에게 보내는 것 뿐 아니라 여러 필요에 따라 전송할 수도 있습니다. 그러므로 우선 한사람의 회원에 대해 알림을 전송하는 기능을 먼저 구현해 봅시다.Create ..

Vue로 PWA 개발 - 그랜파 개발자 Cloud에서 FCM을 보내기 위해 서버를 따로 관리하지 않습니다. 서버없이 Cloud에서 FCM을 보내기 위해 Firebase functions을 사용합니다.ChatGPT에게 물었습니다.Please explain firebase functions.firebase functions에 대해 설명해줘.ChatGPT Firebase Functions, also known as Cloud Functions for Firebase, is a serverless backend service provided by Firebase that allows developers to write and deploy backend code without managing a server. T..

알림 요청 화면에 ‘알림 요청’ 버튼 하나만 있는 것은 상당히 불친절합니다. 왜 알림 요청을 해야 하는지 설명이 있어야 하고, 알림 요청 버튼을 눌렀을 때 처리 결과에 대해 알려 주어야 하고, 그리고 알림은 어떤 형태를 가지는지 보여주는 것이 아무래도 좀 더 사용자에 친절할 것입니다.1. 알림 요청 2. src/views/NotificationView.vue 알림 요청 마이로그를 구독하기 위해서는 '알림 요청'을 해야 합니다. mdi-bell 알림..

"같은 회원이 PC와 모바일에 fcm을 받으려면?"위 질문으로 한 회원에 대해 여러 개의 토큰을 저장할 수 있는 코드를 답으로 받았지만, 이것은 기존에 토큰 정보가 저장되어 있는 회원에 대해 토큰을 추가하는 기능입니다. 우리가 필요한 것은 아직 FCM 토큰을 등록하지 않은 회원이 처음 토큰을 등록하는 기능도 필요하고, 또한 토큰 등록 날짜 정보도 저장하기를 원합니다.ChatGPT에게 물었습니다.I want to store the FCM token and creation date on multiple devices for the same member, and also tell me what to do when the token is first registered.같은 회원에 대해 여러 기기의 FCM tok..

마이로그 웹앱은 PC에서도, 모바일에서도 사용할 수 있습니다. 알림 요청에 대해 각 회원당 하나의 FCM 토큰을 저장하고 있다면 하나의 기기에만 FCM을 전송할 수 있습니다. 그러므로 FCM 토큰은 한 사람의 회원에 대해 여러개의 토큰을 저장할 수 있어야 합니다. 이것에 대해 개선을 해 봅시다.ChatGPT에게 물었습니다.How can the same member receive FCM on PC and mobile?같은 회원이 PC와 모바일에 fcm을 받으려면?ChatGPT To allow the same member to receive Firebase Cloud Messaging (FCM) notifications on both PC and mobile devices, you need to ensure..

구독 신청을 하고 알림을 받기 위해서는 알림 요청을 해야 합니다. 알림 요청을 하면 알림 표시 권한을 허용할 것인지 묻습니다. 허용을 하면 알림을 받을 수 있습니다.1. service worker앱이 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다. 프로젝트의 루트 디렉터리(index.html이 있는 위치)에 firebase-messaging-sw.js 파일을 만듭니다.// firebase-messaging-sw.jsimportScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-app-compat.js');importScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-mess..