1. myLog 개발

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

myLog - 내 일상의 기록

 

Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될 것입니다. myLog가 내 삶의 모든 순간에 나와 함께 하는 좋은 동반자가 되면 좋겠습니다.

개발은 ChatGPT와 함께 할 것이고, 개발이 완료되면 myLog는 firebase hosting을 통해 인터넷에서 사용자와 만날 것입니다.

1. myLog 개요

myLog는 나의 일상을 단문(한글 600자 제한)으로 공유하는 웹앱입니다.

1. 회원 가입해야 myLog를 쓸 수 있습니다.
2. 회원 인증 정보는 구글 계정으로 등록하여 구글 계정을 사용합니다.
3. 사용자 인증은 구글을 사용함으로 회원의 비밀번호는 웹앱에 저장하지 않습니다.
4. 일상의 myLog를 게시하면 구독자에게 푸시 알림을 보냅니다.
5. 내가 기록한 myLog는 사이트에 접속하는 모든 사람이 볼 수 있습니다.
6. myLog에 대해 댓글을 쓸 수 있으며 댓글에 대한 답글을 쓸 수 있습니다.
7. myLog를 검색할 수 있습니다.
8. 특정 사용자의 myLog를 모아볼 수 있습니다.
9. myLog의 조회수를 알 수 있습니다.
10. myLog를 누구 봤는지 알 수 있습니다.
11. myLog는 마크다운 에디터를 사용합니다.

2. Architecture Overview

1. Client Side: Vue.js (with Vuetify)
2. Backend as a Service: Firebase (Authentication, Firestore, Hosting)
3. Authentication : 사용자 인증
4. Firestore : 데이터베이스, users collection, posts collection
5. Hosting : 웹앱 myLog의 인터넷 서비스
6. 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와 웹앱 개발 프로젝트를 시작합니다.