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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 카테고리마이로그가 늘어나면 스크롤하면서 읽는 것만으로는 불편합니다. 마이로그의 개수가 많아지면 한없이 스크롤해야 하기 때문입니다. 그래서 마이로그 카테고리를 등록하여 카테고리 별로 분류할 수 있게 하고자 합니다. 마이로그를 볼 때 카메고리별로 볼 수 있으면 같이 주제에 대한 글들이 묶여 있으니 보는 것이 편리하겠지요.카테고리는 각 사용별로 등록할 수 있습니다. 각 사용자는 자신의 마이로그를 쓸 때 자신이 등록한 카테고리로 마이로그의 카테고리를 정할 수 있습니다. 사용자가 등록한 카테고리는 DB에 저장되어 앱이 종료 후 새로 실행되어도 카테고리는..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT의 PWA 예제를 Router 예제에 추가하였습니다.PWA예제가 단순히 Post List 화면 하나만 있어 페이지 라우팅 등이 필요해서 입니다. 앞으로 계속 페이지를 추가하면서 프로젝트를 진행할 예정입니다. PWA 예제를 실행하여 봅시다.프로젝트 만들기1. Vue 프로젝트 만들기vue create my-pwa-app ? Please pick a preset: Manually select features? Check the features needed for your project: Babel, PWA, Router, Vuex? Choose a version of Vue.js that you want to start the project with 2.x..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog FCM 받기FCM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.1. 포그라운드에서 메시지 수신사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를 수신할 수 있습니다. 이것은 main.js에서 설정합니다.src/main.js// src/main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import r..

알림 요청 '알림 요청'을 하면 구독 중인 저자의 새로운 마이로그가 저장되면 알림을 받을 수 있습니다. mdi-bell 알림 요청 --> mdi-bell{{ isGranted ? "알림 차단" : "알림 요청" }} {{ error }}

Vue로 PWA 개발 - 그랜파 개발자. 이제까지 배운 내용을 정리하기 위하여 간단한 PWA 예제를 하나 만들어 보는 것이 좋겠습니다..대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능은 Create(생성), Read(읽기), Update(갱신), Delete(삭제)입니다. 이를 보통 CRUD라고 합니다.Firestore를 연동하여 CRUD가 있는 간단한 PWA를 만들어 봅시다. ChaGPT에게 물었습니다.vue,vuex,vuetify,firestore v2를 이용하여 글을 쓰고, 저장하고, 읽고, 수정하는 pwa를 만들어줘ChatGPTFirestore v2 SDK를 사용하는 경우 약간의 차이가 있으므로, 아래 가이드에서 Firebase Web SDK v9 모듈 방식으로 구현하겠습니다. Vu..