2025/05/08 3

10. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 새채팅

새채팅새로운 채팅을 하려면 채팅 상대의 메일 주소를 알아야 합니다.‘새채팅’ 페이지에서 상대의 메일 주소를 입력하고 채팅 시작 버튼을 누르면 새로운 채팅을 시작할 수 있습니다.채팅방으로 이동할 때 상대의 Id, 이름, 채팅방 Id를 query로 채팅방에 전달합니다.새채팅방 만들기새 채팅방을 만들기 위해서는 나와 상대의 userId가 필요합니다.상대의 userId는 입력한 상대의 이메일로 상대의 userId를 구합니다.나의 userId와 상대의 userId로 채팅방을 찾아 있으면 채팅방 Id를 가져오고채팅방이 없으면 새로운 채팅방을 만들고 채팅방으로 이동합니다.chatRooms 컬렉션의 구조chatRooms/ {chatRoomId}/ userIds: [user1Id, user2Id] creat..

9. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 구글 계정으로 로그인

구글 계정으로 로그인구글 계정으로 로그인을 하기 위해서는 먼저 구글 계정 연결을 해야 합니다.구글 계정 연결은 계정 설정 페이지에서 하고, 구글 계정 로그인은 로그인 창에 둡니다.구글 계정 로그인구글 계정 연동Vuetify로 계정 설정 페이지 "Google 계정 연동" 버튼을 추가하고,클릭 시 signInWithPopup으로 구글 계정에 로그인 하여 uid를 가져옵니다.가져온 uid를 Firestore의 profiles 컬렉션 내 uids[] 배열에 추가합니다.여기까지 진행하면 구글 계정 연동이 된 것입니다.Profile.vue의 script// ✅ Google 계정 연동const linkGoogleAccount = async () => { try { // 구글 로그인 → uid 반환 awa..

8. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 비밀번호 변경, 비밀번호 재설정

비밀번호 변경, 비밀번호 재설정비밀번호 변경은 로그인 후에 가능한 기능입니다.그러므로 비밀번호 변경 기능은 계정 설정 페이지에 둡니다.비밀번호 재설정은 비밀번호를 잊었을 때 사용하는 기능입니다.그러므로 로그인 전에 처리해야 하므로 로그인 창에 둡니다.구글 계정으로 로그인을 하기 위해서는 먼저 구글 계정 연결을 해야 합니다.구글 계정 연결은 계정 설정 페이지에서 하고, 구글 계정 로그인은 로그인 창에 둡니다.비밀번호 변경비밀번호 변경을 위하여 sendPasswordResetEmail() 함수를 사용합니다.sendPasswordResetEmail()은 Firebase Authentication에서 제공하는 함수로,사용자의 이메일 주소로 비밀번호 재설정 이메일을 전송하는 데 사용됩니다.✅ 기본 문법sendPa..