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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 마이로그 계정 만들기는 먼저 이메일과 비밀번호로 구글 계정을 생성하고, 구글 계정을 생성할 때 구글로 부터 받은 uid를 uids에 저장한 후 마이로그의 users 컬렉션에 계정 만들기에서 입력한 사용자 정보를 저장합니다. 그러므로 마이로그는 users 컬렉션에 사용자의 비밀번호를 저장하지 않습니다. 1. 계정 등록 항목 마이로그 계정 만들기 항목들입니다.이름 : 회원의 이름입니다. 별명을 등록해도 됩니다.마이로그 이름 : 회원만의 마이로그를 모아볼 때 회원의 마이로그 이름을 나타냅니다. 회원별 서브홈의 이름입니다.이메일 : 회원의 id로 사용합니다.비..

Vue로 PWA 개발 - 그랜파 개발자. ‘집에 가자.’ 앱을 말로 짜 봅시다.  현재의 나의 위치는 어디인가? 집의 위치는 현재 나의 위치에서 어디로 얼마나 떨어져 있나? 집에 가기 위해서는 어떤 경로를 거쳐야 하는가? 아파트 로비에 도착하면 비밀번호는 무엇이고 어떻게 입력을 해야 하는가? 엘리베이터는 어떻게 타고 몇층에 내려야 하는가? 집의 호수는 어떻게 되는가? 문을 열기 위해서는 어떻게 해야 하는가? 위의 과정을 프로그램 언어로 코딩을 해야 합니다. 이런 것을 프로그램적인 사고라 하던가요?  그러므로 개발자는 프로그램을 코딩하기 전에 전체 과정을 말로 짜 봐야 합니다. Vue 프로젝트 Beta Test : [mylog, 일상의 기록](https://my-project-bd617.web.app/

firebase.js// src/firebase.jsimport { initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";import { getFirestore, collection, addDoc, getDoc, getDocs, setDoc, deleteDoc, query, where, updateDoc, doc, orderBy, arrayUnion, increment } from "firebase/firestore";import { getMessaging, getToken } from "firebase/messaging";const firebaseConfig = { api..

Vue로 PWA 개발 - 그랜파 개발자. 개발자가 되기로 결심을 하고 프로그램 언어를 배우는 중 누군가에게 들은 말입니다.  ‘말이 되어야 프로그램이 된다.’ 이 말은 개발자로서 평생을 살아오면서 머리에 새긴 말들 중 하나입니다. 무슨 말이냐구요?  이런 뜻입니다. ‘집에 가자.’ 말하는 사람이나 듣는 사람이 집이 어딘지 알고 있으면 아무 문제될 것이 없습니다. 그런데 듣는 사람이 집이 어딘지 모릅니다. 그렇다면 집이 어딘지부터 설명이 필요합니다. 그런데 듣는 사람이 사람이 아닙니다. 컴퓨터 입니다.  프로그램적으로 생각을 해 봅시다. Vue 프로젝트 Beta Test :  [mylog, 일상의 기록](https://my-project-bd617.web.app/)

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.  vue create 명령어로 만들어진 프로젝트를 수정하면서 웹앱 개발을 시작합니다.애플리케이션의 상태(state)를 관리하기 위해 store를 사용하고, Vue 애플리케이션의 여러 컴포넌트들이 서로 독립적으로 상태를 관리할 필요 없이, store를 통해 공통된 상태를 쉽게 공유하고 제어할 수 있습니다.store는 일반적으로 Vuex라는 라이브러리를 이용해 구현되며 Vuex는 Vue.js의 공식 상태 관리 패턴이자 라이브러리로, 주로 대규모 애플리케이션에서 여러 컴포넌트 간의 상태를 일관성 있게 관리하는 데 유용합니다. Vuex의 상태 관리 원칙은 단방..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록 Vue CLI(Command Line Interface)의 vue create 명령어를 사용하여 새로운 Vue.js 프로젝트를 생성할 수 있습니다. 이 명령어를 실행하면 Vue 프로젝트 구조를 자동으로 설정하고 필요한 기본 파일과 폴더를 생성해 주므로 개발을 빠르게 시작할 수 있습니다.1. Vue 프로젝트 만들기vue create mylog? 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..

Vue 프로젝트 Beta Test : mylog, 일상의 기록Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될 것입니다. mylog가 내 삶의 모든 순간에 나와 함께 하는 좋은 동반자가 되면 좋겠습니다.개발은 ChatGPT와 함께 할 것이고, 개발이 완료되면 mylog는 firebase hosting을 통해 인터넷에서 사용자와 만날 것입니다.1. mylog는?myLog는 나의 일상을 짧은 글을 공유하는 웹앱 입니다.회원 가입해야 mylog를 쓸 수 있습니다.회원 인증 정보는 구글 계정으로 등록하여 구글 계정을 사용합니다.사용자 인증은 구글을..

mylog는?'마이로그'는 일상에 대한 짧은 글을 공유하는 서비스입니다.Client Side는 Vue.js (with Vuetify)로 개발하고,Backend 서비스는 Firebase (Authentication, Firestore, Hosting)를 사용하여 개발을 진행합니다.개발이 진행되는 순서대로 소스코드를 공개하고, 베타 버전은 웹에 서비스되고 있습니다.Beta Test : mylog, 일상의 기록

Vue로 PWA 개발 - 그랜파 개발자고맙습니다.지금까지 공부한 PWA mylog를 소스코드 설명 중심으로 개발에 대한 내용을 소개하는 새로운 책을 시작합니다.mylog, 일상의 기록베타 테스트 : mylog, 일상의 기록

Vue로 PWA 개발 - 그랜파 개발자 ‘내로그’ 메뉴를 눌러 나의 마이로그 목록을 볼 때 기본은 작성일 역순으로 보입니다. 그런데 마이로그 중 조회순으로 보고 싶을 때가 있습니다. 그래서 ‘내로그’ 페이지에 정렬 방법에 대한 ‘최신순’, ‘조회순’ 두 개의 버튼을 추가합니다. ‘최신순’은 작성일 역순으로 정렬을 하고, ‘조회순’은 조회수가 많은 순서로 정렬하여 보여줍니다.1. 쿼리마이로그 보기 정렬을 위한 쿼리입니다.최신순 쿼리입니다.query(collection(db, "mylogs"), where("userId", "==", userId), orderBy("createdAt", "desc"));조회순 쿼리입니다.query(collection(db, "mylogs"), where("userId", "..