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

Vue로 PWA 개발 - 그랜파 개발자고맙습니다.지금까지 공부한 PWA mylog를 소스코드 설명 중심으로 개발에 대한 내용을 소개하는 새로운 책을 시작합니다.mylog, 일상의 기록베타 테스트 : mylog, 일상의 기록

Vue로 PWA 개발 - 그랜파 개발자 ‘내로그’ 메뉴를 눌러 나의 마이로그 목록을 볼 때 기본은 작성일 역순으로 보입니다. 그런데 마이로그 중 조회순으로 보고 싶을 때가 있습니다. 그래서 ‘내로그’ 페이지에 정렬 방법에 대한 ‘최신순’, ‘조회순’ 두 개의 버튼을 추가합니다. ‘최신순’은 작성일 역순으로 정렬을 하고, ‘조회순’은 조회수가 많은 순서로 정렬하여 보여줍니다.1. 쿼리마이로그 보기 정렬을 위한 쿼리입니다.최신순 쿼리입니다.query(collection(db, "mylogs"), where("userId", "==", userId), orderBy("createdAt", "desc"));조회순 쿼리입니다.query(collection(db, "mylogs"), where("userId", "..

Vue로 PWA 개발 - 그랜파 개발자 날짜별 조회수는 기간을 입력하면 기간동안의 각 날짜에 대한 마이로그 조회수를 보여줍니다.마이로그는 한 사람의 회원이 하루 몇번을 조회해도 하루 한번만 카운트합니다. 마이로그는 여러개가 있으며, 각각의 마이로그를 조회한 사람 또한 여러명입니다. 마이로그 날짜별 조회수는 전체 마이로그에 대해 해당 날짜에 몇명의 회원이 조회를 했는지 집계를 합니다. 이를 구하기 위하여 각 마이로그에 대해 주어진 날짜에 조회한 회원의 수를 구해서 전체 마이로그에 대해 합산을 하면 해달 날짜의 조회수를 구할 수 있습니다.마이로그 조회수는 views collection에 저장됩니다. views collection은 다음과 같은 구조를 가집니다. 1. views 컬렉션 구조 /views/{my..

Vue로 PWA 개발 - 그랜파 개발자 일별 조회 현황 기능을 구현하기 위하여 먼저 기간을 입력하여 날짜를 받아오는 기능을 구현합니다.ChatGPT에게 물었습니다.Create a function that inputs a period through Vue's view and calculates the date within that period and displays it on the screen.vue의 view로 기간을 입력받아 해당 기간 안에 날짜를 구해 화면에 표시하는 기능을 만들어줘.ChatGPT To create a Vue.js component that allows users to input a period (start date and end date) and then displays the d..

Vue로 PWA 개발 - 그랜파 개발자 나의 마이로그를 얼마나 많은 사람이 보았을지가 궁금합니다. 통계 기능을 구현해 봅시다. 통계는 여러 기능이 있습니다. 별도의 통계 메인 페이지를 만들고 이 페이지에서 각 통계 기능을 선택할 수 있도록 합니다. 다음과 같은 통계 기능을 구현하려고 합니다.일별 조회 현황 : 날짜별로 나의 마이로그 조회수 집계를 합니다. 기간을 입력하면 날짜 단위로 나의 마이로그 조회수 집계를 보여줍니다.마이로그 조회 현황 : 나의 마이로그에 대해 조회수가 높은 순으로 마이로그 리스트를 보여 줍니다. 입력 사항은 없습니다. 메뉴를 클릭하면 마이로그 리스트를 조회순으로 나타냅니다.먼저 조회 통계를 위하여 조회수 컬렉션의 구조에 대해 알아 봅시다.1. views 컬렉션 구조/views/{m..

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