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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 처음 마이로그에 접속을 하면 홈페이지가 열립니다. 이 홈페이지에는 등록된 전체 마이로그의 목록을 나타냅니다. 마이로그 전체 보기마이로그 전체 보기는 앱을 시작할 때 main.js에서 전체 마이로그를 로드하여 store의 mylogs state에 저장합니다.홈페이지가 열리면 mylogs state에 저장된 마이로그 목록을 화면에 나타냅니다.홈페이지 하단 footer에 생성일 순, 생성일 역순으로 정렬을 선택할 수 있는 아이콘이 있고, 이 아이콘은 HomeView.vue가 아니고 App.vue에 있습니다.사용자가 마이로그 정렬 아이콘을 누르면 App.vue..

store/modules/mylogs.js// src/store/modules/mylogs.jsimport { v4 as uuidv4 } from 'uuid';import { db, doc, collection, getDoc, getDocs, setDoc, addDoc,updateDoc, deleteDoc, arrayUnion, increment, where } from "@/firebase";import { query, orderBy } from "@/firebase";const state = { loading: false, error: null, mylog: null, mylogs: [], userMylogs: [], // 회원의 마이로그 isSubscribed: false, //..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 계정 정보 수정은 이름과 마이로그 이름만 수정할 수 있고, 별도의 폼으로 비밀번호를 변경할 수 있습니다. 1. 계정 정보 변경 마이로그 계정 항목은 이름, 마이로그 이름, 이메일, 비밀번호, uids입니다. 계정 정보 수정은 이름과 마이로그 이름만 수정할 수 있습니다.// src/store/modules/auth.js. . . // 계정 정보 수정async updateUserInfo({ commit }, updatedInfo) { try { const userDoc = doc(db, "users", updatedInfo.id); await ..

Vue로 PWA 개발 - 그랜파 개발자. 개발을 위해서는 개발 환경을 가지고 있어야 합니다. 프로그램 개발의 분야는 세상의 모든 일을 프로그램 개발 분야로 생각할 수 있을 정도로 넓습니다. 또 개발 환경, 개발 언어들이 엄청나게 다양해서 배우는 입장에서는 무엇을 배우는 것이 좋을지 선택이 너무 어렵습니다. 지금 내가 현업으로 하고 있는 머신 비전은 개발 환경도 단순하지 않고, 혼자 공부하기에는 주변 기기들이 너무 많이 필요해서 적당하지 않습니다. 그런데 개발이라는 것이 일종의 도구라서 어느 한 분야에서 개발이 능숙해지면 개발 환경을 바꾸거나 다른 개발 분야로 이동한다고 해도 새로운 개발 환경에 적응하고 새로운 개발 분야의 도메인 지식을 어느 정도 파악하고 나면 바로 개발 능력을 발휘할 수 있습니다. 개발..