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

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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 댓글, 답글마이로그 상세 보기에서 댓글과 댓글에 대한 답글을 쓸 수 있습니다. 마이로그는 하나의 마이로그에 대해 여러개의 댓글을 쓸 수 있고, 각 댓글에 대한 답글의 기능도 있습니다. 각 댓글에 대해 여러 개의 답글이 있다는 뜻입니다. 답글에 대한 댓글, 댓글에 대한 답글, 또 댓글… 이렇게 댓글 트리의 깊이를 더해 가는 것은 개발자 또는 요구에 따라 필요하겠지만, 마이로그는 댓글과 그것에 대한 답글까지만 기능을 구현합니다. 1. 댓글과 답글 로드, 저장 댓글은 마이로그에 종속 되므로 각 마이로그의 comments 서브 컬렉션에 저장되고, 댓글..

Vue로 PWA 개발 - 그랜파 개발자.Chat GPT에게 물었습니다.vue의 예제 프로그램 하나 만들어줘.ChatGPTVue.js를 사용하여 간단한 할 일 목록 (To-Do List) 애플리케이션을 만들어 보겠습니다. 이 예제는 사용자가 할 일을 추가하고, 완료 표시를 하며, 목록에서 삭제할 수 있도록 구현합니다.1. 프로젝트 생성 및 기본 설정먼저, Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.npm install -g @vue/clivue create todo-appcd todo-appnpm run serve2. App.vue 파일 수정App.vue 파일을 열고 아래와 같이 코드를 작성하여 기본적인 UI와 기능을 구현합니다. To-Do List ..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 모아 보기마이로그 상세보기 페이지 상단에 글쓴이의 마이로그 이름이 있습니다. 이것을 누르면 글쓴이의 모든 마이로그를 모아볼 수 있습니다. 1. mylog 모아 보기 이동 마이로그 상세 페이지에서 글쓴이의 마이로그 이름을 클릭하면 글쓴이의 id로 goToUserMylogs(author.id) 함수를 호출하고 이것은 Vue Router의 페이지 간 네비게이션 메서드 $router.push()를 호출하여 글쓴이의 마이로그 홈인 userlogs(UserMyLogsView.vue) 페이지로 이동합니다.goToUserMylogs(userId) {    t..

App.Vue 마이로그, 일상의 기록 mdi-logout {});"> {{ route.icon }} {{ route.title }} - Beta Test 공지 - '마이로그'는 Vue와 Vuetify로 개발한 PWA로서 일상에 대한 짧은 글을 공유하는 서비스입니다. ..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT에게 Vue를 물었습니다.'Vue에 대해 설명해줘'대답의 원문 전체는 아닙니다.다음과 같은 내용으로 답을 해 줍니다.Chat GPT는 각 질문 주제에 대해 기억하고 있기 때문에 질문하는 사람에 따라 다른 대답을 할 수도 있습니다.Chat GPT1. Vue.jsVue.js는 사용자 인터페이스를 만들기 위해 설계된 진보적인 자바스크립트 프레임워크입니다. Vue의 주요 목표는 웹 애플리케이션의 UI와 관련된 작업을 쉽게 구현할 수 있도록 돕는 것입니다. 반응형 데이터 바인딩과 컴포넌트 기반 아키텍처를 통해 웹 애플리케이션 개발을 효율적으로 할 수 있게 해줍니다.Vue.js는 특히 SPA(Single Page Application)를 만드는 데 매우 적합하며..