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

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

마이로그 카테고리 관리 추가 전체 카테고리 {{ category.name }} mdi-delete

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

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

LoginView.vue 로그인 비밀번호 재설정 로그인 {{ error }} mdi-google Google 계정으로 로그인

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 독자마이로그 독자는 나를 구독하는 회원입니다. 독자 페이지는 나를 구독하는 회원들의 목록을 보여주고 회원을 선택하면 그 회원의 마이로그로 이동합니다.구독 정보는 subscriptions 컬렉션에 저장되고, 컬렉션은 userId(회원), authorId(글쓴이), 그리고 생성일의 필드를 가지고 있습니다.독자는 마이로그 상세 보기에서 구독 신청을 하게 되면 subscriptions 컬렉션에 저장이 되므로 subscriptions 컬렉션에서 authorId가 나의 userId와 같은 회원은 나의 독자입니다.이렇게 찾은 독자들을 목록으로 나타내고, 목..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT의 Vuetify 설명에서 보여준 예제 코드를 실행하여 봅시다.프로젝트를 만들고 예제 코드를 코딩한 후 실행합니다. 1. 프로젝트 만들기vue create vuetify-app Vue CLI v5.0.8? 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? Use history mode for router? (Requires proper server setup for ..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 찾기마이로그의 찾기는 아주 단순합니다. 검색어를 입력하여 찾기를 하면 제목 또는 내용에 입력한 검색어가 포함되어 있는 모든 마이로그를 찾습니다. 장난감 수준이기는 하지만 아쉬운대로 쓸만합니다. 찾기 기능을 좀 더 고도화 하려면 고려해야 할 것들이 많습니다. 여기서는 검색어를 입력하여 검색어를 포함하는 마이로그를 찾는 것으로 만족하려 합니다. 전체 마이로그는 이미 로드되어 있습니다. 검색어를 입력하면 제목 또는 내용에 검색어를 포함하고 있는 마이로그를 로드되어 있는 마이로그에서 필터를 적용하여 검색 결과를 구합니다. 영문의 경우 대소문자 구분없이..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT에게 물었습니다.vuetify에 대해 설명해줘.ChatGPTVuetify는 Vue.js 애플리케이션에서 현대적이고 일관된 UI 디자인을 쉽게 구현할 수 있도록 돕는 Material Design 기반의 UI 라이브러리입니다. Google의 Material Design 가이드라인을 충실히 따르고 있어 시각적으로 세련된 UI를 빠르게 구축할 수 있습니다. 또한 반응형 디자인과 테마 커스터마이징을 지원하며, 800개 이상의 UI 컴포넌트를 제공합니다.Vuetify의 주요 특징1. Material Design 기반Vuetify는 Google의 Material Design을 기반으로 설계되었기 때문에, 사용자 인터페이스가 일관되고 직관적입니다. 기본적으로 버튼,..