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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 내것내가 작성한 마이로그를 모아 봅니다.최신순, 오래된순과 조회순으로 마이로그를 정렬할 수 있습니다.1. 정렬 방법최신순const q = query(collection(db, "mylogs"), where("userId", "==", userId), orderBy("createdAt", "desc"));오래된순const q = query(collection(db, "mylogs"), where("userId", "==", userId), ..

Vue로 PWA 개발 - 그랜파 개발자. 개발이라고 표현을 한 이유는 이미 만들어진 예제이지만 우리가 직접 개발한다고 가정하고 프로그램적으로 생각을 해 봅시다.1. 앱 개발 요구 사항요구 사항은 다음과 같습니다.현재 카운트를 화면에 나타낼 것현재 카운트를 두배 하여 화면에 나타낼 것버튼을 누르면 카운트를 1 증가 시킬 것버튼을 누르면 카운트를 비동기적으로 1 증가 시킬 것.2. 앱 요구에 대한 기능 분석이 요구 사항을 구현하기 위하여 해야 할 것들을 생각해 봅시다. 이것은 그랜파 개발자가 프로그램을 개발할 때 사용하는 방법입니다. 그랜파 개발자의 개인적인 방법론이므로 무조건 이렇게 해야 한다는 것은 아닙니다.화면에 카운트, 2배 카운트, 증가 버튼, 비동기 증가 버튼 그리기현재 카운트를 저장하고 있는 변..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 쓰기사용자가 마이로그의 제목과 내용을 입력하면 마이로그는 로그인한 회원의 userId, username과 작성시간을 자동으로 추가하여 cloud의 firestore에 저장합니다.1. 마이로그 쓰기마이로그 제목과 내용을 입력폼에 입력하고 저장을 누르면 마이로그는 회원의 userId, userName, 작성시간을 추가하여 firestore에 저장을 합니다.WriteMyLogView.vue . . . 저장 ..

다음은 Chat GPT에게 질문하고 받은 답의 원문입니다. Chat GPT는 각 질문 주제에 대해 기억하고 있기 때문에 질문하는 사람에 따라 다른 대답을 할 수도 있습니다.vuex에 대해 설명해줘ChatGPTVuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 및 라이브러리로, Vue의 중앙 집중식 상태 관리를 가능하게 합니다. Vue 애플리케이션에서 여러 컴포넌트 간에 데이터를 공유하고 업데이트해야 하는 경우 매우 유용합니다. Vuex는 모든 컴포넌트가 상태에 접근하고 일관되게 상태를 업데이트할 수 있는 구조를 제공합니다.1. Vuex가 필요한 이유Vue 애플리케이션이 작을 때는 컴포넌트 간의 데이터 전달을 props와 events로 해결할 수 있지만, 애플리케이션 규모가 커지고 컴포넌트가 많아지..

HomeView.vue {{ mylog.title }} 댓글 0"> {{mylog.commentCount }}   {{ mylog.userName }} . {{ formatDate(mylog.createdAt) }} 0" > ({{ mylog.views }}) 마이로그가 없습니다. {{ error.message }}

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 구독마이로그 상세보기에 구독 버튼이 있습니다. 구독 중이 아니면 ‘구독’, 구독 중이면 ‘구독 취소’로 나타납니다. 구독을 하게 되면 내가 구독중인 마이로그를 ‘구독’ 페이지에서 모아볼 수 있습니다.1. 구독 신청구독 버튼을 toggle 버튼입니다. 같은 버튼으로 구독 또는 구독 취소를 할 수 있습니다. 구독은 마이로그 상세 보기에서 구독 버튼을 눌러 구독 신청을 하지만 마이로그 하나에 대한 구독이 아니라 글쓴이에 대한 구독입니다.구독 정보는 subscriptions 컬렉션에 저장됩니다. subscriptions 컬렉션은 userId(회원입니다..

Vue로 PWA 개발 - 그랜파 개발자.1. App.vue 수정 후 실행App.vue 를 ChatGPT가 제공하는 코드로 수정하고 다시 실행해 봅시다.npm run serve로 로컬 서버를 시작한 후 브라우저에서 http://localhost:8080으로 이동하면 앱을 볼 수 있습니다. 잘 실행이 됩니다.2. App.vue코드를 다시 살펴 봅시다. To-Do List 추가 {{ todo.text }} 삭제 v-model을 사용하여 newTodo라는 변수를 입력 필드와 양방향으로 바인딩합니다.사용자가 Enter 키를 누르거나 "추가" 버튼을 클릭하면 addTodo 메서드가 호출되어 새로운..

EditMyLogView.vue 마이로그 수정 !!v || 'Title is required']"> !!v || 'Content is required']"> 수정   mdi-pencil

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT가 보여준 Vue 예제를 시키는 대로 했습니다.프로젝트 만들기1. 프로젝트 폴더를 만들어 vscode를 실행하고 터미널을 엽니다.2. Vue CLI를 설치합니다.npm install -g @vue/cli3. 앱 프로젝트를 만듭니다.vue create todo-app Vue CLI v5.0.8? 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 you want to start the project with 2.x? Use history m..

AboutView.vue 마이로그는? '마이로그'는 일상에 대한 짧은 글을 공유하는 서비스입니다. Client Side는 Vue.js (with Vuetify)로 개발하고, Backend 서비스는 Firebase (Authentication, Firestore, Hosting)를 사용하여 개발을 진행합니다. 개발이 진행되는 순서대로 소스코드를 공개하고, 베타 버전은 웹에 서비스되고 있습니다. mdi-arrow-right Beta Test : mylog, 일상의 기록