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

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

router/index.js// src/router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import store from '../store';import HomeView from '../views/HomeView.vue'import LoginView from '../views/LoginView.vue'import RegisterView from '../views/RegisterView.vue'import ProfileView from '../views/ProfileView.vue'import WriteMyLogView from '../views/WriteMyLogView.vue'import EditMyLogView from '....

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/)