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

26. [개발] Vuetify로 실시간 채팅앱 VSignal UI 만들기 - Vue3 Firebase 프로젝트

Vuetify로 UI 만들기Vuetify를 사용하여 App Bar(헤더), Drawer(사이드 메뉴), Footer(푸터) 가 포함된 UI를 만들어 봅시다.더하여 Material Design Icon도 사용합니다.1. 기본 레이아웃 만들기 (AppLayout.vue)📌 구성 요소1. App Bar (헤더)앱 제목과 네비게이션 메뉴 버튼우측에는 로그아웃 버튼2. Drawer (사이드 메뉴)홈 : 이미 만들어진 1:1 채팅방 리스트채팅방을 선택하면 채팅방으로 들어갑니다.채팅방 만들기 : 새로운 채팅방을 만듭니다.계정만들기 : 사용자의 계정을 생성합니다.계정 설정 : 계정 정보 외에 사용자 정보를 설정합니다.로그인3. Main Content (메인 컨텐츠 영역)현재 선택된 화면이 표시됨4. Footer (푸..

25. [개발] 프로젝트 만들기 - Vue3 프로젝트 실시간 채팅앱 VSignal

실시간 채팅앱 VSignal - 프로젝트 만들기Vue3와 Firebase를 사용하여 1:1 실시간 채팅앱을 개발합니다.프로젝트 만들기부터 새로 시작합니다. 1. 프로젝트 만들기npm create vite@latest chat-app --template vue > npx> create-vite chat-app vue◇ Select a framework: Vue◇ Select a variant: JavaScript cd chat-app npm install2. Vuetify 설치🌟 Vuetify란?Vuetify는 Vue.js를 위한 Material Design 기반 UI 프레임워크입니다.Google의 Material Design 가이드라인을 따르는 고급 UI 컴포넌트를 제공해서,빠르게 반응..

24. [개발] Vue3 Firebase 프로젝트 - 실시간 1:1 채팅 앱 VSignal 개발 계획

--- 주의 요청 ---지금까지 ChatGPT에게 질문하여 답을 받은 내용으로 코팅을 진행하여 왔습니다.그러나 종종 불합리하거나 잘못된 정보들이 있었고,이들에 대해서 별도로 ChatGPT에게 질문을 해서 답을 받아 수정하고 있습니다.이렇게 실제 코딩하면서 기능을 구현하고 있어서개발되는 각 코드나 내용은 블로그 게시글의 내용과 차이가 있습니다.사실 ChatGPT가 제공하는 코드에 대해서는 "충분한 검증" 이 필요합니다. 실시간 1:1 채팅앱 VSignal 개발 계획이제까지 ChatGPT에게 배운 내용으로 코딩을 진행하여 왔고.이를 통하여 실시간 채팅 기능에 대해서는 이해를 하였으므로우리의 앱이 전체적으로 어떤 구조를 가질지도 고민해 봐야겠습니다.우리의 실시간 채팅앱 VSignal은 우선 1:1 채팅만 구현..

실시간 메시지 업데이트 기능 구현 분석채팅앱 VSignal의 실시간 메시지 업데이트 기능을 분석합니다.ChatView 컴포넌트의 templateChatView 컴포넌트의 script채팅방 가져오기// 특정 유저와의 1:1 채팅 찾기 또는 생성const getOrCreateChat = async (user1, user2) => { const chatRef = collection(db, "chats"); const q = query(chatRef, where("users", "array-contains", user1)); const snapshot = await getDocs(q); for (const doc of snapshot.docs) { const chatData = doc.data();..

실시간 메시지 업데이트 기능 구현새로운 메시지가 추가될 때마다 자동으로 화면을 업데이트하여대화의 내용을 실시간으로 볼 수 있게 기능을 구현합니다.🔥 onSnapshot이란?onSnapshot은 Firebase Firestore에서 실시간 데이터 변화를 감지하는 함수입니다.채팅 앱, 1:1 대화, 알림 기능 등 실시간 동기화 기능을 구현할 때 사용됩니다.🔥 unsubscribe란?unsubscribe는 Firebase Firestore에서 onSnapshot으로 구독한 실시간 데이터 감지를 중지하는 함수입니다.즉, Firestore의 실시간 감지를 멈추고, 메모리 누수를 방지하기 위해 사용합니다.Firestore의 onSnapshot()을 사용해서 실시간 메시지 업데이트를 구현해봅시다.Firebase ..

로그인한 사용자만 채팅방 접근 가능하게 만들기!Firebase Auth 상태를 확인해서 로그인한 사용자만 채팅방에 접근가능하도록 합니다.1. Firebase에서 로그인 상태 확인Vue Router의 beforeEach 훅을 이용해서, 로그인하지 않은 사용자는 /chat에 접근할 수 없도록 설정할 거야.🔥 onAuthStateChanged란?onAuthStateChanged는 Firebase Authentication에서 제공하는 사용자 인증 상태 감지 함수입니다.즉, 로그인, 로그아웃, 회원가입 등 사용자 인증 상태 변화를 실시간으로 감지할 수 있습니다.// src/router.jsimport { createRouter, createWebHistory } from "vue-router";import A..

실시간 채팅앱 VSignal 1:1 채팅로그인 성공 후 채팅방 페이지(/chat)로 이동하도록 기능을 추가합니다.1. 채팅방 페이지(ChatView.vue) 생성먼저, 로그인 후 이동할 채팅방 페이지를 만들어야 해.src/views/ChatView.vue 파일을 생성하고 아래 코드를 추가해줘. 채팅방 로그아웃 2. 로그인 후 채팅방 페이지로 이동이제 AuthView.vue에서 로그인 성공 시 채팅방으로 이동하도록 변경할게. {{ isLogin ? "로그인" : "회원가입" }} {{ isLogin ? "로그인" : "회원가입" }} ..

Pinia에서의 Composition API 스타일과 Options API 스타일Pinia에서는 Composition API 스타일과 Options API 스타일두 가지 방법으로 store를 정의할 수 있습니다.각 스타일의 차이점과 사용 방법을 정리해보겠습니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일1. Composition API 스타일📌 Composition API 스타일은 setup() 함수 기반의 구조로 작..

Pinia Store에서 ref와 reactive를 사용하는 방법Pinia Store에서 ref와 reactive를 사용하는 방법을 알아보겠습니다.Pinia에서는 Composition API 스타일과 Options API 스타일을 모두 사용할 수 있지만,여기서는 Composition API 스타일을 중점적으로 설명합니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일1. ref와 reactive 차이ref(): 기본 타입(..

Composition APIComposition API는 Vue 3에서 도입된 새로운 방식의 API로,기존의 Options API보다 더 유연하고 재사용 가능한 코드를 작성할 수 있도록 도와줍니다.Composition API는 setup() 함수와 함께 사용되며,컴포넌트의 로직을 명확하게 분리하고,여러 컴포넌트 간에 재사용할 수 있도록 해줍니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일 여기서는 Pinia와 Compo..