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

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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 로그인 마이로그 로그인은 먼저 이메일과 패스워드로 구글에 로그인하여 uid를 받아 이것으로 마이로그 users collection에서 회원 정보를 가져와 로그인 설정을 합니다. 1. 로그인 인증을 위하여 signInWithEmailAndPassword 함수를 사용하고, 이것은 Firebase Authentication에서 제공하는 함수로 이메일과 비밀번호를 사용하여 사용자를 로그인시키는 기능입니다. 주로 Firebase와 연결된 앱이나 웹사이트에서 사용자 인증을 처리할 때 사용됩니다. 이 함수는 사용자가 입력한 이메일과 비밀번호가 Firebas..

Vue로 PWA 개발 - 그랜파 개발자. 개발자가 되기 위해 코딩을 공부하면서 자신이 공부한 것을 모아두는 좋은 방법은 블로그 등 온라인에 저장해두면 좋습니다. 그러면 공부한 내용을 정리하여 저장하는 과정에서 나의 지식을 한번 다질 수 있고, 후에 내가 필요해서 다시 찾을 때 편리합니다. 블로그를 한다면 조회수를 신경쓰지 않을 수 없습니다. 그러나 처음 공부하는 입장에서 조회수를 신경 쓰는 것은 우물가에서 숭늉을 찾는 격입니다. 다만 자신이 공부한 내용이 축적되고 한번씩 기록한 내용을 내 스스로 보면서 내 공부의 내용을 확인하는 용도로 사용하면 좋겠지요. 그리고 눈에 성과가 보여야 열정도 계속 유지하는데 도움이 됩니다. 이것은 그랜파 개발자의 생각이고, 이제 공부하면서 실천하려 합니다. ^^ Vue 프로..

store/modules/fcm.js// src/store/modules/fcm.jsimport { messaging } from '@/firebase';import { getToken } from "firebase/messaging";import { db, collection, doc, setDoc, getDoc, updateDoc, deleteDoc, arrayUnion } from "@/firebase";const state = { isGranted: false, isLoading: false, error: null};const mutations = { setGranted(state, isGranted) { state.isGranted = isGranted; }, setError(s..

store/modules/auth.js// src/store/modules/auth.jsimport router from '@/router'; // Vue Router importimport { auth, db, collection, doc, getDocs, addDoc, updateDoc, arrayUnion, query, where } from "@/firebase";import { createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, sendPasswordResetEmail, EmailAuthProvider, reauthenticateWithCredential, updatePassword, GoogleAu..

store/index.js// src/store/index.jsimport Vue from 'vue';import Vuex from 'vuex';import auth from './modules/auth';import mylogs from './modules/mylogs';import fcm from './modules/fcm';Vue.use(Vuex);export default new Vuex.Store({ modules: { auth, mylogs, fcm }});

Vue로 PWA 개발 - 그랜파 개발자.인터넷을 검색을 통하여 이런 저런 예제를 찾아 직접 하나하나 코딩을 하면서 공부를 할 때는 모두가 이해가 되고 아는 것 같습니다. 그러나 얼마간의 시간이 흐르고 보지 않고 직접 코딩을 하려고 시도를 하면 막연합니다. 코딩의 실마리가 잘 풀리지 않습니다. 이때 예전에 공부한 내용을 찾게 됩니다. 이렇게 찾아서 내가 의도한 코딩을 하게 된다면 이때는 안다고 할 수 있습니다.공부한 것을 모아 두는 것이 필요한 이유입니다. 공부를 하면서 공부한 내용을 이해했는지 알아 볼 수 있는 가장 좋은 방법은 다른 사람에 설명을 하는 것입니다. 설명을 잘 하면 나는 그것을 이해한 것입니다. 막상 설명을 하려니 생각이 꼬이면 나는 아직 그것을 이해 하지 못한 것입니다. 이해를 하지 못하..