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

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

Vue로 PWA 개발 - 그랜파 개발자.  혼자 공부를 하면서 웹 서비스까지 하기 위해 웹 서버 호스팅을 한다는 것은 무리가 있습니다. 서버 호스팅 자체에 벌써 부담감이 느껴집니다. 서버 호스팅, 서버 운영 또한 쉽지 않은 분야입니다. 비용도 생각하지 않을 수 없습니다.    그럼에도 웹 서비스를 위해서는 웹 서버가 있어야 한다고 생각했습니다.   무료로 사용할 수 있는 웹 서버에 대해 검색을 하다가 firebase를 이용하면 서버가 없이 웹 서비스를 할 수 있다는 것을 알게 되었습니다. 웹앱인데 모바일앱처럼 사용할 수 있다는 PWA도 알게 되었습니다.    과거 어느 때 웹개발과 안드로이드 모바일앱도 개발한 경험이 있어서 웹앱인데 모바일앱처럼 설치하여 사용할 수 있다는 것이 매력적으로 다가와 PWA를 ..

Vue로 PWA 개발 - 그랜파 개발자. 요즘 인터넷을 검색하다 보니 웹 개발 관련 자료들이 엄청나게 많습니다. 그리고 혼자 공부하기에도 좋은 것 같습니다. 혼자 공부를 하고 공부한 결과를 웹을 통해 바로 서비스를 하는 것이 공부에 효과적이고, 또 웹에 서비스를 하게 되면 다른 사람들이 쉽게 볼 수 있고 경우에 따라서 여러 도움을 받을 수도 있습니다. 내가 공부한 것을 웹에 공개를 했으므로 누구나 그 내용을 볼 수 있기 때문입니다. 내가 개발한 것은 웹에 서비스하면서 테스트 해야 내가 개발한 것들을 이해할 수 있습니다. 사실 공부하면서 이러 저러한 예제를 무작정 따라 코딩하다보면 뭐가 뭔지 모르면서 코딩할 경우도 많습니다. 그래서 실제 웹에서 서비스되는 모습을 보는 것이 중요한데, 이를 위해서 웹 서버를..