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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 댓글, 답글마이로그 상세 보기에서 댓글과 댓글에 대한 답글을 쓸 수 있습니다. 마이로그는 하나의 마이로그에 대해 여러개의 댓글을 쓸 수 있고, 각 댓글에 대한 답글의 기능도 있습니다. 각 댓글에 대해 여러 개의 답글이 있다는 뜻입니다. 답글에 대한 댓글, 댓글에 대한 답글, 또 댓글… 이렇게 댓글 트리의 깊이를 더해 가는 것은 개발자 또는 요구에 따라 필요하겠지만, 마이로그는 댓글과 그것에 대한 답글까지만 기능을 구현합니다. 1. 댓글과 답글 로드, 저장 댓글은 마이로그에 종속 되므로 각 마이로그의 comments 서브 컬렉션에 저장되고, 댓글..

Vue로 PWA 개발 - 그랜파 개발자.Chat GPT에게 물었습니다.vue의 예제 프로그램 하나 만들어줘.ChatGPTVue.js를 사용하여 간단한 할 일 목록 (To-Do List) 애플리케이션을 만들어 보겠습니다. 이 예제는 사용자가 할 일을 추가하고, 완료 표시를 하며, 목록에서 삭제할 수 있도록 구현합니다.1. 프로젝트 생성 및 기본 설정먼저, Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.npm install -g @vue/clivue create todo-appcd todo-appnpm run serve2. App.vue 파일 수정App.vue 파일을 열고 아래와 같이 코드를 작성하여 기본적인 UI와 기능을 구현합니다. To-Do List ..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 모아 보기마이로그 상세보기 페이지 상단에 글쓴이의 마이로그 이름이 있습니다. 이것을 누르면 글쓴이의 모든 마이로그를 모아볼 수 있습니다. 1. mylog 모아 보기 이동 마이로그 상세 페이지에서 글쓴이의 마이로그 이름을 클릭하면 글쓴이의 id로 goToUserMylogs(author.id) 함수를 호출하고 이것은 Vue Router의 페이지 간 네비게이션 메서드 $router.push()를 호출하여 글쓴이의 마이로그 홈인 userlogs(UserMyLogsView.vue) 페이지로 이동합니다.goToUserMylogs(userId) {    t..

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

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT에게 Vue를 물었습니다.'Vue에 대해 설명해줘'대답의 원문 전체는 아닙니다.다음과 같은 내용으로 답을 해 줍니다.Chat GPT는 각 질문 주제에 대해 기억하고 있기 때문에 질문하는 사람에 따라 다른 대답을 할 수도 있습니다.Chat GPT1. Vue.jsVue.js는 사용자 인터페이스를 만들기 위해 설계된 진보적인 자바스크립트 프레임워크입니다. Vue의 주요 목표는 웹 애플리케이션의 UI와 관련된 작업을 쉽게 구현할 수 있도록 돕는 것입니다. 반응형 데이터 바인딩과 컴포넌트 기반 아키텍처를 통해 웹 애플리케이션 개발을 효율적으로 할 수 있게 해줍니다.Vue.js는 특히 SPA(Single Page Application)를 만드는 데 매우 적합하며..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 마이로그 조회수 마이로그 조회수는 로그인을 하였던 하지 않았던 하루에 몇번을 조회를 하던 한사람은 하루에 한번만 조회수를 카운트 하려고 합니다.회원과 비회원이 하루에 한 번만 조회수를 증가시키도록 조회 기록을 저장하고 관리하기 위하여 views 컬렉션을 사용하고, views 컬렉션은 각 글에 대한 조회 기록을 관리하기 위한 구조입니다. 이것은 Firestore에 저장되며, 각 사용자의 조회 기록을 날짜와 함께 저장하여 중복 조회를 방지합니다. 1. views 컬렉션 views 컬렉션은 특정 게시글(mylogId)에 대한 각 사용자의 조회 기록을 저장하는..

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/{..

Vue로 PWA 개발 - 그랜파 개발자. 좋아, 그럼 이놈(Chat GPT)에게 배워보자. 프론트엔드 공부를 시작합니다.이런식입니다.PWA를 설명해줘.Chat GPT의 대답입니다. PWA(Progressive Web App)는 웹 애플리케이션을 네이티브 애플리케이션처럼 사용자에게 제공할 수 있도록 한 기술입니다. 기본적으로 웹 기반이지만, 오프라인 접근, 푸시 알림, 홈 화면에 추가 같은 기능을 통해 네이티브 앱의 사용자 경험을 어느 정도 재현합니다. PWA의 핵심 특징은 다음과 같습니다:반응형 디자인: 다양한 화면 크기와 디바이스에 최적화된 사용자 경험을 제공합니다. 데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 동일한 UI/UX를 유지합니다.오프라인 지원: 서비스 워커(Service Worker..

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..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 내가 작성한 마이로그는 수정할 수 있습니다. 상세 보기 페이지에서 수정을 위하여 수정 페이지로 이동할 때 props를 이용하여 수정할 마이로그를 전달합니다.마이로그 수정마이로그 수정을 위하여 상세 보기 페이지에서 수정 버튼을 누르면 수정 페이지로 이동합니다.수정 페이지로 이동할 수 있도록 Vue Router에서 라우팅 설정을 추가합니다. Vue Router에서는 props 옵션을 통해 mylogId와 mylog를 라우트 파라미터로 수정 컴포넌트로 전달할 수 있습니다.수정 페이지에서는 props로 mylogId와 mylog를 받아 화면에 출력하고 수정할 ..