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

Vue로 PWA 개발 - 그랜파 개발자 myLog 프로젝트를 만들고, 레이아웃을 만들어 봅시다. 라우터를 이용하여 앱의 각 기능과 페이지를 연결합니다.1. Vue 프로젝트 만들기vue create myLog? 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 mode for router? (Requires proper server setup for index fallback in production..

Vue로 PWA 개발 - 그랜파 개발자 앱의 페이지 레이아웃을 만들어 봅시다.ChatGPT에게 물었습니다.vuetify를 이용하여 v-navigation-drawer, v-app-bar 가 있는 App.vue를 만들어 줘. ChatGPT To create an App.vue file using Vuetify with a v-navigation-drawer and v-app-bar, follow the example below. This will set up a basic layout that includes a navigation drawer for side navigation and an app bar at the top.v-navigation-drawer 및 v-app-bar와 함께 Vuetify를 ..

Vue로 PWA 개발 - 그랜파 개발자myLog - 내 일상의 기록 Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될 것입니다. myLog가 내 삶의 모든 순간에 나와 함께 하는 좋은 동반자가 되면 좋겠습니다.개발은 ChatGPT와 함께 할 것이고, 개발이 완료되면 myLog는 firebase hosting을 통해 인터넷에서 사용자와 만날 것입니다.1. myLog 개요myLog는 나의 일상을 단문(한글 600자 제한)으로 공유하는 웹앱입니다.회원 가입해야 myLog를 쓸 수 있습니다.회원 인증 정보는 구글 계정으로 등록하여 구글 계정을 사용..

Vue로 PWA 개발 - 그랜파 개발자 mylog - 내 일상의 기록Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될 것입니다. myLog가 내 삶의 모든 순간에 나와 함께 하는 좋은 동반자가 되면 좋겠습니다.개발은 ChatGPT와 함께 할 것이고, 개발이 완료되면 myLog는 firebase hosting을 통해 인터넷에서 사용자와 만날 것입니다.

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