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

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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog FCM 보내기Firebase용 Cloud Functions라고도 알려진 Firebase Functions는 개발자가 서버를 관리하지 않고도 백엔드 코드를 작성하고 배포할 수 있도록 해주는 Firebase에서 제공하는 서버리스 백엔드 서비스입니다.사용자가 알림을 요청하였다면 firestore에 토큰이 저장되어 있습니다. 한사람의 사용자가 PC와 모바일 등을 사용할 수 있으므로 각 사용자는 여러 토큰이 있습니다. 이 사용자가 마이로그 저자에 대해 구독을 요청하였다면 마이로그 저자가 새 마이로그를 저장하면 푸시 알림이 전송됩니다.Firebase Cl..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT가 제공한 예제인 Vuetify와 함께 Vue Router를 사용하여페이지 라우팅 기능이 포함되어 있고,App Bar, Drawer, Footer를 포함한 UI를 가진 앱을 실행하여 봅니다.예제를 실행하도록 하는 과정에서 약간의 수정된 내용이 있습니다. 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...

{{ getMylogName }} 최신순 오래된순 조회순 0"> {{ mylog.category }} 카테고리 없음 {{ mylog.title }} 0" style="cursor: pointer">댓글 {{mylog.commentCount }}  ..

Vue로 PWA 개발 - 그랜파 개발자. 애플리케이션에서 페이지 간의 이동(라우팅)을 관리하기 위해서는 라우터가 필요합니다. SPA(Single Page Application)에서는 전체 애플리케이션이 단일 HTML 페이지에서 작동하며, Vue Router를 사용하면 URL 경로에 따라 애플리케이션의 화면을 동적으로 전환할 수 있습니다.그리고 라우팅을 통해 이동할 페이지 컴포넌트도 만들어야 합니다. ChatGPT에게 물었습니다.router 만들어 줘ChatGPTVuetify와 함께 Vue Router를 사용하여 페이지 라우팅 기능을 구현하려면 다음 단계를 따르면 됩니다. 아래는 Vue Router를 설정하고, App Bar, Drawer, Footer를 포함한 UI와 함께 동작하는 예제입니다.1. Vue..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 알림 요청마이로그는 사용자가 마이로그를 저장하면 구독자에게 알림을 보내려고 합니다.알림을 받이 위해서 사용자는 알림을 받는 것을 허용해야 합니다. 알림을 허용한 후 어떤 글쓴이에 대해 구독을 요청하면 마이로그는 구독 요청한 글쓴이가 마이로그를 새로 저장하면 알림을 보냅니다.알림을 차단하면 알림을 받지 않겠다는 것으로 글쓴이에 대한 구독과 관계없이 알림을 보내지 않습니다.글쓴이에 대해서는 사용자가 구독 요청을 하면 알림을 보내고, 구독 취소를 하면 알림을 보내지 않습니다.알림 요청을 하면 마이로그는 사용자에게 알림 허용을 요청하고, 사용자가 알림..