언니 MEETGO 만나봐!
서비스 둘러보기 MEETGO
Github Repository : Repository
아키텍쳐
.png&blockId=8e555249-659f-4974-b8e8-78cb9bc499dd)
주요 기술
학교 인증
미팅방 생성
미팅 대기방
실시간 채팅
약속 장소/ 날짜 정하기
마이페이지 + 스쳐간 인연
리뷰
미들웨어 체인을 이용한 라우트 보호
기술적 의사결정
Next.js
•
프레임워크로서 번들링, 컴파일 등과 같은 툴링을 추상화하고 자동으로 구성하기 때문에 애플리케이션을 만드는데 보다 집중할 수 있습니다.
•
서버 사이드 랜더링(SSR)과 정적 사이트 생성(SSG), 서버컴포넌트 등 React의 새로운 기능을 사용할 수 있습니다.
TypeScript
•
서로 다른 코드간의 관계를 표현하기 위해 사용됩니다.
•
가장 일반적인 오류인 유형 오류, 오타 등의 발생을 최소화하기 위해 사용하였습니다.
•
코드가 실행되기 전에 실행되어 타입이 올바른지 확인할 수 있어 사용하였습니다.
Zustand
•
간단한 설정으로 클라이언트 컴포넌트 간 이동이 필요한 데이터를 관리할 수 있습니다.
•
redux의 reduxDevTools로 디버깅이 가능하기 때문에 오류 추적에 용의합니다.
•
Jotai와 Recoil은 전역상태에 바로 접근하기 때문에 어느 단계에서 변화가 일어났는지 추적이 어렵습니다.
•
따라서 저희 조는 Zustand로 상태 관리를 선택했습니다.
React-Query
•
기존 useEffect와 zustand로 서버에서 불러온 데이터를 관리하다 보니,
◦
client 데이터와 서버 데이터를 이중으로 관리해야했고,
◦
useEffect가 실행될 때마다 불필요한 서버요청이 발생하는 문제점을 보완하고자 선택했습니다.
•
하나의 쿼리 키를 사용하여 특정 데이터를 전역적으로 관리함으로써, 중복된 서버 요청 없이 다른 컴포넌트에서도 데이터에 접근할 수 있게 되었습니다.
Supabase
•
데이터베이스, 인증, 스토어 등 백엔드 개발에 필요한 기능을 간편하게 이용할 수 있어 선택하였습니다.
•
실시간 기능을 제공하여 기능을 작동시킨 사람이 아니어도 추적이 가능한 서비스를 제공하고 있습니다.
•
Firebase는 검색기능을 제공하지 않기 때문에 데이터를 선별한 뒤 가져올 수 있는 Supabase를 선택하였습니다.
UNIVCERT
•
학교 인증을 통해 유저를 대학생으로 한정하고, 신뢰성 있는 미팅 홈페이지로 만들기 위해 선택했습니다.
Tailwind-CSS
•
일관적인 형태의 간편한 CSS 구현이 가능합니다.
Kakao-map
•
검색된 장소에 대한 자세한 장소를 얻을 수 있는 API를 선택하였습니다.
•
네이버는 더 적은 데이터를 주기 때문에 카카오 API를 선택하였습니다.
트러블슈팅
유저 정보를 불러올 때마다 getUser 메서드를 사용하여 불필요한 호출이 많아지는 이슈
여러 명이 동시 채팅 시 payload가 무시되는 이슈
실시간 채팅으로 사진 보내기
미팅 대기방에서 나가는 유저의 정보를 받아오지 못하는 현상
장소, 시간 선택 시 실시간으로 방장 외 사람들에게 반영 안되는 현상
팀원
팀 노션 :