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

Vue로 PWA 개발 - 그랜파 개발자. 무엇을 공부할지 정해졌습니다. 프론트엔드를 공부하기로 한 것입니다. ‘어떻게 공부하지?’ 공부를 위하여 튜토리얼을 찾아 이런 저런 사이트를 방문하고, 기초 문법을 배우기 위해 책을 사서 읽고 유튜브를 시청하는 등 그런 공부 방법은 내키지 않습니다. 사실 난 ‘그랜파 개발자’입니다. 생성형 AI가 코딩을 잘해서 장래에 프로그래머란 직업이 없어질 것이라는 풍문이 인터넷을 떠돌고 있습니다.Chat GPT에게 머신 비전에서 필요한 이미지 프로세싱 관련 간단한 클래스 하나 만들어 달라고 했습니다. Chat GPT가 짜준 코드를 보고 아주 감탄을 했습니다. 코드의 품질이 보통이 아닙니다. 조금만 손보면 실무에 바로 적용할 수 있을 것 같습니다. 직접 Chat GPT에 접속하..

firebase-messaging-sw.js// firebase-messaging-sw.jsimportScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-app-compat.js');importScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-messaging-compat.js');// Your web app's Firebase configuration (same as in your firebase.js)const firebaseConfig = { apiKey: "your-api-key", authDomain: "your-auth-domain", projectId: "your-proj..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 홈페이지의 마이로그 목록에서 마이로그를 선택하면 상세보기로 이동합니다. 상세 보기에서는 댓글과 답글을 쓸 수 있고, 구독과 수정도 할 수 있습니다.마이로그 상세보기마이로그는 단문 서비스이므로 마이로그 전체 목록 보기에서 각 마이로그 내용 전체를 볼 수 있습니다. 그럼에도 상세보기가 있는 이유는 마이로그에 대한 댓글과 댓글에 대한 답글을 위한 것입니다. 그리고 조회수를 카운트 합니다. 전체 목록에서 내용을 볼 수 있는데, 굳이 마이로그를 선택하여 상세 보기 페이지가 열릴 때 조회수를 카운트하는 것이 어색하긴 합니다.마이로그 리스트에서 마이로그를 선택하면 ..

Vue로 PWA 개발 - 그랜파 개발자.  혼자 공부를 하면서 웹 서비스까지 하기 위해 웹 서버 호스팅을 한다는 것은 무리가 있습니다. 서버 호스팅 자체에 벌써 부담감이 느껴집니다. 서버 호스팅, 서버 운영 또한 쉽지 않은 분야입니다. 비용도 생각하지 않을 수 없습니다.    그럼에도 웹 서비스를 위해서는 웹 서버가 있어야 한다고 생각했습니다.   무료로 사용할 수 있는 웹 서버에 대해 검색을 하다가 firebase를 이용하면 서버가 없이 웹 서비스를 할 수 있다는 것을 알게 되었습니다. 웹앱인데 모바일앱처럼 사용할 수 있다는 PWA도 알게 되었습니다.    과거 어느 때 웹개발과 안드로이드 모바일앱도 개발한 경험이 있어서 웹앱인데 모바일앱처럼 설치하여 사용할 수 있다는 것이 매력적으로 다가와 PWA를 ..

Vue로 PWA 개발 - 그랜파 개발자. 요즘 인터넷을 검색하다 보니 웹 개발 관련 자료들이 엄청나게 많습니다. 그리고 혼자 공부하기에도 좋은 것 같습니다. 혼자 공부를 하고 공부한 결과를 웹을 통해 바로 서비스를 하는 것이 공부에 효과적이고, 또 웹에 서비스를 하게 되면 다른 사람들이 쉽게 볼 수 있고 경우에 따라서 여러 도움을 받을 수도 있습니다. 내가 공부한 것을 웹에 공개를 했으므로 누구나 그 내용을 볼 수 있기 때문입니다. 내가 개발한 것은 웹에 서비스하면서 테스트 해야 내가 개발한 것들을 이해할 수 있습니다. 사실 공부하면서 이러 저러한 예제를 무작정 따라 코딩하다보면 뭐가 뭔지 모르면서 코딩할 경우도 많습니다. 그래서 실제 웹에서 서비스되는 모습을 보는 것이 중요한데, 이를 위해서 웹 서버를..

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..