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

LoginView.vue 로그인 비밀번호 재설정 로그인 {{ error }} mdi-google Google 계정으로 로그인

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 독자마이로그 독자는 나를 구독하는 회원입니다. 독자 페이지는 나를 구독하는 회원들의 목록을 보여주고 회원을 선택하면 그 회원의 마이로그로 이동합니다.구독 정보는 subscriptions 컬렉션에 저장되고, 컬렉션은 userId(회원), authorId(글쓴이), 그리고 생성일의 필드를 가지고 있습니다.독자는 마이로그 상세 보기에서 구독 신청을 하게 되면 subscriptions 컬렉션에 저장이 되므로 subscriptions 컬렉션에서 authorId가 나의 userId와 같은 회원은 나의 독자입니다.이렇게 찾은 독자들을 목록으로 나타내고, 목..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT의 Vuetify 설명에서 보여준 예제 코드를 실행하여 봅시다.프로젝트를 만들고 예제 코드를 코딩한 후 실행합니다. 1. 프로젝트 만들기vue create vuetify-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 mode for router? (Requires proper server setup for ..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 찾기마이로그의 찾기는 아주 단순합니다. 검색어를 입력하여 찾기를 하면 제목 또는 내용에 입력한 검색어가 포함되어 있는 모든 마이로그를 찾습니다. 장난감 수준이기는 하지만 아쉬운대로 쓸만합니다. 찾기 기능을 좀 더 고도화 하려면 고려해야 할 것들이 많습니다. 여기서는 검색어를 입력하여 검색어를 포함하는 마이로그를 찾는 것으로 만족하려 합니다. 전체 마이로그는 이미 로드되어 있습니다. 검색어를 입력하면 제목 또는 내용에 검색어를 포함하고 있는 마이로그를 로드되어 있는 마이로그에서 필터를 적용하여 검색 결과를 구합니다. 영문의 경우 대소문자 구분없이..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT에게 물었습니다.vuetify에 대해 설명해줘.ChatGPTVuetify는 Vue.js 애플리케이션에서 현대적이고 일관된 UI 디자인을 쉽게 구현할 수 있도록 돕는 Material Design 기반의 UI 라이브러리입니다. Google의 Material Design 가이드라인을 충실히 따르고 있어 시각적으로 세련된 UI를 빠르게 구축할 수 있습니다. 또한 반응형 디자인과 테마 커스터마이징을 지원하며, 800개 이상의 UI 컴포넌트를 제공합니다.Vuetify의 주요 특징1. Material Design 기반Vuetify는 Google의 Material Design을 기반으로 설계되었기 때문에, 사용자 인터페이스가 일관되고 직관적입니다. 기본적으로 버튼,..

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