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

4. Vue(with Vuetify)와 Firebase로 서버리스 PWA myBlog 개발 - Vuetify

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

3. Vue(with Vuetify)와 Firebase로 서버리스 PWA myBlog 개발 - firebase

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를 개발합니다.앱의 이름은 ‘byBlog’입니다.Architecture Overview서버는 없습니다.백엔드 없이 프론트엔드 앱을 개발합니다.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앱의 구성앱의 구성은 다음과 같습니다.계정관리계정만들기 : 회..