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

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를 받아 화면에 출력하고 수정할 ..

Vue로 PWA 개발 - 그랜파 개발자. 무엇을 공부할지 정해졌습니다. 프론트엔드를 공부하기로 한 것입니다. ‘어떻게 공부하지?’ 공부를 위하여 튜토리얼을 찾아 이런 저런 사이트를 방문하고, 기초 문법을 배우기 위해 책을 사서 읽고 유튜브를 시청하는 등 그런 공부 방법은 내키지 않습니다. 사실 난 ‘그랜파 개발자’입니다. 생성형 AI가 코딩을 잘해서 장래에 프로그래머란 직업이 없어질 것이라는 풍문이 인터넷을 떠돌고 있습니다.Chat GPT에게 머신 비전에서 필요한 이미지 프로세싱 관련 간단한 클래스 하나 만들어 달라고 했습니다. Chat GPT가 짜준 코드를 보고 아주 감탄을 했습니다. 코드의 품질이 보통이 아닙니다. 조금만 손보면 실무에 바로 적용할 수 있을 것 같습니다. 직접 Chat GPT에 접속하..

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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 홈페이지의 마이로그 목록에서 마이로그를 선택하면 상세보기로 이동합니다. 상세 보기에서는 댓글과 답글을 쓸 수 있고, 구독과 수정도 할 수 있습니다.마이로그 상세보기마이로그는 단문 서비스이므로 마이로그 전체 목록 보기에서 각 마이로그 내용 전체를 볼 수 있습니다. 그럼에도 상세보기가 있는 이유는 마이로그에 대한 댓글과 댓글에 대한 답글을 위한 것입니다. 그리고 조회수를 카운트 합니다. 전체 목록에서 내용을 볼 수 있는데, 굳이 마이로그를 선택하여 상세 보기 페이지가 열릴 때 조회수를 카운트하는 것이 어색하긴 합니다.마이로그 리스트에서 마이로그를 선택하면 ..