mylog, 일상의 기록

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

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

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

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

1. mylog는?

myLog는 나의 일상을 짧은 글을 공유하는 웹앱 입니다.

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

2. mylog Architecture

1. Client Side: Vue.js (with Vuetify)
2. Backend as a Service: Firebase (Authentication, Firestore, Hosting)
   • Authentication : 사용자 인증
   • Firestore : 데이터베이스, users collection, posts collection
   • Hosting : 웹앱 myLog의 인터넷 서비스
3. PWA: Service Workers, Web App Manifest

3. mylog 구성

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store';

import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import RegisterView from '../views/RegisterView.vue'
import ProfileView from '../views/ProfileView.vue'
import WriteMyLogView from '../views/WriteMyLogView.vue'
import EditMyLogView from '../views/EditMyLogView.vue'

import MyMyLogsView from '../views/MyMyLogsView.vue'
import MyLogView from '../views/MyLogView.vue'
import UserMyLogsView from '../views/UserMyLogsView.vue'
import SearchMyLogsView from '../views/SearchMyLogsView.vue'
import SubscriptionsView from '../views/SubscriptionsView.vue'
import ReadersView from '../views/ReadersView.vue'
import NotificationView from '../views/NotificationView.vue'
import ManageView from '../views/ManageView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'HomeView',
    component: HomeView
  },
  {
    path: '/login',
    name: 'LoginView',
    component: LoginView
  },
  {
    path: '/register',
    name: 'RegisterView',
    component: RegisterView
  },
  {
    path: '/profile',
    name: 'ProfileView',
    component: ProfileView,
    meta: { requiresAuth: true }
  },
  {
    path: '/write',
    name: 'WriteMyLogView',
    component: WriteMyLogView,
    meta: { requiresAuth: true }
  },
  { 
    path: '/mylog/:id', 
    name: 'MyLogView', 
    component: MyLogView
  },
  {
    path: '/mylog/edit/:mylog',
    name: 'EditMyLogView',
    component: EditMyLogView,
    props: true,
  },  
  {
    path: '/mylogs',
    name: 'MyMyLogsView',
    component: MyMyLogsView,
    meta: { requiresAuth: true }
  },
  {
    path: '/userlogs/:userId',
    name: 'UserMyLogsView',
    component: UserMyLogsView
  },
  {
    path: '/search',
    name: 'SearchMyLogsView',
    component: SearchMyLogsView
  },
  {
    path: '/subscribing',
    name: 'SubscriptionsView',
    component: SubscriptionsView,
    meta: { requiresAuth: true }
  },
  {
    path: '/subscriber',
    name: 'ReadersView',
    component: ReadersView,
    meta: { requiresAuth: true }
  },
  {
    path: '/notification',
    name: 'NotificationView',
    component: NotificationView,
    meta: { requiresAuth: true }
  },
  {
    path: '/manage',
    name: 'ManageView',
    component: ManageView,
    meta: { requiresAuth: true  }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const user = store.state.auth.user;

  if (requiresAuth && !user) {
    next('/login');
  } else {
    next();
  }
});

export default router

Vue PWA 프로젝트, mylog 코드