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

등록된 계정 정보를 보고 수정도 할 수 있습니다. 구글 계정과 연동할 수도 있고, 로그인 패스워드도 변경할 수 있습니다.ChatGPT에게 물었습니다.Use card view to create a screen where you can view and edit account information.계정 정보를 보고 수정도 할 수 있는 화면은 card view를 사용하여 만들어 줘.ChatGPT To create a screen where users can view and edit their account information using a card view in Vuetify, we'll follow these steps:사용자가 Vuetify의 카드 보기를 사용하여 계정 정보를 보고 편집할 수 있는 화면을 ..

Firebase 인증 서비스 중 이메일/패스워드 방식을 이용하여 구글에 계정을 생성하고, 구글 계정의 uid와 함께 사용자가 입력한 정보를 mylog의 계정 DB에 저장합니다.ChatGPT에게 물었습니다.Please tell me how to save account information in firestore.계정 정보를 firestore 에 저장하는 방법을 알려줘.ChatGPTTo save account information in Firestore using Firebase and Vue.js, you will follow these steps:Firebase 및 Vue.js를 사용하여 Firestore에 계정 정보를 저장하려면 다음 단계를 따르세요.Set Up Firestore in FirebaseF..

Firebase 인증 서비스 중 이메일/패스워드 방식을 이용하여 구글에 계정을 생성하고, 구글 계정의 uid와 함께 사용자가 입력한 정보를 mylog의 계정 DB에 저장합니다. 즉, 로그인 등 사용자 인증은 구글 인증 서비스를 이용하고 mylog에 저장된 계정 정보는 mylog 서비스에 사용합니다.다음과 같은 단계를 거쳐 계정이 만들어집니다.사용자가 계정 정보를 입력하고 ‘계정 만들기’를 누르면mylog는 이메일과 패스워드로 Firebase 인증 서비스로 구글에 회원 가입을 하게 되고,구글에 가입된 회원의 uid와 사용자가 입력한 계정 정보를 mylog에 저장합니다.ChatGPT에게 물었습니다.Use npm and implement the ability to create an account using G..

계정 정보를 입력받아 구글에 계정 등록을 하고, 구글 계정의 uid와 함께 mylog 웹앱에도 계정 정보를 저장하게 됩니다. 사용자 인증 관련은 구글 계정을 사용하고, mylog에 저장되는 계정 정보는 각종 앱 운영에 필요할 때 사용하게 됩니다. 그러므로 사용자의 비밀번호는 mylog 계정에 저장되지 않습니다.UI를 만들기계정 정보를 입력 받아 구글에 계정 등록하기구글 계정의 uid와 계정 정보를 mylog 계정 DB에 저장하기계정 만들기를 진행하면서 firebase 설정을 하고, 계정 정보를 firestore DB에 저장을 하고, 입력 중 각종 오류에 대해 알림을 나타내는 기능 등을 구현하게 됩니다.계정 등록을 위한 화면부터 만들어 봅시다.ChatGPT에게 물었습니다.Create an account r..

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