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

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

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

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

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

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, 일상의 기록