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

28. [개발] 실시간 채팅앱 VSignal 소스 코드 - Vue3 Firebase 프로젝트

실시간 채팅앱 VSignal 소스 코드실시간 채팅앱 VSignal 개발을 위하여프로젝트를 만들고,Vuetify를 설치 및 설정하였고,Material Design Icon을 사용하기 위해서 Vuetify 아이콘 설정을 하였습니다.Firebase 설치 및 설정을 하였고,UI를 위한 컴포넌트 AppLayout.vue 와 App.vue를 만들었고계정 만들기 기능을 구현하였습니다.지금까지 구현한 소스 코드입니다.1. 프로젝트 폴더 구조chat-app├─ .env├─ index.html├─ package-lock.json├─ package.json├─ public│ └─ vite.svg├─ README.md├─ src│ ├─ App.vue│ ├─ assets│ │ └─ vue.svg│ ├─ compone..

27. [개발] Firebase Authentication 계정 만들기 - Vue3 Firebase 프로젝트

Firebase AuthenticationFirebase Authentication은 Google의 Firebase에서 제공하는 서비스로,웹 및 모바일 애플리케이션에 사용자를 인증하고 관리하는 데 도움을 줍니다.이 서비스는 여러 인증 방법을 제공하여 사용자가 로그인할 수 있도록 해줍니다.Firebase Authentication을 통해 다양한 인증 방식을 손쉽게 구현할 수 있어,앱의 사용자 인증을 보다 안전하고 효율적으로 관리할 수 있습니다.Firebase Authentication을 설정하고 '계정 만들기' 를 구현 합시다.1. createUserWithEmailAndPassword 설명createUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서..

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 (푸..

실시간 채팅앱 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 컴포넌트를 제공해서,빠르게 반응..

--- 주의 요청 ---지금까지 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() 함수 기반의 구조로 작..