wan의 개발일기

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 시리즈의 마지막 편이다. 큰 기능 하나씩이 아니라, 그동안 미뤄뒀던 자잘하지만 실제 채팅 앱이라면 당연히 있어야 할 것들을 모아서 정리한다 — 메시지 삭제, 그룹 채팅방 나가기, 다크 모드, 그리고 1편 때부터 미뤄뒀던 비밀번호 재설정. 내 메시지 길게 눌러 삭제하기 메시지 버블을 GestureDetector로 감싸고 onLongPress를 달았다. 내가 보낸 메시지(isMe)에만 삭제를 허용해서, 남의 메시지를 못 지우게 막았다. GestureDetector( onLongPress: isMe ? () => _deleteMessage(messages[index].reference) : null, chil..

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 5편(읽음 표시) 다음에 이어진 두 작업이다. 하나는 "이메일을 정확히 다 입력해야만 검색되던" 불편함을 prefix 검색으로 바꾼 것, 다른 하나는 상대방이 지금 앱을 켜놓고 있는지 보여주는 온라인 상태 표시다. 둘 다 Firestore의 쿼리/실시간 구독 기능을 한 단계 더 활용한 사례다. 이메일 → 닉네임/이메일 prefix 검색 그동안 SearchScreen은 where('email', isEqualTo: query)로 이메일을 정확히 일치시켜야만 검색이 됐다. RDB의 LIKE 'query%' 같은 "시작 문자열로 찾기"가 필요했는데, Firestore는 LIKE를 지원하지 않는다. 대신 문자열 범위..

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 이번 글은 두 커밋을 같이 묶었는데, 사실 둘 사이엔 시간 차이가 꽤 있다. 읽음 표시는 3편(그룹 채팅) 바로 다음에 만들었고, 타이핑 인디케이터는 그로부터 한참 뒤 — 검색 기능, 메시지 삭제, 온라인 상태, 다크모드까지 다 만들고 나서 시리즈의 맨 마지막에 추가한 기능이다. 그 사이에 있는 기능들은 6~7편에서 다룬다. 주제가 둘 다 "실시간 상태를 Firestore로 어떻게 표현하느냐"라는 공통점이 있어서 한 편에 묶었다. 카카오톡의 "1" 안 읽음 숫자와 "상대방이 입력 중입니다"를 직접 만들어본 셈이다. 읽음 표시 — readBy 배열 메시지 문서마다 readBy 배열을 두고, 누가 이 메시지를 ..

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 이번 글은 시간을 살짝 되돌린다. 실제 커밋 순서로는 프로필 기능 → 채팅 UI 개선 → 이미지 전송이 3편(그룹 채팅)보다 먼저 만들어졌다. 시리즈 구성상 그룹 채팅을 3편에 먼저 배치했을 뿐, 코드 상으로는 이번 글에서 다루는 기능들이 더 이전 단계다. 3편에서 "이건 4편 소재"라고 미뤄뒀던 _otherUserProfileUrl, _sendImage()가 바로 여기서 나온다. 이메일/UID만 들고 있던 FirebaseAuth 유저에, "보여줄 수 있는" 정보(닉네임, 프로필 사진)를 어떻게 붙였는지, 그리고 텍스트만 주고받던 채팅에 이미지를 어떻게 끼워 넣었는지를 다룬다. 프로필 화면 만들기 새 화면 ..

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 2편에서 만든 건 어디까지나 1:1 채팅이었다. 이번엔 같은 Firestore 구조를 건드리지 않고 그룹 채팅을 끼워 넣는 작업을 했다. 그리고 같은 커밋에 묶여서, 한참 미뤄뒀던 "앱을 재시작하면 로그인이 풀리는" 문제도 같이 고쳤다. 참고: 이 시점 코드(chat_screen.dart)에는 이미 이미지 전송, 프로필 사진/닉네임 표시 기능이 들어가 있다. 실제로는 프로필(닉네임/사진)과 이미지 전송이 그룹 채팅보다 먼저 만들어졌기 때문이다. 이번 글에서는 그 부분은 건드리지 않고, 그룹 채팅을 위해 새로 바뀐 부분만 짚는다. 프로필/이미지 전송은 4편에서 따로 다룬다. 그룹 채팅, 1:1 채팅과..

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 1편에서 만든 로그인/회원가입 위에, 이번엔 진짜 채팅 기능을 올려봤다. 채팅방 목록, 1:1 채팅, 유저 검색까지 한 커밋에 같이 들어간 작업인데, 핵심은 Firestore의 실시간 스트림(snapshots())을 어떻게 화면과 연결하느냐다. Node.js로 Socket.io 서버를 직접 굴려본 경험이 있는데, Firestore는 그 역할(연결 유지, 브로드캐스트)을 통째로 대신해준다. 대신 데이터 구조를 처음부터 "누가 무엇을 구독할지"에 맞춰 설계해야 한다는 게 다른 점이었다. Firestore 데이터 구조 채팅 기능을 만들면서 컬렉션을 3개로 나눴다. RDB로 치면 users, chats, messa..

소스코드 → github.com/Jywan/Flutter_Learning 들어가며 최근에 Flutter와 Firebase를 조합해서 실시간 채팅 앱을 만들어보고 있다. 평소 Java/Spring이나 Node.js로 백엔드를 직접 짜는 데 익숙했는데, Firebase를 쓰면 인증 서버를 따로 구축하지 않고도 "회원가입 - 로그인" 흐름을 빠르게 붙일 수 있어서 학습용으로 잡기 좋았다. 이번 글에서는 시리즈의 첫 단계, 즉 Firebase 프로젝트 연동 + 이메일/비밀번호 인증의 최초 구현만 다룬다. 비밀번호 재설정이나 자동 로그인 유지처럼 나중에 추가된 기능은 이후 편에서 그 기능이 실제로 들어간 시점에 맞춰 다룰 예정이다. 프로젝트 한눈에 보기 이 시리즈에서 만드는 앱은 Flutter..