Vue로 PWA 개발 - 그랜파 개발자
1. myLog - 내 일상의 기록
Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될 것입니다. myLog가 내 삶의 모든 순간에 나와 함께 하는 좋은 동반자가 되면 좋겠습니다.
개발은 ChatGPT와 함께 할 것이고, 개발이 완료되면 myLog는 firebase hosting을 통해 인터넷에서 사용자와 만날 것입니다.
1. myLog 개요
myLog는 나의 일상을 단문(한글 600자 제한)으로 공유하는 웹앱입니다.
- 회원 가입해야 myLog를 쓸 수 있습니다.
- 회원 인증 정보는 구글 계정으로 등록하여 구글 계정을 사용합니다.
- 사용자 인증은 구글을 사용함으로 회원의 비밀번호는 웹앱에 저장하지 않습니다.
- 일상의 myLog를 게시하면 구독자에게 푸시 알림을 보냅니다.
- 내가 기록한 myLog는 사이트에 접속하는 모든 사람이 볼 수 있습니다.
- myLog에 대해 댓글을 쓸 수 있으며 댓글에 대한 답글을 쓸 수 있습니다.
- myLog를 검색할 수 있습니다.
- 특정 사용자의 myLog를 모아볼 수 있습니다.
- myLog의 조회수를 알 수 있습니다.
- myLog를 누구 봤는지 알 수 있습니다.
- myLog는 마크다운 에디터를 사용합니다.
2. Architecture Overview
- Client Side: Vue.js (with Vuetify)
- Backend as a Service: Firebase (Authentication, Firestore, Hosting)
- Authentication : 사용자 인증
- Firestore : 데이터베이스, users collection, posts collection
- Hosting : 웹앱 myLog의 인터넷 서비스
- PWA: Service Workers, Web App Manifest
3. Component 구조
1. 사용자 인증
- 사용자 등록 : 이메일, 이름(별명), 로그이름, 비밀번호(구글에 저장), 계정연동 uids
- 구글 계정 등록, users collections에 저장, 로그인 설정
- 계정 정보
- 계정 정보 보기, 구글 계정 연동
- 로그인, 로그 아웃
- 이메일/비밀번호 로그인, 구글 로그인, 자동 로그인, 로그아웃
2. myLog
- myLog리스트
- myLog 쓰기, 저장, 마크다운 에디터, 마크다운 미리보기
- myLog 상세보기, myLog삭제, myLog공개여부
- 조회수, 댓글, 댓글 삭제, 답글, 답글 삭제
- myLog검색
- 회원 myLog 구독, 나의 myLog 독자
3. 푸시 알림
- 알림 구독
- firestore, firebase functions
- 알림 전송
4. Routing 라우팅
애플리케이션 경로 - Vue Router를 사용.
Routes:
‘/’ - 홈,
‘/login - 로그인
/register - 계정 만들기
/profile - 계정 정보 보기, 로그인 필요
mylogs/:id - myLog 상세 보기
/my-mylogs - 내 myLog 모아 보기, 로그인 필요
/user-mylogs/:userId - 특정 회원의 myLog 모아 보기
/write-mylog - myLog 쓰기, 로그인 필요
/search-mylogs - myLog 검색
/subscribed-mylogs - 구독중인 myLog들 모아 보기, 로그인 필요
/subscriber-list - 내 myLog를 구독자 리스트, 로그인 필요,
/subscribe-notification - 알림 구독 요청, 로그인 필요
/send-notification - 알림 전송
Components
-
/ - MyLogsView
홈, 등록된 모든 회원이 쓴 모든 myLog 리스트 -
/login - LoginView
로그인, 구글 계정으로 로그인 -
/register - RegisterView
계정 만들기, 구글 계정 등록 -
/profile - ProfileView
계정 정보 보기, 구글 계정 연동, 로그인 필요 -
/mylogs/:id - MyLogDetailView
myLog 상세 보기, 댓글쓰기(삭제), 답글쓰기(삭제), myLog 구독 요청
이 myLog를 쓴 회원의 myLog 모아 보기 -
/my-mylogs - MyMyLogsVuew
내 myLog 모아 보기, 로그인 필요 -
/user-logs/:userid - UserMyLogsView
각 회원의 myLog 메인 페이지, 회원의 myLog 모아 보기 -
/write-log - WriteMyLogView
myLog 쓰기, 로그인 필요 -
/search-logs - SearchMyLogsView
myLog 검색 -
/subscribed-logs - SubscribedMyLogs
내가 구독중인 myLog들 모아 보기, 로그인 필요 -
/subscriber-list - SubscribersList
내 myLog를 구독하는 독자 리스트, 리스트 중 독자 선택하면 해당 독자의 로그 모아보기, 로그인 필요,
-
/subscribe-notification - SubscribeNotificationView
알림 구독 요청, 이것은 알림을 받는 것을 허용하는 것으로 구독을 하지 않으면 알림을 받지 않음. 로그인 필요 -
/send-notification - SendNotificationView
알림 전송, myLog를 등록하면 구독자에서 푸시 알림 전송 -
firebase functions - 푸시 알림 전송 Backend
ChatGPT와 웹앱 개발 프로젝트를 시작합니다.
