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

Vue로 PWA 개발 - 그랜파 개발자. 로그인을 하면 회원 정보를 로드하여 state 상태 변수 profile에 저장 합니다.물론 아직 회원 정보를 저장하지 않았다면 profile에는 정보가 없습니다.계정 설정 페이지가 열릴 때 이 profile을 사용하여 화면에 데이터를 나타냅니다.우리는 다양한 방법으로 로그인하는 것을 가정하고 profiles 컬렉션의 profile 문서에 uids 배열 항목을 만들었습니다.이 uids에 로그인한 uid를 포함한 회원 정보를 로드합니다. ChatGPT에게 물었습니다.uids에 uid가 포함된 문서를 로드하고 싶어ChatGPTFirestore에서 uids 배열에 특정 uid가 포함된 문서를 로드하려면 array-contains 쿼리를 사용할 수 있습니다.아래는 Vue와..

Vue로 PWA 개발 - 그랜파 개발자.1. 계정 설정이메일과 비밀번호로 로그인을 할 수 있게 되었습니다.그러나 앱을 서비스 하기 위해서 로그인 정보 외에도 회원 정보가 필요합니다. 우리는 모바일 전용 단문 블로그를 만들고자 합니다. 그래서 회원의 이름, 블로그 이름, 소개 정도는 등록하도록 하겠습니다.2. profiles collections앱이 회원정보를 저장하기 위하여 firestore의 profiles collections 사용합니다.회원 정보는 이메일, 이름, 블로그 이름, 소개, 그리고 uids 배열 항목입니다. uids에는 이메일과 비밀번호로 로그인 한 후 구글로부터 돌려받은 user 객체의 uid를 저장합니다. 배열로 하는 이유는 구글 계정으로 로그인 등 다른 OAuth를 이용한 로그인 ..

Vue로 PWA 개발 - 그랜파 개발자. 로그아웃하지 않은 상태에서 my-pwa-app를 종료하였다면 다음에 접속할 때는 자동으로 로그인하도록 합니다.그리고 로그인 상태에 따라 메뉴 항목이 다르게 보이도록 만들어 봅시다.1. 로그인 전2. 로그인 후3. 자동 로그인로그인 인증 상태에 따른 자동 로그인 기능 구현을 위하여 onAuthStateChanged를 사용합니다.onAuthStateChanged는 Firebase Authentication에서 제공하는 메서드로, 사용자의 인증 상태 변화를 실시간으로 감지하는 역할을 합니다. 사용자가 로그인하거나 로그아웃할 때, 또는 앱이 처음 로드될 때 트리거됩니다.이 메서드는 애플리케이션의 인증 상태를 지속적으로 모니터링하는 데 유용합니다.src/main.js// ..

Vue로 PWA 개발 - 그랜파 개발자. 딸랑 이메일과 비밀번호로 구글 계정을 만들고는 회원 가입을 만들었다고 하네요.. ㅎㅎㅎ회원 정보 관련해서 추후에 뭔가를 추가하도록 하지요 지금은 로그인, 로그아웃, 자동 로그인, 로그인 상태 확인 등을 만들고 이해해 봅시다.이메일과 비밀번호를 입력하면 로그인이 될 것이고, 로그아웃하지 않은 상태에서 my-pwa-app를 종료하였다면 다음에 접속할 때는 자동으로 로그인하도록 합니다. 로그인하면 로그아웃 아이콘을 나타내어 로그아웃을 할 수 있도록 합니다.1. 로그인, 로그아웃먼저 로그인과 로그아웃을 만들어 봅시다. 2. Login - signInWithEmailAndPassword로그인은 signInWithEmailAndPassword를 사용합니다.signInWith..

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

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

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

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

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT의 PWA 예제를 Router 예제에 추가하였습니다.PWA예제가 단순히 Post List 화면 하나만 있어 페이지 라우팅 등이 필요해서 입니다. 앞으로 계속 페이지를 추가하면서 프로젝트를 진행할 예정입니다. PWA 예제를 실행하여 봅시다.프로젝트 만들기1. Vue 프로젝트 만들기vue create my-pwa-app ? 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..

Vue로 PWA 개발 - 그랜파 개발자. 이제까지 배운 내용을 정리하기 위하여 간단한 PWA 예제를 하나 만들어 보는 것이 좋겠습니다..대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능은 Create(생성), Read(읽기), Update(갱신), Delete(삭제)입니다. 이를 보통 CRUD라고 합니다.Firestore를 연동하여 CRUD가 있는 간단한 PWA를 만들어 봅시다. ChaGPT에게 물었습니다.vue,vuex,vuetify,firestore v2를 이용하여 글을 쓰고, 저장하고, 읽고, 수정하는 pwa를 만들어줘ChatGPTFirestore v2 SDK를 사용하는 경우 약간의 차이가 있으므로, 아래 가이드에서 Firebase Web SDK v9 모듈 방식으로 구현하겠습니다. Vu..