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

Vue로 PWA 개발 - 그랜파 개발자 컴퓨터 프로그램 개발자로 살아온 세월이 많이 흘러 이젠 은퇴를 앞두고 있습니다. 아직 머신비전 분야에서 현업 개발자로 근무하고 있지만 정년이 지나 촉탁직으로 신분이 바뀌었으니, 은퇴 후를 생각하지 않을 수 없습니다. 개발자로서 오래 살아오다 보니 은퇴를 해도 개발을 떠나 다른 일을 한다는 것은 상상이 되지 않습니다. 그래서 개발 얘기를 하는 블로그를 키우면 은퇴 후에 경제적인 도움을 받을 수 있지 않을까 하는 기대를 하고, 개발에 관심이 있는 누구나 쉽게 따라할 수 있는 개발 주제로 글을 써보자는 생각을 했습니다. 무엇이 좋을까 인터넷 검색을 하다가 Vue와 Firebase를 알게 되었습니다. Vue 프로젝트 Beta Test : mylog, 일상의 기록 '21일동..

Vue로 PWA 개발 - 그랜파 개발자 마이로그를 쓰면 구독자에게 알림을 전송하는 기능을 구현합니다. 잎에서 구현한 FCM 푸시 메시지 전송 기능을 그대로 두고 새로운 함수로 기능을 구현하고자 합니다.Cloud Firestore 함수 트리거의 onDocumentCreated 이벤트는 문서를 처음으로 기록할 때 트리거됩니다. 이 이벤트를 받아 구독자에게 알림을 전송하는 기능을 구현합니다.1. 구독자 알림 전송2. funcstions/index.js// funcstions/index.jsconst { onRequest } = require("firebase-functions/v2/https");const { onDocumentCreated } = require('firebase-functions/v2/fir..

Vue로 PWA 개발 - 그랜파 개발자 Firestore 데이터에 대해 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행하는 방법에 대해 설명을 들었습니다. 이것으로는 부족합니다. firestore의 query 사용법에 대해서도 알아야 합니다.ChatGPT에게 물었습니다.How do I use query?query는 어떻게 사용하지?ChatGPT In Firebase Firestore, a query is used to retrieve specific documents from a collection based on certain conditions. You can use queries to filter, sort, and limit the results when fetching data. Fires..

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 ..