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

3. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 설계서, WBS

📘 프로그램 설계서: Firebase + Vue 3 기반 1:1 실시간 채팅 앱📌 사용 기술 스택Frontend: Vue 3, Vuetify, PiniaBackend: Firebase Firestore, Firebase Authentication, Firebase Storage기타: Composition API, Composables 구조🔧 주요 기능 요약1. 🔐 사용자 인증 및 프로필 관리Firebase Authentication을 통한 로그인/회원가입Firestore profiles 컬렉션에 사용자 정보 저장필드: uid, name, status, aboutMe, lastSeen, uids[]2. 💬 1:1 실시간 채팅chatRooms 컬렉션: userIds, lastMessage, unre..

2. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 요구 사항 분석

Vue 3 + Firebase 기반 채팅 앱의 요구 사항 분석서📌 1. 개요목표:사용자 간 1:1 채팅, 음성 메시지 전송, 읽음 확인 등의 기능을 포함한 실시간 채팅 웹 애플리케이션을 개발한다.주요 기술 스택:프론트엔드: Vue 3, Vuetify, Pinia, Vite백엔드: Firebase (Authentication, Firestore, Storage)배포: Firebase Hosting📌 2. 사용자 요구 사항🔐 인증 및 사용자 관리사용자는 이메일/비밀번호 또는 소셜 로그인을 통해 인증할 수 있어야 한다.사용자의 프로필 정보는 Firestore에 저장된다.로그인한 사용자의 상태(온라인/오프라인)와 마지막 접속 시간(last seen)을 확인할 수 있어야 한다.💬 채팅 기능사용자는 다른 사..

1. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 요구 사항

실시간 채팅 앱 개발 요구 사항✅ 1. 사용자 인증 및 프로필Firebase Authentication을 사용한 로그인/회원가입이메일/비밀번호 또는 소셜 로그인(Google 등)로그인 시 사용자 프로필을 Firestore에 저장필드: uid, email, name, aboutMe, status, createdAt, uids[]사용자 상태 표시온라인/오프라인 실시간 표시마지막 접속 시간(last seen)✅ 2. 채팅 기능 (1:1)1:1 채팅방 생성 (두 사용자 간)실시간 메시지 전송/수신메시지 필드: text, senderId, createdAt, readBy, readAt, type (text/audio)마지막 메시지 미리보기 표시메시지 읽음 확인 기능 (readBy, readAt)상대방이 읽은 시간..

31. [따라하기] 비밀번호 재설정과 비밀번호 변경

비밀번호 재설정과 비밀번호 변경로그인 창에 비밀번호 재설정 버튼을 둡니다.비밀번호 재설정은사용자가 이메일 주소를 입력하면,Firebase가 해당 이메일로 비밀번호 재설정 링크를 보냅니다.사용자는 그 링크를 클릭해서 새 비밀번호를 설정할 수 있어요.비밀번호 재설정authStore.js// src/stores/authStore.js // 비밀번호 재설정 const resetPassword = async (email) => { try { await sendPasswordResetEmail(auth, email); alert('비밀번호 재설정 이메일을 보냈습니다.'); } catch (error) { alert('재설정 실패: ' + error.message); }..