💡 요즘은 뉴트로(New+Retro)의 감성이 새로운 트렌드로 급부상 하고 있는 것 같다. 사실 나는 삐삐를 사용해본 세대는 아니지만... 그래도 삐삐라는 잊혀진 추억 속 상징을 새롭게 재해석해보면 재밌을 것 같다는 생각이 들었다.친구들과 인터넷으로 삐삐를 남기며 연락을 주고 받을 수 있다면..?
- 리액트
- Firebase
- DiceBear 아바타
- 일반 이메일 회원가입 & 소셜 로그인
- Github
- 비밀번호 재설정 (이메일 형식)
- 실시간 데이터 리스닝 (삐삐, 회원정보 변경, 채팅 등등)
- 친구 신청 → 수락 → 친구 등록
- 담벼락에 삐삐 남기기
- 삐삐 확인 & 실시간 대화 기능
친구요청 기능을 넣어서, 친구끼리만 삐삐를 날릴 수 있도록 기능구현을 해보고 싶은데... 이런 기능을 도전해보는게 처음이라, DB 모델링을 어떻게 해야될지 참 막막하다...
- Users 컬렉션
- pendingFrineds 필드 생성
- friends 필드 생성
- Search → 상대방 프로필뷰에 접근 → 나의 friends 필드에 상대방 uid값 없으면? → 친구요청 버튼 append
- 친구요청 클릭 → 나의 pendingFriends 필드에 상대방 uid값 push
- 상대방 : request 콜렉션을 home 뷰의 useEffect로 참조
- 만약 나의 uid값의 doc이 requests 콜렉션에 존재한다면?
- 그리고 그 requests doc의 배열 내에 상대방 uid값이 존재한다면? → 알림 → 수락여부 결정 → 수락? → 나의 User friends 필드에 상대방 uid값 추가.
- 요청자 : 메인뷰 useEffect를 통해 나의 pendingFriends uid값이 Accepted 콜렉션에 존재한다면?→ pendingFriends → friends로 이동
- 친구요청 완료
사실 Requests 콜렉션과, Accepted 콜렉션을 생성해서 운용하는 것이 아닌, Users 콜렉션 자체 내에서 콜백을 활용한 친구신청 & 수락 기능을 구현해보고 싶었다. 근데, 아직 콜렉션에 대한 권한 설정과, 타인이 상대방의 Users콜렉션 업데이트 권한을 부여받는 것이 과연 안전할 것인가에 대한 확신이 없었다.
⇒ 따라서... 일단은 위와 같이 다소 귀찮고 복잡한 로직을 구성해봤고, 추후 보안이나 권한 설정에 대해 조금 더 공부를 해본 뒤, 리팩토링 과정에서 코드를 조금 더 효율적으로 작성해보려 한다.
사실 삐삐의 본래의 기능은, 상대방이 삐삐를 확인하고 나에게 연락을 할 수 있도록 하는 것이었다. 하지만... 뭔가 그냥 담벼락에 삐삐만 남기는 것은 큰 의미가 없을 것 같고, 진정한 뉴트로를 구현해보고 싶어서 채팅기능도 한번 넣어보게 되었다.
- Chat 콜렉션 내 개별 문서 이름 ?
- 필요한 필드 ?
우선, 우리나라의 대표적인 채팅 어플리케이션 카카오톡의 채팅 로직을 분석해봤다.
-
단톡과 개인톡이 엄연히 구분되어 있다.
⇒ 만약 단톡과 개인톡이 같은 문서로써 연동이 가능하다면, 개인톡에서 다른 사람을 초대했을 때, 개인톡방 내에 상대방이 초대될 것이다. 하지만 카톡은 개인톡 내에 새로운 상대방이 초대되는 것이 아니라 아예 새로운 단톡방이 만들어진다.
-
상대방과 나의 1:1 채팅방은 단 하나만 생성 가능하다.
⇒ 이렇게 새로운 개인톡방을 생성하려 해도, 상대방과의 개인톡 내역이 존재한다면 완전히 새로운 톡방이 생성되는 것이 아니라 기존의 채팅방으로 이동된다.
- 나의 uid + 상대방의 uid를 합친 것을 uid로 활용?
- 문서 이름은 중요하지 않을 수도 있다.
- 우선 상대방 uid값
chat/:id
url로 이동한 뒤, useEffect를 활용- Chat 콜렉션 내에 모든 문서 중에서, people필드가 나의 uid + 상대방의 uid를 값으로 갖고있는 문서를 체크
- 해당 문서가 존재하면 그 채팅방을 불러오기
- 존재하지 않으면? ⇒ addDoc을 통해서 새로운 문서 생성하기
- 우선 상대방 uid값
- people : String
- 나의 uid와 상대방의 uid를 합친다.
- 나중에 쿼리문에서 상대방 uid + 나의 uid 또는, 나의 uid + 상대방 uid값을 조건부 확인한다.
- chats : Array
{uid : Object.id, text : String, createdAt : Date }