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

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

FCM을 보내려면 사용자에게 권한을 요청해야 합니다. 사용자가 알림 수신을 허용하면 해당 기기의 토큰을 받을 수 있고, 이 토큰을 클라우드에 저장하여 알림을 보낼 때 사용합니다. 토큰을 firestore에 저장하는 방법을 알아봅니다.ChatGPT에게 물었습니다.How to get fcm token and save it in firestore?fcm 토큰을 얻어 firestore에 저장하는 방법은?ChatGPT To get an FCM token and save it in Firestore, you'll follow these key steps:FCM 토큰을 가져와 Firestore에 저장하려면 다음 주요 단계를 따르세요.Request permission to show notifications.알림 표시 ..

FCM을 보내기 위해서는 백엔드에서 전송하여야 합니다. 백엔드 로직을 사용하지만 이를 위하여 서버를 구축하지는 않습니다. Firebase Cloud Functions를 사용하여 FCM을 전송하려고 합니다.ChatGPT 에게 물었습니다.Create a function to send fcm to Firebase Cloud Functions.Firebase Cloud Functions로 fcm 을 보내는 기능을 만들어 줘.ChatGPT To send Firebase Cloud Messaging (FCM) notifications from Firebase Cloud Functions, you will use the Firebase Admin SDK. Firebase Cloud Functions allow you..

마이로그를 저장하면 구독자에게 알림을 보내려고 합니다. FCM(Firebase Cloud Messaging)을 이용하면 구독자에게 알림을 보낼 수 있습니다. FCM 서비스를 구현합니다.ChatGPT에게 물었습니다.I want to implement fcm service in v9.fcm 서비스를 v9 으로 구현하고 싶어.ChatGPT To implement Firebase Cloud Messaging (FCM) service in Firebase v9 (modular SDK), you'll follow a structured process for integrating push notifications in a web application. Here's a step-by-step guide on how t..

나를 구독하는 회원을 독자라 합니다. 독자는 메뉴 항목으로 나타납니다. 독자 메뉴를 누르면 나를 구독하는 회원의 목록을 나열합니다. 구독 회원의 목록에서 회원을 선택하면 해당 회원의 마이로그 모아보기로 이동합니다.1. 독자 2. src/views/ReadersView.vue 구독 신청을 하면 subscriptions 컬렉션에 문서가 추가 되는데 문서는 userId, authorId, createdAtt 필드를 가집니다. 나의 독자들은 subscriptions 컬렉션 문서의 authorId가 나의 id인 userId를 가진 회원들이 됩니다. 이들 userId로 users 컬렉션에서 회원의 정보 목록을 구하면 나의 독자 목록이 됩니다. 독자 목록을 선택하면 해당 독자의 마이로그를 볼 수 있는 UserMyLo..

마이로그 상세 보기 페이지 상단에 마이로그 저자의 마이로그 이름이 있습니다.이것을 누르면 회원의 마이로그 로 이동합니다. 이 페이지는 선택한 회원의 마이로그만 보여주는 페이지로 그 회원의 마이로그 홈이라 할 수 있습니다. 회원의 마이로그 목록에서 마이로그를 선택하면 다시 마이로그 상세 보기 페이지로 이동합니다. 회원의 마이로그 보기는 메뉴 항목에는 없습니다. 마이로그 상세 보기에서 저자의 마이로그 이름을 클릭하여 이동할 수 있습니다.1. MyLogView.vue 마이로그 보기에서 저자의 마이로그 이름을 클릭하면 저자의 id를 파라미터로 가지고 페이지로 이동합니다.goToUserMylogs(userId) { this.$router.push({ name: 'UserMyLogsView', params..