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

계정 설정우리는 createUserWithEmailAndPassword 메서드로이메일과 패스워드만으로 계정을 생성하였습니다.계정 또한 Firebase Auth에 저장됩니다. 앱에서는 사용자의 계정 등록 정보 외에 사용자 이름 등의 추가적인 정보가 필요합니다.또, OAuth를 이용한 로그인을 허용한다면 한 사람의 사용자가 여러 계정으로 로그인할 수 있습니다.OAuth의 여러 계정이 같은 사용자라면 한 사람의 사용자로 통합하여야 합니다. 앱에서는 이를 위하여 계정과는 별도의 계정 설정 정보를 저장합니다.사용자의 이름, 현재 상태, 사용자 소개 등의 정보를 Firestore의 profiles 컬렉션에 저장합니다. profiles 컬렉션의 각 user 문서에는 uids 배열 항목이 있습니다.이것은 각 다른 OA..

Firebase Auth, Pinia Store 그리고 사용자 인증프로젝트를 만들고, firebase를 설정하고, router와 pinia를 설치합니다.Firebase Authentication의 주요 기능들을 통합한 Pinia store를 만들어이를 이용하여 계정만들기와 로그인 페이지를 구현합니다.1. 프로젝트 만들기C:\2025\grand-fa_2025>npm create vite@latest my-auth -- --template vue > npx> cva my-auth --template vue│◇ Scaffolding project in C:\2025\grand-fa_2025\my-auth...│└ Done. Now run: cd my-auth npm install npm run dev..

이메일, 패스워드로 계정 만들기Vuetify와 Vue 3 + Pinia + Firebase Authentication을 사용해서"이메일/패스워드로 계정 만들기 컴포넌트(Register.vue)"와"이메일/패스워드로 로그인 컴포넌트 (Login.vue)"입니다. 🧩 구성 요약v-form으로 유효성 검사를 처리Vuetify v-text-field, v-btn 등을 사용해 깔끔한 UI 구성mdi-email, mdi-lock 아이콘 포함authStore에 있는 register() 호출📁 src/views/Register.vue 계정 만들기 ..

Firebase Authentication의 주요 기능들을 통합한 Pinia storeFirebase Authentication의 주요 기능들을 Pinia store에 통합합니다.이 store는 Vue 3과 함께 작동하며,이메일/비밀번호 회원가입 및 로그인, 로그아웃,현재 로그인 상태 유지, 비밀번호 변경 및 재설정, 구글 로그인까지 모두 포함합니다.src/stores/authStore.js// src/stores/authStore.jsimport { defineStore } from 'pinia';import { ref, computed } from 'vue';import { useRouter } from 'vue-router';import { createUserWithEmailAndPassword,..

라우터 설정라우터(Router) 는 웹 애플리케이션에서 URL을 기준으로 화면을 전환하는 기능을 담당하는 시스템입니다. 기본적으로, 웹 애플리케이션에서는 URL을 통해 다른 페이지나 컴포넌트로 이동하게 되는데, 이 때 라우터가 URL을 해석하여 적절한 화면을 렌더링합니다. 라우터의 주요 기능URL과 컴포넌트 매핑: 라우터는 URL을 특정 컴포넌트에 매핑하여, 해당 URL을 요청했을 때 해당 컴포넌트를 렌더링합니다.페이지 전환 관리: 사용자가 웹 애플리케이션 내에서 다른 페이지로 이동할 때, 페이지 전환을 관리하고 상태를 유지하는 역할을 합니다.동적 라우팅: URL에 포함된 파라미터를 추출하여 동적으로 컴포넌트를 렌더링하거나 데이터를 로딩하는 기능도 제공합니다.네비게이션: 링크를 클릭하거나 프로그래밍적으로..

Vuetify에서 MDI(Material Design Icons) 아이콘 사용MDI (Material Design Icons) 는 구글의 머티리얼 디자인 가이드라인을 따르는 아이콘 세트입니다. 이 아이콘들은 웹과 모바일 애플리케이션에서 자주 사용되는 아이콘들을 모아놓은 라이브러리로, SVG 형식으로 제공되며 쉽게 커스터마이징할 수 있습니다. MDI는 구글의 머티리얼 디자인 철학을 기반으로 만들어져 있으며, 사용자 인터페이스(UI)에 적합한 다양한 아이콘을 제공합니다. 이 아이콘들은 웹 애플리케이션, 모바일 애플리케이션, 데스크탑 애플리케이션 등에서 일관성 있고 직관적인 디자인을 유지할 수 있도록 돕습니다.✅ 1. Vuetify 설정에서 아이콘 옵션 추가main.js 설정 파일을 열고, aliases와 m..

Vuetify로 UI 만들기Vue 3와 Vuetify를 사용해서 AppBar, Navigation Drawer, Footer가 포함된 기본 레이아웃 UI를 만들어 드릴게요.좋아요! 홈(Home), 로그인(Login), 계정 만들기(Register) 메뉴를 아이콘과 함께 Navigation Drawer에 배열로 만들어 표시하는 예제를 드릴게요. Vuetify 아이콘은 @mdi/js 기반이므로, v-icon에서 mdi-로 시작하는 이름을 사용해요. 🧱 기본 레이아웃 구조상단: App Bar좌측: Navigation Drawer중앙: Router View or Main Content하단: Footer💡 설치가 되어 있어야 할 것vue create my-appcd my-appvue add vuetify 또는..

🧩 Vuetify란?Vuetify는 Vue.js를 위한 머티리얼 디자인 UI 프레임워크입니다."머티리얼 디자인 UI 프레임워크"는구글의 머티리얼 디자인 가이드를 따르는 UI 컴포넌트들을 미리 만들어놓은 도구 모음이에요! Vuetify는 구글의 Material Design 가이드를 기반으로 만든 Vue.js UI 컴포넌트 라이브러리예요.Vue 2 또는 Vue 3에서 사용 가능버튼, 카드, 다이얼로그, 네비게이션 등 다양한 컴포넌트 제공반응형 레이아웃, 테마 지원, 아이콘 내장🧱 어떤 걸 제공하나요?v-btn: 버튼v-card: 카드v-dialog: 팝업v-text-field: 입력창v-app, v-main, v-container: 레이아웃 구성Dark mode, Grid system, Snackbar..

🧠 Firestore란?Firestore는 Firebase에서 제공하는 클라우드 NoSQL 데이터베이스예요.웹앱이나 모바일 앱에서 서버 없이 데이터를 저장하고 불러올 수 있는 서비스죠.🔍 특징기능설명🔄 실시간 데이터데이터가 바뀌면 앱 화면도 실시간 업데이트돼요. (예: 채팅 앱)🧩 NoSQL 구조JSON처럼 컬렉션(Collection) → 문서(Document) 형태로 저장돼요.🔐 보안 규칙로그인 유저만 볼 수 있게 설정하는 등 권한 제어가 가능해요.☁️ 서버 필요 없음서버 없이도 직접 데이터 CRUD 가능! (add, get, update, delete)📱 오프라인 지원인터넷 안 될 때도 데이터 저장 & 동기화 가능 (앱 전용)📦 예시 구조profiles (컬렉션) └── abc123 (문..

Vue 3 + Firebase Auth 예제 따라하기Vue 3 + Firebase Auth 예제를 ChatGPT가 시키는 대로 해 봅시다.프로젝트를 만들고, firebase를 설치한 후 설정을 하고,Firebase Auth의 기능을 이용하여 회원 가입과 로그인 기능까지 구현합니다. ✅ 목표 기능이메일/비밀번호 회원가입로그인로그아웃현재 로그인된 유저 표시🛠️ 기본 프로젝트 설정C:\2025\grand-fa_2025>npm create vite@latest my-app -- --template vue> npx> cva my-app --template vue│◇ Scaffolding project in C:\2025\grand-fa_2025\my-app...│└ Done. Now run: cd my-a..