그랜파 개발자의 풀스택 공부

Vuetify란?Vuetify는 Vue.js를 기반으로 하는 Material Design 컴포넌트 프레임워크입니다. Google의 Material Design 가이드라인을 준수하며, Vue 애플리케이션에 세련되고 반응형 UI를 손쉽게 구축할 수 있도록 다양한 UI 컴포넌트를 제공합니다.Vuetify의 주요 특징Material Design:Google Material Design의 원칙을 기반으로 구축된 UI 컴포넌트를 제공.풍부한 UI 컴포넌트:버튼, 카드, 데이터 테이블, 폼 입력 등 다양한 컴포넌트를 내장.반응형 디자인:모바일, 태블릿, 데스크톱 등 다양한 화면 크기에 최적화된 디자인.테마 설정:다크/라이트 모드 및 커스터마이징 가능한 테마 지원.유연한 그리드 시스템:Vue 기반으로 반응형 레이아웃을..

myBlog의 backend로 Firebase를 사용합니다.Firebase란?Firebase는 Google에서 제공하는 백엔드 서비스 플랫폼으로,클라우드 기반으로 동작하며,모바일과 웹 애플리케이션 개발을 지원합니다.Firebase의 주요 특징관리형 백엔드: 서버 관리가 필요 없으며, 백엔드 코드 없이도 강력한 기능을 구현 가능.실시간 데이터베이스: 데이터를 실시간으로 동기화하여 실시간 협업 애플리케이션 개발에 적합.통합된 생태계: 데이터베이스, 인증, 클라우드 함수, 분석 등 다양한 기능을 한곳에서 제공.크로스 플랫폼 지원: iOS, Android, 웹, Unity, C++ 등 다양한 플랫폼에서 동작.Firebase 주요 서비스1. Authentication (사용자 인증) *사용자 로그인 및 인증을 간..

myBlog 프로젝트 만들기 개발 도구로 Visual Studio Code를 사용 합니다.vue-cli로 프로젝트를 생성합니다.Vue CLI가 설치되어 있지 않다면 아래 명령어로 설치합니다.(전역 설치가 필요하므로 -g 플래그를 사용합니다.)npm install -g @vue/cli vue create 명령어를 사용하여 새 프로젝트를 생성합니다.1. 프로젝트 설정vue create myblog ? 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 pr..

PWA - myBlog이제까지 공부한 것을 이용하여 Vue와 Firebase로 PWA를 개발합니다.앱의 이름은 ‘myBlog’입니다.Architecture Overview서버는 없습니다.백엔드는 Firebase를 사용하여 프론트엔드 앱을 개발합니다.Client Side: Vue.js (with Vuetify)Backend as a Service: Firebase (Authentication, Firestore, Hosting)Authentication : 사용자 인증Firestore : 데이터베이스, profiles collection, posts collectionHosting : 웹앱 인터넷 서비스PWA: Service Workers, Web App Manifest앱의 구성앱의 구성은 다음과 같습니다..

Vue로 PWA 개발 - 그랜파 개발자.1. 계정 설정 정보 보기로그아웃하지 않고 앱을 종료하면 다음에 접속할 때 자동 로그인을 합니다.로그인을 하면 user객체의 uid를 이용하여 회원 정보를 state의 상태 변수 profile에 저장을 합니다.로그아웃 상태에서 앱을 종료한 후 다음에 접속을 하면 로그아웃 상태입니다.이때 로그인을 할 수 있습니다. 당연히 로그인을 하면 회원 정보를 로드하여 state의 상태 변수 profile에 저장을 합니다.이미 회원 정보는 로드되어 있는 상태이므로 계정 설정 페이지를 열면 이미 등록된 정보라면 저장된 회원의 정보가 나타나고,아직 회원 정보를 저장하지 않은 상태라면 이메일 외에는 공란으로 나타날 것입니다. fetchProfile 은 ChatGPT가 제공한 코드를 수..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록 Vue PWA mylog의 소스 코드입니다. 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 you want to start the project with 2.x? Use history mode for router? (Requires proper server setup for index fallback in production) Y..

WriteMyLogView.vue {{ getMylogName }} 저장

Vue로 PWA 개발 - 그랜파 개발자. 로그인을 하면 회원 정보를 로드하여 state 상태 변수 profile에 저장 합니다.물론 아직 회원 정보를 저장하지 않았다면 profile에는 정보가 없습니다.계정 설정 페이지가 열릴 때 이 profile을 사용하여 화면에 데이터를 나타냅니다.우리는 다양한 방법으로 로그인하는 것을 가정하고 profiles 컬렉션의 profile 문서에 uids 배열 항목을 만들었습니다.이 uids에 로그인한 uid를 포함한 회원 정보를 로드합니다. ChatGPT에게 물었습니다.uids에 uid가 포함된 문서를 로드하고 싶어ChatGPTFirestore에서 uids 배열에 특정 uid가 포함된 문서를 로드하려면 array-contains 쿼리를 사용할 수 있습니다.아래는 Vue와..

UserMyLogsView.vue {{ getMylogName }} 최신순 오래된순 조회순 0"> {{ mylog.category }} 카테고리 없음 {{ mylog.title }} 0" style="cursor: point..

Vue로 PWA 개발 - 그랜파 개발자.1. 계정 설정이메일과 비밀번호로 로그인을 할 수 있게 되었습니다.그러나 앱을 서비스 하기 위해서 로그인 정보 외에도 회원 정보가 필요합니다. 우리는 모바일 전용 단문 블로그를 만들고자 합니다. 그래서 회원의 이름, 블로그 이름, 소개 정도는 등록하도록 하겠습니다.2. profiles collections앱이 회원정보를 저장하기 위하여 firestore의 profiles collections 사용합니다.회원 정보는 이메일, 이름, 블로그 이름, 소개, 그리고 uids 배열 항목입니다. uids에는 이메일과 비밀번호로 로그인 한 후 구글로부터 돌려받은 user 객체의 uid를 저장합니다. 배열로 하는 이유는 구글 계정으로 로그인 등 다른 OAuth를 이용한 로그인 ..