[팀 프로젝트] 우리동네 소모임 채팅 어플 '동네챗' 회고(feat. 트러블 슈팅)
개인적인 감상 및 회고
어느새 두 번째 팀 프로젝트를 완료했다.
일주일간 [기획-디자인-개발-발표] 순으로 굵고 짧게 진행된 세션이었다.
아쉬운 점도 많았지만, 그래도 개인적으로나 팀적으로나 성장 할 수 있었던 좋은 기회였다고 생각한다 : )
이번 개발에서 채팅을 맡았는데, 가장 난이도 있어 보이는 부분을 맡아야지(좀 고통스럽더라도) 부담감으로 인해 내가 할 수밖에 없는 환경에 밀어넣으면 결국엔 더 배우고 성장할 수 있을거라고 생각해서 한 결정이었다. 그리고 역시 예상 했던데로 힘들고 재미있었던 시간이었다. firebase의 스냅샷을 사용하여 실시간 채팅을 만드는 과정에서 어려움도 겪고 해결하는 과정을 반복하며, firebase 사용이나 MVVM 패턴 관련해서 직접 사용해보면서 많은 공부가 되어 값진 시간이었다. 역시 고통주도개발이 가장 빠른 학습방법이란 걸 또 다시 느꼈다 ㅋㅋ
그리고 어쩌다 내가 발표까지 맡게 되어서 밤새 발표자료도 준비하게 되었고, 그런 과정에서 유독 이번 팀플은 더 노고가 들어가서 그런지 애정이 생겨서 기억에 남을 것 같다☺️.
깃허브 README
https://github.com/dongne-chat/dongne_chat
채팅방 페이지 미리보기
firebase의 스냅샷을 사용하여 실시간 채팅이 되도록 만들었고, 참여자의 닉네임과 프로필이미지를 메세지와 함께 불러오도록 했다(이 과정에서 문제를 겪어서 트러블 슈팅 재료를 얻게 됨. 럭키비키니시티~ ☘️).
UI적으로는 입력창에 텍스트가 길어지는 경우를 생각해 최대 높이를 고정해두었다. 그리고 키패드가 활성화되면 채팅 입력창과 화면이 키패드 높이에 맞춰 자연스럽게 올라가도록 구현하였다. 사실 가장 기본 기능이 들어간 채팅방 기능이지만 내가 만들어서 그런지 더 애착이 간다. 개발은 뇌와 손가락으로 노력의 결과물인 내 자식을 낳는 느낌... 🫶
트러블 슈팅
문제
채팅방에서 메시지는 실시간으로 표시되지만, 유저의 프로필 이미지와 닉네임은 화면에 즉각적으로 표시되지 못하고 , 화면을 한 번 클릭하거나 특정 액션을 해야만 유저 정보가 정상적으로 표시되는 문제 발생.
원인 추론
1. 뷰모델에서 메시지 데이터와 유저 데이터 를 각각 비동기적으로 가져오다 보니, 로딩 시점에 차이가 발생함.
2. 메시지 데이터가 먼저 표시되고, 이후 유저 데이터가 로드되면서 화면이 갱신됨(유저 데이터는 두 번의 과정을 거쳐 가져오는 방식).
3. 이때 유저 데이터가 준비되지 않은 상태에서 UI 가 먼저 렌더링되므로, UI의 상태가 가 갱신되지 않고 화면을 다시 클릭해야 반영되는 문제가 발생함.
해결방안
1. ChatMessageWithUser 클래스 생성
- 메시지와 사용자 데이터를 결합한 구조로 관리하기 위한 클래스 생성.
2. 뷰모델에서 데이터 결합
- 메시지 데이터를 Stream 으로 가져올 때 사용자 데이터를 매핑하여 결합된 데이터를 상태로 저장.
3.UI 에서 데이터 불러오는 방식 변경
- UI는 ChatMessageWithUser를 구독하여 메시지와 사용자 데이터를 동시에 불러와 사용.