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

마지막 메시지 미리보기채팅방의 마지막 메시지를 채팅방 리스트에서 보여 줍니다.채팅방 목록에 마지막 메시지를 미리보기 형태로 보여주는 것은사용자 경험(UX)을 향상시키는 데 매우 중요한 역할을 합니다.사용자가 채팅방을 열지 않고도 대화의 흐름이나 최근 상황을 파악할 수 있고어떤 채팅방에 먼저 들어가야 할지 판단할 수 있게 도와줍니다. 🔧 1. Firestore 데이터 구조chatRooms (컬렉션) └─ roomId (문서) ├─ lastMessage: { │ text: "내일 보자!", │ senderId: "user123", │ createdAt: 2025-05-20T12:00:00Z │ } └─ ... (기타..

읽지 않은 메시지 수 배지 표시읽지 않은 메시지 수를 사용자에게 표시하는 것은 실시간 채팅 앱에서 매우 중요한 UX 요소입니다. 사용자는 어떤 채팅방에 읽지 않은 메시지가 있는지 즉시 알 수 있고,1:1 또는 업무용 대화에서 즉각 대응할 수 있는 계기를 제공합니다. 모바일 앱/웹에서 상단 또는 아이콘에 표시된 뱃지 숫자는 사용자에게 시각적 자극을 줍니다.이 숫자는 "뭔가 내가 놓친 게 있다" 는 느낌을 주어 앱을 다시 열게 만드는 강력한 동기입니다. 읽지 않은 메시지 수 를 처리하는 로직실시간 채팅 앱에서 읽지 않은 메시지 수 를 처리하는 로직은.unreadCountByUser라는 필드를 사용하여메시지 전송 시 읽지 않은 메시지 수 증가 시키고채팅방 열람 시 메시지 읽음 처리 + 읽지 않은 메시지 수 초..

마지막 읽은 메시지 표시마지막 읽은 메시지 표시는 상대가 어디까지 읽었는지 시각적으로 표시하는 기능입니다.채팅 앱에서 마지막으로 읽은 메시지에 "읽음" 표시(예: ✅ 또는 "읽음 · 3분 전")를 해주는 기능은 사용자 경험과 커뮤니케이션 명확성을 크게 향상시킵니다.마지막 읽은 메시지 표시 구현마지막 읽은 메시지를 나타내기 위해서는 다음과 같이 구현할 수 있습니다.profiles 컬렉션 문서의 lastReadMessageId 필드를 사용합니다.채팅방 입장할 때, 내 프로필에 lastReadMessageId 업데이트합니다.채팅방 입장 시, 상대방이 읽은 마지막 메시지ID를 가져와서화면 렌더링 시, 상대방이 읽은 마지막 메시지 아래에 "여기까지 읽음" 표시합니다.마지막 읽은 메시지 표시 UIchatRooms...

메시지 읽은 시간 표시내 메시지가 상대방에게 읽혔을 때 "읽은 시간" 표시하는 기능입니다.읽은 시간을 표시하면 좋은 이유는 상대방이 메시지를 확인했는지 명확히 알 수 있기 때문입니다.읽은 시간 표시를 통해 상대방이 내 메시지를 봤는지 확인 가능하고“읽음” 표시만으로는 부족할 때 구체적인 시간이 신뢰감을 줍니다.(예: 읽음 · 5분 전)상대가 응답이 없을 때도, '아, 아직 읽지 않았구나', '읽긴 했지만 바쁜가 보네' 등 합리적인 추측 가능합니다.그러므로 읽음 시간은 작지만 신뢰감과 사용자 만족도를 높이는 핵심 요소 중 하나입니다.메시지 읽은 시간 표시Firestore의 chatRooms 컬렉션의 messages 서브 컬렉션 문서의 readAt 필드를 사용합니다.메시지를 보낼 때 readAt은 null ..

채팅 상대의 온라인 상태채팅 상대의 온라인 상태 여부를 보여주는 기능을 구현합니다.이를 위하여 profile 문서의 status, lastSeen 필드를 사용합니다.로그인을 하면 status는 "online", 로그아웃을 하면 "offline"을 저장합니다.status가 변경될 때마다 lastSeen에 변경 시간을 저장하여 두면 최근의 로그인, 로그아웃 시간을 확인할 수 있습니다.온라인 상태 관리온라인 상태 변경 시점은 다음과 같습니다.앱을 시작할 때 자동 로그인을 하는 경우 'online' 입니다.로그인을 하면 'online'입니다.로그아웃을 하면 'offline'입니다.온라인 상태는 온라인일 경우 온라인 표시를 하고오프라인의 경우는 최종 로그 아웃한 후 지난 시간을 표시합니다.Firestore의 pr..

채팅룸만들어진 채팅룸의 리스트를 가져오는 기능을 구현합니다. 우리가 개발하고 있는 앱은 실시간 1:1 채팅앱이므로채팅방 리스트에는 채팅 상대의 이름이 나타나면 좋겠습니다. 채팅 메시지는 채팅룸 즉 firestore의 chatRooms 컬렉션에 저장됩니다.chatRooms 컬렉션의 채팅룸 문서에는 채팅에 참여하는 userId의 배열 항목 userIds가 있습니다.userIds에 내가 아닌 userId의 프로필에서 상대의 이름을 가져올 수 있습니다. 채팅룸 리스트에서 채팅룸을 선택하면 채팅룸으로 이동합니다.chatRooms 컬렉션의 구조chatRooms/ {chatRoomId}/ userIds: [user1Id, user2Id] createdAt: timestamp messages/ {m..

1:1 채팅1:1 채팅 기능을 구현합니다.채팅방에 들어갈 때 상대의 userId와 이름, 그리고 chatRoomId를 Url의 query로 전달합니다.채팅방이 열릴 때 지난 메시지를 가져와 나타냅니다.메시지를 전송하면 자동으로 실시간으로 UI가 업데이트 대화의 내용을 볼 수 있습니다.실시간 채팅메시지를 입력하고 전송하면메시지는 Firestore의 chatRooms 컬렉션에 저장됩니다.chatRooms 컬렉션의 구조chatRooms/ {chatRoomId}/ userIds: [user1Id, user2Id] createdAt: timestamp messages/ {messageId}/ Firestore의 snapshot은 실시간 데이터 변화 감지 기능을 제공하는 객체입니다.onSnaps..

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

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

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