hoonjoo-park / pipi

PiPi is just for simple message talk.

삐삐 (Pipi)

친구들과 인터넷으로 삐삐를 남기며 연락을 주고 받을 수 있다면..?

💡 요즘은 뉴트로(New+Retro)의 감성이 새로운 트렌드로 급부상 하고 있는 것 같다. 사실 나는 삐삐를 사용해본 세대는 아니지만... 그래도 삐삐라는 잊혀진 추억 속 상징을 새롭게 재해석해보면 재밌을 것 같다는 생각이 들었다.

---

🧪 사용 Stack

• 리액트
• Firebase
• DiceBear 아바타

---

💡 주요 기능

• 일반 이메일 회원가입 & 소셜 로그인
  • Github
  • Google
• 비밀번호 재설정 (이메일 형식)
• 실시간 데이터 리스닝 (삐삐, 회원정보 변경, 채팅 등등)
• 친구 신청 → 수락 → 친구 등록
• 담벼락에 삐삐 남기기
• 삐삐 확인 & 실시간 대화 기능

---

🔮 기능 구현 및 문제해결 과정

🔫 친구요청

친구요청 기능을 넣어서, 친구끼리만 삐삐를 날릴 수 있도록 기능구현을 해보고 싶은데... 이런 기능을 도전해보는게 처음이라, DB 모델링을 어떻게 해야될지 참 막막하다...

내가 짜본 친구요청 기능의 로직

1. Users 컬렉션
   • pendingFrineds 필드 생성
   • friends 필드 생성
2. Search → 상대방 프로필뷰에 접근 → 나의 friends 필드에 상대방 uid값 없으면? → 친구요청 버튼 append
3. 친구요청 클릭 → 나의 pendingFriends 필드에 상대방 uid값 push
4. 상대방 : request 콜렉션을 home 뷰의 useEffect로 참조
   • 만약 나의 uid값의 doc이 requests 콜렉션에 존재한다면?
   • 그리고 그 requests doc의 배열 내에 상대방 uid값이 존재한다면? → 알림 → 수락여부 결정 → 수락? → 나의 User friends 필드에 상대방 uid값 추가.
5. 요청자 : 메인뷰 useEffect를 통해 나의 pendingFriends uid값이 Accepted 콜렉션에 존재한다면?→ pendingFriends → friends로 이동
6. 친구요청 완료

---

사실 Requests 콜렉션과, Accepted 콜렉션을 생성해서 운용하는 것이 아닌, Users 콜렉션 자체 내에서 콜백을 활용한 친구신청 & 수락 기능을 구현해보고 싶었다. 근데, 아직 콜렉션에 대한 권한 설정과, 타인이 상대방의 Users콜렉션 업데이트 권한을 부여받는 것이 과연 안전할 것인가에 대한 확신이 없었다.

⇒ 따라서... 일단은 위와 같이 다소 귀찮고 복잡한 로직을 구성해봤고, 추후 보안이나 권한 설정에 대해 조금 더 공부를 해본 뒤, 리팩토링 과정에서 코드를 조금 더 효율적으로 작성해보려 한다.

---

💬 채팅 기능

사실 삐삐의 본래의 기능은, 상대방이 삐삐를 확인하고 나에게 연락을 할 수 있도록 하는 것이었다. 하지만... 뭔가 그냥 담벼락에 삐삐만 남기는 것은 큰 의미가 없을 것 같고, 진정한 뉴트로를 구현해보고 싶어서 채팅기능도 한번 넣어보게 되었다.

🖲 DB 스키마 모델링을 어떻게 하는게 좋을까..?

1. Chat 콜렉션 내 개별 문서 이름 ?
2. 필요한 필드 ?

---

🔑 상대방과 나만의 독립적인 대화방을 어떻게 보장할 수 있을까?

우선, 우리나라의 대표적인 채팅 어플리케이션 카카오톡의 채팅 로직을 분석해봤다.

1. 단톡과 개인톡이 엄연히 구분되어 있다.

   

   ⇒ 만약 단톡과 개인톡이 같은 문서로써 연동이 가능하다면, 개인톡에서 다른 사람을 초대했을 때, 개인톡방 내에 상대방이 초대될 것이다. 하지만 카톡은 개인톡 내에 새로운 상대방이 초대되는 것이 아니라 아예 새로운 단톡방이 만들어진다.

2. 상대방과 나의 1:1 채팅방은 단 하나만 생성 가능하다.

   

   ⇒ 이렇게 새로운 개인톡방을 생성하려 해도, 상대방과의 개인톡 내역이 존재한다면 완전히 새로운 톡방이 생성되는 것이 아니라 기존의 채팅방으로 이동된다.

---

1:1 개인 채팅방 문서 이름

1. 나의 uid + 상대방의 uid를 합친 것을 uid로 활용?
2. 문서 이름은 중요하지 않을 수도 있다.
   1. 우선 상대방 uid값 chat/:id url로 이동한 뒤, useEffect를 활용
      • Chat 콜렉션 내에 모든 문서 중에서, people필드가 나의 uid + 상대방의 uid를 값으로 갖고있는 문서를 체크
      • 해당 문서가 존재하면 그 채팅방을 불러오기
      • 존재하지 않으면? ⇒ addDoc을 통해서 새로운 문서 생성하기

---

그렇다면 필요한 필드는?

1. people : String
   • 나의 uid와 상대방의 uid를 합친다.
   • 나중에 쿼리문에서 상대방 uid + 나의 uid 또는, 나의 uid + 상대방 uid값을 조건부 확인한다.
2. chats : Array
   • {uid : Object.id, text : String, createdAt : Date }

---