Vue로 PWA 개발, 프론트엔드 공부 my-pwa-app의 계정 설정

Vue로 PWA 개발 - 그랜파 개발자.

1. 계정 설정

이메일과 비밀번호로 로그인을 할 수 있게 되었습니다.그러나 앱을 서비스 하기 위해서 로그인 정보 외에도 회원 정보가 필요합니다. 우리는 모바일 전용 단문 블로그를 만들고자 합니다. 그래서 회원의 이름, 블로그 이름, 소개 정도는 등록하도록 하겠습니다.

2. profiles collections

앱이 회원정보를 저장하기 위하여 firestore의 profiles collections 사용합니다.
회원 정보는 이메일, 이름, 블로그 이름, 소개, 그리고 uids 배열 항목입니다. uids에는 이메일과 비밀번호로 로그인 한 후 구글로부터 돌려받은 user 객체의 uid를 저장합니다. 배열로 하는 이유는 구글 계정으로 로그인 등 다른 OAuth를 이용한 로그인 기능을 사용할 때 이들로부터 돌려받은 user 객체의 id를 저장하기 위해서입니다. uids를 배열로 관리함으로써 회원 한 사람이 여러 OAuth로 로그인 할 수 있게 됩니다.

계정 설정을 통해 앱에 회원 정보를 가지게 되었으므로 로그인을 하면 이 회원 정보도 함께 store의 상태 변수 profile에 저장하도록 합니다.

3. 계정 설정 분석

계정 설정을 만들기 위해 해야 할 일들을 분석하여 봅시다.
개발을 위하여 필요한 것들을 생각해 봅니다.

1. 계정 설정을 통한 회원 정보는 profiles 컬렉션에 저장합니다.

2. 회원 정보 profiles 컬렉션의 각 항목 이름은 다음과 같습니다.

   • email : 로그인할 때 이메일입니다. 이미 등록된 정보이므로 계정 설정에서는 입력하지 않습니다.
   • name : 회원의 이름 또는 별명입니다.
   • blogName : 회원의 블로그 이름입니다.
   • aboutMe : 회원 자신의 소개말입니다.
   • createdAt(가입일) : 회원 가입일입니다. 회원 정보를 저장할 때 시스템 시간을 자동으로 얻어 저장합니다.
   • uids[] : 여러 OAuth를 이용한 로그인을 위한 것입니다.

3. 계정 설정 폼은 기존의 등록된 정보면 등록된 정보를 보여주고. 신규 회원이면 공란을 보여 줍니다.

4. 기존에 등록된 회원 정보를 가져오기 위해서는 profiles의 문서들 중 uids 배열 속에 로그인하여 돌려 받은 uid를 가진 문서를 가져와야 합니다. 다만 회원 정보는 로그인할 때 이미 로드하였으므로 계정 설정 페이지가 열릴 때에는 store의 상태 변수 profile에 로드되어 있는 정보를 가져옵니다.
   물론 처음 회원 가입하는 경우는 profile 정보가 없습니다.

5. 각 회원 정보 항목을 입력 또는 수정한 후 저장을 하면 profiles 컬렉션에 문서로 저장이 됩니다. 신규 회원의 등록인 경우 profiles 컬렉션에서 회원 문서의 uids 배열 항목에 로그인한 uid를 입력해야 하고, 회원 정보를 저장한 후 store의 상태 변수 profile에 회원 정보를 저장해야 합니다.
   기존 회원 정보의 수정인 경우도 store의 상태변수 profile의 정보는 변경되어야 합니다.

Vue 프로젝트 Beta Test : mylog, 일상의 기록