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

{{ getMylogName }}mdi-chevron-right {{ mylog.title }} {{ mylog.userName }} . {{ mylog.createdAt.toDate().toISOString().split('T')[0] }} 0" > ({{ mylog.views }}) {{ isSubscribed ? "구독 취소" : "구독" }}  mdi-check-circle ..

LoginView.vue 로그인 비밀번호 재설정 로그인 {{ error }} mdi-google Google 계정으로 로그인

HomeView.vue {{ mylog.title }} 댓글 0"> {{mylog.commentCount }}   {{ mylog.userName }} . {{ formatDate(mylog.createdAt) }} 0" > ({{ mylog.views }}) 마이로그가 없습니다. {{ error.message }}

EditMyLogView.vue 마이로그 수정 !!v || 'Title is required']"> !!v || 'Content is required']"> 수정   mdi-pencil

AboutView.vue 마이로그는? '마이로그'는 일상에 대한 짧은 글을 공유하는 서비스입니다. Client Side는 Vue.js (with Vuetify)로 개발하고, Backend 서비스는 Firebase (Authentication, Firestore, Hosting)를 사용하여 개발을 진행합니다. 개발이 진행되는 순서대로 소스코드를 공개하고, 베타 버전은 웹에 서비스되고 있습니다. mdi-arrow-right Beta Test : mylog, 일상의 기록

App.Vue 마이로그, 일상의 기록 mdi-logout {});"> {{ route.icon }} {{ route.title }} - Beta Test 공지 - '마이로그'는 Vue와 Vuetify로 개발한 PWA로서 일상에 대한 짧은 글을 공유하는 서비스입니다. ..

functions/index.js// functions/index.jsconst { onDocumentCreated } = require('firebase-functions/v2/firestore');const logger = require("firebase-functions/logger");const admin = require('firebase-admin');// Initialize Firebase Adminadmin.initializeApp();// Reference to Firestoreconst db = admin.firestore();// 마이로그를 쓰면 구독자에게 알림을 전송한다.exports.sendNewMylogNotification = onDocumentCreated('/mylogs/{..

main.js// src/main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'import vuetify from './plugins/vuetify'import { getMessaging, onMessage } from "firebase/messaging";Vue.config.productionTip = falsenew Vue({ router, store, vuetify, render: h => h(App), created() { // Set up Firebase auth state chan..

firebase-messaging-sw.js// firebase-messaging-sw.jsimportScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-app-compat.js');importScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-messaging-compat.js');// Your web app's Firebase configuration (same as in your firebase.js)const firebaseConfig = { apiKey: "your-api-key", authDomain: "your-auth-domain", projectId: "your-proj..

store/modules/mylogs.js// src/store/modules/mylogs.jsimport { v4 as uuidv4 } from 'uuid';import { db, doc, collection, getDoc, getDocs, setDoc, addDoc,updateDoc, deleteDoc, arrayUnion, increment, where } from "@/firebase";import { query, orderBy } from "@/firebase";const state = { loading: false, error: null, mylog: null, mylogs: [], userMylogs: [], // 회원의 마이로그 isSubscribed: false, //..