프론트엔드 개발 포트폴리오 | 1인 가구 맞춤형 만남 플랫폼

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 '올래'을 소개합니다.

Sep 04, 2023

Contents

올래?🛠️아키텍처 🔧 기술적 의사결정 📌 트러블 슈팅 🔎 주요기능 🧑🏻‍💻👩🏻‍💻 팀원

올래?

1인가구 구성원 또는, 사생활에 깊이 연관되지 않는 가벼운 만남으로 관계를 시작하고 싶은 신세대에게 만남 서비스를 제공합니다.

서비스 둘러보기 : (링크)

Github Repository : (링크)

🛠️아키텍처

🔧 기술적 의사결정

사용 기술	기술 설명
Recoil	코드의 복잡도를 줄일 수 있고 손쉽고 빠르게 전역 상태를 관리할 수 있어 사용되었다.
KAKAOMAP SDK	리액트 컴포넌트를 적용하기 간편하며 직관적이다. 또한 누구나 충분히 예측 가능할 만큼 단순한 구조이기에 유지 보수 측면에서 유리하다 판단하여 사용되었다.
Cloud Firestore	복합 정렬 및 필터링을 사용한 인덱싱된 쿼리를 제공한다. 또한, 여러 데이터를 보관하여 글로벌 확장성과 강력한 안정성을 보장하여 사용되었다.
React Query	캐싱 된 데이터로 인해서 API 콜을 줄여주고 서버에 대한 부담을 줄어들어 사용되었다.

📌 트러블 슈팅

✔️ API 요청 수 줄이기

❓ 웹 페이지의 로딩 속도가 눈에 띄게 느렸고 파이어베이스 데이터 낭비가 심하다는 문제점을 발견하였다. 문제점은 onsnapshot 메소드를 사용하는 컴포넌트에서 실시간으로 데이터를 요청하고 있었다.

❗️첫 번째 시도: usePosts 커스텀 훅을 만들어서 API 요청하는 코드를 한 곳에서만 실행되게끔 코드를 수정하였다. 하지만 usePosts()가 필요한 컴포넌트에서 여러 번 실행되기 때문에 기존의 코드와 똑같은 오류를 만났다.

❗️해결 방법 : React Query를 사용하여 cacheTime 과 staleTime 을 지정하여 statleTime이 지나지 않았으면 새로운 요청이 들어와도 API 요청을 하지않고 기존의 로컬 캐시로 사용하게끔 코드를 수정하였다. 또한, 파이어베이스 데이터 요청이 91만 → 25만으로 줄어들어 API 효율성을 늘렸다.

❌ 변경 전 (돔 트리 구조를 포함, 이미지 까지 화면에 로드 되는 시간)

⭕ 변경 후 (돔 트리 구조를 포함, 이미지 까지 화면에 로드 되는 시간)

✔️ SVG 아이콘 적용

❓ 해당 웹페이지에서 Png 아이콘을 사용하였을 때 용량뿐만 아니라 이미지 호출 횟수가 많았고 확대 시 아이콘의 깨지는 현상이 있었다.

❗️SVG 아이콘을 사용하여 크기에 따라 아이콘들이 깨지는 현상이나 품질이 떨어져 보이지 않았고 Png 아이콘을 사용할 때보다 아이콘의 호출 횟수가 줄음

✔️ 채팅 리스트와 채팅방

❓ 게시글 페이지에서 ‘함께 할래요’ 버튼을 눌렀을 때 게시글 작성자와 현재 사용자의 채팅 리스트가 동시에 나타나게끔 해야 했다.

❗️ DB 구조를 설계하여 chatList와 chatBox로 나누어 관리하였다.

user /user id/chattingListroom /채팅방id 에서 user1과 user2의 db에 데이터가 동시에 저장되게 하였다.

⇒ 채팅 리스트에 각자 상대방의 프로필이 생성된다.

2 . 채팅방 id를 게시글 uid + 현재 유저 uid로 함으로써 게시글마다 채팅방이 생기게 함

⇒ 지속적인 채팅이 아니라 일회성에 그칠 것이라 예상했기 때문

⇒ 이전의 대화가 새로운 대화에 영향을 주는 것을 막기 위해서

Alarm은 함께할래요 버튼을 누르면 게시글 작성자에게 채팅이 시작됐음을 알리는 알람이 가게 한다.


채팅리스트  

       (게시글 작성자) 
user -  user1 IDㅡ  chattingListroom  ㅡ 채팅방1 id (게시글 uid + 현재 유저uid) 
                    ㄴ Alarm

      (현재 유저)   
         user2 ID ㅡ chattingListroom   ㅡ 채팅방1 id (게시글 uid + 현재 유저uid) 
                      ㄴ Alarm


Chatting - room1 ㅡ message  - doc 1
                              ㄴ message: ""
                              ㄴ createdAt: ""
                               ㄴ nickname: ""
                               ㄴ profileURL: ""
                               ㄴ chattingRoomId
                               ㄴ user

                                doc 2
                                ㄴ message: ""
                                ㄴ createdAt: ""
                                ㄴ nickname: ""
                                ㄴ profileURL: ""
                                ㄴ chattingRoomId
                                ㄴ user