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

Vue로 PWA 개발 - 그랜파 개발자. 회원 가입, 로그인 등의 폼을 my-pwa-app에 추가하도록 합시다. 앱에 기능을 하나씩 붙여가는 것입니다.Firebase Authentication을 사용하기 위하여 firebase 초기화 설정에서 firebase.auth()를 추가합니다.그리고 Firebase Authentication의 이메일, 비밀번호 인증으로 회원 가입을 하겠습니다.createUserWithEmailAndPasswordcreateUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로, 사용자의 이메일과 비밀번호를 사용해 회원가입을 처리하는 기능입니다. 이 메서드를 호출하면 Firebase에서 사용자를 인증하고, 데이터베이스에 새로운..

RegisterView.vue 계정 만들기 계정 만들기 취소 {{ error }}

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 모아보기 개선마이로그 특정 사용자의 마이로그를 모아볼 수 있습니다.홈 페이지의 마이로그 목록에서 마이로그를 선택하면 상세 보기 페이지로 이동하고 상세 페이지 위쪽에 마이로그 사용자의 ‘마이로그 이름’이 보이는데 이것을 누르면 마이로그 사용자의 Id로 goToUserMylogs(author.id) 함수를 호출하고 이것은 Vue Router의 페이지 간 네비게이션 메서드 $router.push()를 호출하여 글쓴이의 마이로그 홈인 userlogs 페이지로 이동합니다. 이 페이지에서 카테고리를 선택하여 카테고리 별로 마이로그 목록을 볼 수 있습니다...

Vue로 PWA 개발 - 그랜파 개발자. 사용자 인증 기능을 구현해 봅시다.Firebase Authentication의 이메일, 비밀번호 인증으로 회원 가입하는 기능과 로그인, 로그아웃, 자동 로그인 기능을 구현하고 합니다. 이들 기능을 my-pwa-app에 계정 만들기, 로그인, 로그아웃 등의 기능으로 추가할 것입니다. ChatGPT에게 물었습니다.Firebase Authentication의 이메일, 비밀번호 인증으로 회원 가입하는 기능과 로그인, 로그아웃, 자동 로그인을 구현해줘.ChatGPT다음은 Firebase Authentication의 이메일 및 비밀번호 인증을 사용하여 회원 가입, 로그인, 로그아웃, 자동 로그인을 구현하는 Vue 2.x 프로젝트 코드입니다.1. Firebase 설정Fireb..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 내것 개선카테고리가 생겼으니 내 마이로그를 볼 때에도 카테고리별로 볼 수 있습니다.‘내것’ 페이지에서 카테고리를 선택하면 선택한 카테고리의 마이로그만 볼 수 있도록 수정합니다.1. 카테고리 보이기 . . . 0"> . . . {{ mylog.category }} 카테고리 없음 . . . . . . 2. 카테고리 로..

Vue로 PWA 개발 - 그랜파 개발자. 웹 앱을 서비스함에 있어 사용자 인증은 필수입니다.우리는 backend로 firebase를 사용할 것이므로 사용자 인증 또한 firebase Authentication를 사용할 것입니다. ChatGPT에게 물었습니다.firebase Authentication을 설명해줘.ChatGPTFirebase Authentication은 Firebase에서 제공하는 사용자 인증 서비스입니다. 애플리케이션에 인증 기능을 쉽고 안전하게 통합할 수 있도록 설계되었습니다. 이메일과 비밀번호, 소셜 로그인, 전화번호 인증 등 다양한 방법을 지원하며, 개발자는 이를 통해 사용자 계정을 생성, 관리, 인증할 수 있습니다.Firebase Authentication의 주요 기능1. 다양한 인..

ReadersView.vue 나의 독자들 0"> {{ reader.username }} {{ reader.email }}

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 쓰기 개선카테고리가 생겼으니 마이로그 쓰기를 수정해야 합니다.마이로그를 쓸 때 카테고리를 선택하고, 저장할 때 카테고리를 포함하여 저장하도록 수정하겠습니다.카테고리 보이기, 저장 . . . . . . . . . 카테고리 로드// src/store/modules/mylogs.jsasync fetchCategories({ commit }, userId) { if (!userId) return; try { // 사용자 ID로 필터링된 카테고리 가져오기 const q = q..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT의 PWA 예제의 소스 코드로 ChatGPT의 Router 예제와 PWA 예제를 병합하였습니다.예제 소스 코드의 경우 ChatGPT가 제공한 코드와 직접 코딩한 코드에 차이가 있을 수 있습니다. 실행하는 과정에서 맞지 않는 코드들은 수정하여 실행하도록 하였습니다.프로젝트가 진행되면 소스 코드는 계속 추가될 것입니다.src/firebase.js// src/firebase.jsimport { initializeApp } from "firebase/app";import { getFirestore, collection, getDocs, query } from "firebase/firestore";const firebaseConfig = { apiKey: p..

ProfileView.vue 계정 정보 --> 수정 취소 mdi-lock비밀번호 변경 mdi..