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

47. Google 계정으로 Login구글 계정으로 로그인은 다음과 같은 시퀀스를 가집니다.회원은 ‘Google Login’ 버튼을 누릅니다.my-auth 앱은 구글 계정으로 구글에 로그인하여 user객체를 받습니다.구글에서 받은 user객체의 uid로 my-auth 웹앱에 등록된 계정 정보를 가져옵니다.my-auth 계정 정보로 웹앱에 로그인 처리를 합니다.로그인을 하면 app-bar의 우측에 로그아웃 아이콘이 나타납니다.로그인 상태에서 브라우저를 떠나도 다시 사이트에 접속하면 자동 로그인이 됩니다.UI 로그인 후 계정 정보를 읽는 방법이 로그인에서 보았듯이 두 가지 방법이 있습니다.firestore DB에서 직접 계정 정보를 읽는 방법.사이트 접속할 때 이미 전체 회원의 정보를 읽어 리스트고 가지고 ..

46. Google 계정 연결구글 계정으로 로그인할 수 있도록 합니다. 그러기 위해서는 먼저 구글 계정을 연결해야 합니다. 구글 계정 연결은 구글 계정의 uid를 my-auth 계정과 연결된 계정 정보에 uid를 저장하는 것입니다. 물론 구글 계정과 연결하려면 구글에 계정이 있어야 합니다.Google 계정 연결은 다음과 같은 시퀀스를 가집니다.로그인한 후 계정 정보 페이지에 접속합니다.계정 정보 페이지에서 구글 계정 연결을 클릭하면 my-auth 앱은 구글 계정으로 구글에 로그인을 합니다.구글에 로그인을 성공하면 user 객체를 돌려 받습니다.구글에서 돌려받은 user 객체의 uid를 현재 로그인된 계정의 uids에 추가합니다.위와 같이 하는 이유는 이메일/비밀번호로 계정을 만든 회원이 구글 로그인으로도..

45. 자동 로그인로그인을 한 후 계정 정보를 보면 이름도 보입니다. 그러나 새로 사이트에 접속을 하면 이름이 보이지 않습니다.ChatGPT에게 물었습니다.1. auth.onAuthStateChanged에서의 user 객체는?ChatGPT The auth.onAuthStateChanged method in Firebase Authentication is an observer that gets called whenever the user's sign-in state changes. This includes when the user first signs in, signs out, or when the user's ID token is refreshed. The callback function you prov..

44. 로그인로그인은 다음과 같은 시퀀스를 가집니다.회원은 이메일, 비밀번호를 입력 후 ‘Login’을 누릅니다.my-auth 앱은 이메일과 비밀번호로 구글 로그인을 합니다.구글 로그인을 성공하면 user객체를 받아 받은 user객체의 user.id로 my-auth 웹앱에 등록된 계정 정보를 가져옵니다.이때 my-auth의 계정 검색은 구글에서 받은 user객체의 uid로 my-auth 계정을 찾는 것입니다. 구글 user객체의 user.id는 my-auth 웹앱 계정의 uids 배열 요소 중 하나입니다.my-auth 계정 정보를 받아 로그인 처리를 합니다.로그인을 하면 app-bar의 우측에 로그아웃 아이콘이 나타납니다.로그인 상태에서 브라우저를 떠나도 다시 사이트에 접속하면 자동 로그인이 됩니다.UI..

43. 계정 만들기1. 계정 만들기 시퀀스계정 만들기는 다음과 같은 시퀀스를 가집니다.사용자는 이메일, 이름, 비밀번호, 비밀번호 확인을 입력 후 ‘Register’를 누릅니다. 비밀 번호 확인 입력 중 비밀번호와 비밀번호 확인이 진행됩니다.my-auth 웹앱은 이메일과 비밀번호로 구글에 계정 만들기를 진행합니다.구글 계정 만들기를 위하여 createUserWithEmailAndPassword() 함수를 사용합니다.구글에 계정 만들기를 성공하면 구글은 user 객체를 돌려줍니다.사용자가 입력한 이메일, 이름, user객체의 uid로 웹앱의 firestore DB의 계정 컬렉션에 계정 정보를 저장합니다.2. UI개발에 필요한 몇 가지 질문ChatGPT에게 물었습니다.1. createUserWithEmail..

42. 계정 만들기, 로그인 - 개발 1 배운 내용으로 계정 등록, 로그인 기능을 개발합니다.1. 프로젝트 설정vue create my-auth? 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) Yes? Where do you prefer placing ..

41. ChatGPT에게 물었습니다.vuetify의 각 컴포넌트에 대해 설명해줘.ChatGPT Vuetify는 Vue.js 애플리케이션에서 Material Design 컴포넌트를 사용할 수 있도록 지원하는 프레임워크입니다. Vuetify는 다양한 UI 컴포넌트를 제공하여 사용자가 쉽게 고품질의 인터페이스를 만들 수 있게 도와줍니다. 주요 Vuetify 컴포넌트에 대해 간략히 설명하겠습니다.주요 Vuetify 컴포넌트1. v-app설명: 애플리케이션의 루트 컨테이너로, Vuetify의 모든 레이아웃과 구성 요소는 v-app 내부에 배치됩니다.예시: 2. v-container설명: 레이아웃을 위한 기본 컨테이너로, 유연한 그리드 시스템을 제공합니다.예시: 3. v-..

40. 계정 만들기, 그리고 로그인계정 관리 모듈을 개발하기 위하여 ChatGPT에게 질문을 하고 확인을 하면서 개발에 필요한 기술들을 확보하였습니다. 이제 우리가 배운 기술들을 사용하여 직접 계정 관리 모듈을 만들어 보도록 하겠습니다.기능 분석1. 계정 등록계정 등록은 구글에 합니다. 그렇지만 우리 웹앱의 계정 관리를 위하여 개발하는 웹앱에도 계정 등록을 해야 합니다. 우리 웹앱에 계정을 등록하는 방법은 현재 두 가지를 제공합니다.1. 구글 계정이 없는 회원구글 계정이 없는 회원은 이메일과 비밀번호를 입력하여 계정 등록을 하면 웹앱은 구글 계정에 회원을 등록하고, 회원의 등록 정보를 돌려받아 우리 웹앱에도 계정 등록을 합니다. 이때 구글에서 돌려받는 계정 정보는 이메일과 구글 계정의 uid이고 우리 웹..