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

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 알림 요청마이로그는 사용자가 마이로그를 저장하면 구독자에게 알림을 보내려고 합니다.알림을 받이 위해서 사용자는 알림을 받는 것을 허용해야 합니다. 알림을 허용한 후 어떤 글쓴이에 대해 구독을 요청하면 마이로그는 구독 요청한 글쓴이가 마이로그를 새로 저장하면 알림을 보냅니다.알림을 차단하면 알림을 받지 않겠다는 것으로 글쓴이에 대한 구독과 관계없이 알림을 보내지 않습니다.글쓴이에 대해서는 사용자가 구독 요청을 하면 알림을 보내고, 구독 취소를 하면 알림을 보내지 않습니다.알림 요청을 하면 마이로그는 사용자에게 알림 허용을 요청하고, 사용자가 알림..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT 에게 상단 헤더, 하단, 그리고 사이드 메뉴로 구성되어 있는 UI의 예제를 요청하였습니다.ChatGPT가 보여준 예제를 실행하여 봅시다.프로젝트를 만들고 프로젝트 만들기에서 생성된 코드에서 App.Vue를 ChatGPT가 제공한 코드로 교체하여 실행합니다.1. Vue 프로젝트 만들기vue create my-pwa ? 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 서비스 워커Firebase Cloud Messaging (FCM)과 서비스 워커는 웹 애플리케이션에서 푸시 알림 기능을 구현하기 위해 함께 작동하는 중요한 요소입니다. FCM은 서버에서 클라이언트로 푸시 알림을 전송하는 서비스이고, 서비스 워커는 브라우저가 이 알림을 백그라운드에서 처리할 수 있도록 돕습니다. 그러므로 앱이 알림 권한을 받거나 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다서비스 워커는 브라우저에서 백그라운드 스크립트로 실행되며, FCM으로부터 받은 푸시 메시지를 처리하여 사용자에게 알림을 표시하는 역할을 합니다..

Vue로 PWA 개발 - 그랜파 개발자. 웹 앱의 UI가 상단 헤더, 하단, 그리고 사이드 메뉴로 구성되어 있는 경우가 많습니다.그래서 ChatGPT에게 물었습니다.vuetify로 app-bar footer drawer가 있는 ui를 만들어줘ChatGPT아래는 Vuetify를 사용하여 App Bar, Footer, Drawer가 포함된 기본 UI를 구현한 코드입니다. 이 UI는 모바일과 데스크톱 환경 모두에서 잘 작동하며, Drawer는 사이드 메뉴로, App Bar는 상단 헤더로, Footer는 하단에 고정된 레이아웃으로 구성됩니다.Vuetify UI 예제 코드 My App ..

{{ getMylogName }}mdi-chevron-right {{ mylog.title }} {{ mylog.userName }} . {{ mylog.createdAt.toDate().toISOString().split('T')[0] }} 0" > ({{ mylog.views }}) {{ isSubscribed ? "구독 취소" : "구독" }}  mdi-check-circle ..

Vue로 PWA 개발 - 그랜파 개발자. 우리는 Firestore 예제를 통해 Firestore의 CRUD를 이해하려고 합니다.Firestore CRUD1. Firestore 컬렉션 접근:collection(db, "todos")를 통해 todos 컬렉션에 접근.2. 할 일 추가: CreateaddDoc를 사용해 Firestore에 새 문서를 추가.const docRef = await addDoc(collection(db, "todos"), { title: this.newTodo.trim(),: false,});3. 할 일 가져오기: ReadgetDocs로 Firestore에서 모든 문서를 가져오기const querySnapshot = await getDocs(collection(db, "todos")..