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

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

Vue로 PWA 개발 - 그랜파 개발자고맙습니다.지금까지 공부한 PWA mylog를 소스코드 설명 중심으로 개발에 대한 내용을 소개하는 새로운 책을 시작합니다.mylog, 일상의 기록베타 테스트 : mylog, 일상의 기록

Vue로 PWA 개발 - 그랜파 개발자 ‘내로그’ 메뉴를 눌러 나의 마이로그 목록을 볼 때 기본은 작성일 역순으로 보입니다. 그런데 마이로그 중 조회순으로 보고 싶을 때가 있습니다. 그래서 ‘내로그’ 페이지에 정렬 방법에 대한 ‘최신순’, ‘조회순’ 두 개의 버튼을 추가합니다. ‘최신순’은 작성일 역순으로 정렬을 하고, ‘조회순’은 조회수가 많은 순서로 정렬하여 보여줍니다.1. 쿼리마이로그 보기 정렬을 위한 쿼리입니다.최신순 쿼리입니다.query(collection(db, "mylogs"), where("userId", "==", userId), orderBy("createdAt", "desc"));조회순 쿼리입니다.query(collection(db, "mylogs"), where("userId", "..

Vue로 PWA 개발 - 그랜파 개발자 날짜별 조회수는 기간을 입력하면 기간동안의 각 날짜에 대한 마이로그 조회수를 보여줍니다.마이로그는 한 사람의 회원이 하루 몇번을 조회해도 하루 한번만 카운트합니다. 마이로그는 여러개가 있으며, 각각의 마이로그를 조회한 사람 또한 여러명입니다. 마이로그 날짜별 조회수는 전체 마이로그에 대해 해당 날짜에 몇명의 회원이 조회를 했는지 집계를 합니다. 이를 구하기 위하여 각 마이로그에 대해 주어진 날짜에 조회한 회원의 수를 구해서 전체 마이로그에 대해 합산을 하면 해달 날짜의 조회수를 구할 수 있습니다.마이로그 조회수는 views collection에 저장됩니다. views collection은 다음과 같은 구조를 가집니다. 1. views 컬렉션 구조 /views/{my..

Vue로 PWA 개발 - 그랜파 개발자 일별 조회 현황 기능을 구현하기 위하여 먼저 기간을 입력하여 날짜를 받아오는 기능을 구현합니다.ChatGPT에게 물었습니다.Create a function that inputs a period through Vue's view and calculates the date within that period and displays it on the screen.vue의 view로 기간을 입력받아 해당 기간 안에 날짜를 구해 화면에 표시하는 기능을 만들어줘.ChatGPT To create a Vue.js component that allows users to input a period (start date and end date) and then displays the d..

Vue로 PWA 개발 - 그랜파 개발자 나의 마이로그를 얼마나 많은 사람이 보았을지가 궁금합니다. 통계 기능을 구현해 봅시다. 통계는 여러 기능이 있습니다. 별도의 통계 메인 페이지를 만들고 이 페이지에서 각 통계 기능을 선택할 수 있도록 합니다. 다음과 같은 통계 기능을 구현하려고 합니다.일별 조회 현황 : 날짜별로 나의 마이로그 조회수 집계를 합니다. 기간을 입력하면 날짜 단위로 나의 마이로그 조회수 집계를 보여줍니다.마이로그 조회 현황 : 나의 마이로그에 대해 조회수가 높은 순으로 마이로그 리스트를 보여 줍니다. 입력 사항은 없습니다. 메뉴를 클릭하면 마이로그 리스트를 조회순으로 나타냅니다.먼저 조회 통계를 위하여 조회수 컬렉션의 구조에 대해 알아 봅시다.1. views 컬렉션 구조/views/{m..

Vue로 PWA 개발 - 그랜파 개발자. 백문이 불여일견. 백번 듣는 것보다 한번 보는 것이 낫다고 합니다.백견이 불여일타. 한때 유행하던 말로 백번 보는 것보다 한번 코딩해 보는 것이 낫다는 개발자들의 공부 방법에 대한 것으로 직접 코딩해 보지 않으면 안다고 할 수 없다는 뜻입니다.개발이란 것이 내 머릿속의 의도를 프로그램 언어로 컴퓨터상에 구현해 내는 작업입니다. 그러므로 실제 코딩을 해서 결과를 확인해봐야 합니다. 공부할 때도 마찬가지로 하나하나 코딩을 하면서 결과가 만들어지는 과정을 이해해야 하는 것입니다.  Vue 프로젝트 Beta Test : mylog, 일상의 기록