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

모든 사용자가 mylog의 모든 페이지를 볼 수 없습니다. 로그인한 후에만 특정 페이지에 대한 액세스를 허용하려면 Vue Router Navigation Guards를 사용하여 경로 보호를 설정해야 합니다. 이러한 가드는 사용자가 특정 페이지에 액세스하려면 인증을 받아야 하는지 확인합니다. router.beforeEach()는 Vue.js의 Vue Router에서 제공하는 탐색 가드입니다. 모든 경로 탐색 전에 호출되는 글로벌 가드입니다. 이 기능은 사용자가 특정 경로에 액세스하기 전에 발생해야 하는 인증 확인, 로깅 또는 기타 경로 전 처리와 같은 작업을 처리하는 데 특히 유용합니다.ChatGPT에게 물었습니다.Please explain router.beforeEach()router.beforeEach..

1. 로그인이메일 패스워드를 입력하고 로그인 버튼은 누르면 signInWithEmailAndPassword로 구글에 로그인한 후 uid를 받아 이것으로 mylog의 사용자 정보를 가져와 로그인 설정을 합니다.1.1 loginasync login({ commit, dispatch }, { email, password }) { try { const { user } = await signInWithEmailAndPassword(auth, email, password); //console.log('user::::', user); // 웹앱의 계정 정보를 가져와 로그인 설정을 한다. dispatch('fetchUserWithUid', {uid: user.uid});..

구글 로그인 기능을 이용하여 mylog에 로그인 하는 기능과 자동 로그인, 그리고 로그아웃 기능까지 구현합니다.ChatGPT에게 물었습니다.Please tell me how to log in using Google login of Google auth.구글 auth의 구글 로그인을 이용하여 로그인 하는 방법을 알려줘.ChatGPT To implement Google Login using Firebase Authentication (Google Auth) in a Vue.js application, you need to set up Firebase in your project and use the Google Sign-In method provided by Firebase. This method allow..

사용자가 입력한 이메일과 패스워드로 구글의 uid를 얻어서 mylog 계정 정보를 가져오는 기능을 구현합니다.ChatGPT에게 물었습니다.Create a function to log in to Google using email/password authentication of Google Auth.google auth의 이메일/패스워드 인증으로 구글에 로그인하는 기능을 만들어 줘.ChatGPT To implement Google email/password authentication using Firebase Authentication (part of Google's Firebase suite), you'll need to set up Firebase in your Vue project. This invol..

mylog 로그인은 계정 등록에서 이미 구글에 계정을 등록하였으므로 로그인 폼에 이메일과 패스워드를 입력하고 로그인 버튼을 누르면 mylog는 구글 계정에 로그인 한 다음 구글 계정의 uid를 받아 이것으로 mylog의 계정에서 사용자 정보를 가져옵니다. 이것은 사용자 인증은 구글을 이용하고 mylog 에서 사용해야 하는 계정 정보는 mylog의 계정에 저장하기 때문입니다.로그인 UI를 만들고, 구글 로그인하여 구글 uid로 mylog 계정 정보를 가져오는 과정을 만들어 봅시다. 그리고 google auth의 Google Login을 이용하여 로그인하는 방법과 자동 로그인 기능도 함께 구현합니다.먼저 로그인 화면을 만들어 봅시다.ChatGPT에게 물었습니다.Create a login screen usin..

계정 만들기 폼에서 사용자의 정보를 입력 받아 이메일과 패스워드로 Firebase 인증 서비스를 이용하여 구글 계정을 생성하고, 구글 계정의 uid를 받아 mylog의 계정 DB에 계정 정보를 저장합니다. 사용자 인증은 구글 계정을 이용하므로 사용자의 비밀번호는 mylog DB에 저장되지 않습니다.등록된 계정 정보는 계정 정보 페이지로 확인할 수 있고, 계정 정보 페이지에서 수정할 수도 있습니다.1. UI2. Source Codesrc/firebase.js// src/firebase.jsimport { initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";import { getFirestore, collection, add..

등록된 계정 정보를 보고 수정도 할 수 있습니다. 구글 계정과 연동할 수도 있고, 로그인 패스워드도 변경할 수 있습니다.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..