분류 전체보기 246

Vue로 PWA 개발, ChatGPT가 시키는 대로 프론트엔드 UI를 만들었습니다.

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

mylog 서비스 워커 등록

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 서비스 워커Firebase Cloud Messaging (FCM)과 서비스 워커는 웹 애플리케이션에서 푸시 알림 기능을 구현하기 위해 함께 작동하는 중요한 요소입니다. FCM은 서버에서 클라이언트로 푸시 알림을 전송하는 서비스이고, 서비스 워커는 브라우저가 이 알림을 백그라운드에서 처리할 수 있도록 돕습니다. 그러므로 앱이 알림 권한을 받거나 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다서비스 워커는 브라우저에서 백그라운드 스크립트로 실행되며, FCM으로부터 받은 푸시 메시지를 처리하여 사용자에게 알림을 표시하는 역할을 합니다..

Vue PWA mylog 2024.11.27

Vue로 PWA 개발, ChatGPT에게 프론트엔드 앱을 위한 UI를 물었습니다.

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

Vue로 PWA 개발, ChatGPT의 프론트엔드와 연동하여 사용할 Firestore의 예제를 실행해 봅시다.

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

mylog backend

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.Firebase Cloud Functions우리는 서버가 없습니다. FCM은 백엔드 서비스가 필요합니다.그래서 ChatGPT에게 물었습니다..Firebase Cloud Functions는 서버리스(Serverless) 환경에서 코드를 실행할 수 있는 백엔드 서비스로, 개발자가 별도의 서버를 관리하지 않고도 Firebase 애플리케이션의 백엔드를 확장할 수 있게 해줍니다. 클라우드 함수는 특정 이벤트 발생 시 자동으로 실행되며, Firebase나 기타 Google Cloud 서비스와 쉽게 통합할 수 있습니다.1. Firebase Cloud Functions..

Vue PWA mylog 2024.11.25

Vue로 PWA 개발, ChatGPT에게 프론트엔드와 연동하는 Firestore의 예제를 요청했습니다.

Vue로 PWA 개발 - 그랜파 개발자. Firestore의 기본적인 사용법을 알기 위해 먼저 간단한 예제를 살펴보는 것도 좋습니다.ChatGPT에게 물었습니다.firestore를 연동하여 사용하는 예제 하나 보여줘.ChatGPT아래는 Firestore를 Vue 프로젝트에 연동하여 간단히 데이터를 추가하고 가져오는 예제입니다.예제 목표Firestore에 "할 일 목록"을 저장.Firestore에서 "할 일 목록"을 가져와 화면에 표시.Firestore 데이터 구조Firestore의 컬렉션 이름은 todos입니다. 각 문서는 다음과 같은 구조를 가집니다:{ "title": "예제 할 일", "completed": false}예제 코드1. Firebase 초기화 (firebase.js)먼저 Firebas..

mylog FCM과 서비스 워커

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog FCM과 서비스 워커마이로그는 Firebase v9(모듈형 SDK) 에서 FCM(Firebase Cloud Messaging) 서비스를 구현하려고 합니다.웹 애플리케이션에 푸시 알림을 통합하기 위하여 다음의 프로세스가 필요합니다.알림을 보내려면 사용자의 권한을 요청하고, 사용자가 권한을 허용하면 토큰을 받아 클라우드에 저장합니다.알림을 보내려면 사용자의 FCM 토큰을 사용하여 FCM 서버에 요청하고 Firebase Cloud Functions를 사용하여 알림을 보낼 수 있습니다.사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FC..

Vue PWA mylog 2024.11.24

Vue로 PWA 개발, ChatGPT에게 프론트엔드 개발을 위한 서버리스 백엔드 Firebase를 물었습니다.

Vue로 PWA 개발 - 그랜파 개발자. 우리는 PWA를 개발함에 있어 Client Side는 Vue.js (with Vuetify) 로 개발하고,Backend 서비스는 Firebase (Authentication, Firestore, Hosting)를 사용하여 개발을 진행합니다.서버없이 개발을 진행하고, 웹에 서비스를 하기 위해서는 Firebase를 알아야 합니다. ChatGPT에게 물었습니다.firebase를 설명해줘.ChatGPTFirebase는 Google에서 제공하는 개발 플랫폼으로, 웹 및 모바일 애플리케이션 개발에 필요한 다양한 도구와 서비스를 제공합니다. Firebase는 클라우드 기반으로 동작하며, 백엔드 서비스, 데이터베이스, 애널리틱스, 인증, 호스팅 등 애플리케이션 개발의 여러 단계..