MVP 시연 영상 (3분)
카카오톡 ID 마이페이지 정보들 넣어놓기
•
로그인, 로그아웃 - 학교 인증 (소셜로그인 → 로비 → 학교인증을 해주세요(모달) → 마이페이지 → 학교 인증, 성별 선택)
•
로비 - 미팅방 만들기, 인원 수 미리 맞춰놔서 채팅방으로 넘어가기 (방장인채로)
•
채팅 - 실시간 채팅, 검색, 마지막으로 읽은 메세지, 방장이 지도/ 날짜 정하기, 지도에서 술집 찾기
•
리뷰 - 간단하게 보여주기
•
카카오톡 ID 요청 (후순위)
서비스 아키텍처 설명 (2분)
MVP가 어떤 구조를 갖고 있는지, 주요 기능을 구현하기 위해 어떤 기술을 썼는지
•
슈퍼베이스 리얼타임 (현재 채팅방 참여 수, 수락창에 참여 여부, 카톡 요청하기) : 실시간으로 변화되는 데이터 렌더링을 시키기 위해
•
react-query : 불필요한 서버 요청을 막기 위해서
•
zustand : 전역으로 쓸 컴포넌트 상태 제어 (모달, 버튼)
•
middleware: 체인으로 만들어서 인증 인가와 route 보호
기술적 의사결정 & 트러블 슈팅 (3분 30초)
•
MVP 개발 기간 동안, 기술적으로 어떤 의사결정을 했는지 설명하는 시간입니다.
•
중요한 것은 의사결정을 내리기까지의 당위성(이유)과 합의, 적용 후 결과입니다.
◦
어떤 문제를 해결하고 싶었는지
◦
어떤 해결책들이 있었고
◦
그 각각의 장점과 단점은 무엇이었는지
◦
그래서 어떤 것을 선택하게 되었는지 발표해주시면 됩니다.
•
트러블 슈팅
◦
의미 : 효율, 속도와 상관없이 기능이 동작할 때, 그것을 “빠르게” 혹은 “효율적”으로 개선한 경험
◦
트러블 슈팅을 시도하며 겪은 기술적 의사결정 과정을 담아내주세요.
◦
아직 기술적 의사결정에 고민이 많다면 넘어가도 됩니다.
•
useEffect, zustand
◦
어떤 문제를 해결하고 싶었는지
▪
useEffect와 zustand를 사용해서 user 정보를 전역관리 하다보니 불필요한 서버 요청이 많아졌다. useEffect 의존성 배열 안의 상태값이 변경될때마다 서버 요청을 보냈기 때문이다.
▪
서버 데이터도 업데이트 하면서 zustand store 업데이트를 하다보니 이중으로 데이터를 관리해야 하는 문제가 있었다.
◦
어떤 해결책들이 있었고
▪
user 정보를 하나의 쿼리 키를 이용해서 서버에서 받아옴으로써 어디서든 해당 쿼리 키로 중복적인 서버 요청 없이 데이터를 사용할 수 있다.
◦
그 각각의 장점과 단점은 무엇이었는지
▪
장점 : 전역적으로 서버 데이터가 관리되기 때문에 어디서든 데이터에 접근할 수 있다.
▪
단점 : store에 비해 로직이 추가되었다, 이전에 썼던 코드를 다 바꾸다 보니 시간이 지연되었다.
•
트러블슈팅
(나중에 추가해주세요)
추후 개발 및 기술적인 도전 계획 (1분 30초)
•
중간 발표 이후, 남은 2주 동안 어떤 계획으로 프로젝트를 완성해주실지 설명하는 시간입니다.
•
아래와 같은 내용을 포함하면 좋습니다.
◦
최종 완성본의 서비스 아키텍쳐 구상도
◦
MVP에서 개선할 기능과 이에 대한 개발 순서
◦
예상되는 개발 난제와 이에 대한 해결 방안(=기술적인 도전)
•
아이디, 비밀번호 찾기
•
성능 최적화(로딩 속도 줄이기, react-query 프리패칭)
•
반응형, 모바일 디자인
각자 기능 개발한 부분을 적어주세요!! (내용 부족한 곳 보완용)
사이드 바
•
카카오맵 api를 이용해서 지도에 현재위치 주변 술집 보여주기, 지도 검색 기능 구현, 장소 선택 기능 구현
•
데이트피커 라이브러리를 사용해서 미팅 시간 선택 구현
로그인, 회원가입, 마이페이지, 헤더(Navbar)
•
로그인, 회원가입
◦
소셜 로그인 및 이메일 로그인 기능
◦
다양한 상황의 유효성 검사 (닉네임 및 이메일 중복 확인까지)
•
마이페이지
◦
user 데이터 조회, 수정 - tanstackquery로 변경시마다 invalidate 처
◦
미팅방에서 만났던 유저들 정보 렌더링 및 실시간 카톡 ID 요청을 통해 수락 시 ID 받아올 수 있음 - supabase RealTime 구독 기능으로 상대의 요청에 따른 실시간 렌더링
•
헤더(Navbar)
◦
페이지 이동은 프리패칭을 이용한 빠른 로딩을 위해 Next의 Link 기능 사용
실시간 채팅, 라우트 보호
•
실시간 채팅
◦
supabase Realtime 구독으로 실시간 채팅 구현
◦
supabase Realtime presence 구독으로 현재 채팅방에 참여 중인 사람 수 표시
◦
채팅 삭제 기능 구현
◦
참여하고 있는 사람들 아바타 호버 시 정보조회 구현
◦
이전 메세지 더보기 기능 구현
◦
스크롤 및 새로운 메세지 추가될 시 스크롤 중인지 아닌지에 따라 조건부 스크롤다운 버튼
◦
메세지 검색기능 구현
◦
날짜가 변경될 시 해당 메세지부터 변경된 날짜 표시 구현
◦
마지막으로 읽은 메세지 기억 기능 및 해당 메세지까지 스크롤 구현
◦
채팅방 나갈 시 나가기를 누른 주체에 따른 실시간 수락창 / 로비 이동 조건부 렌더링
◦
로비에 읽지 않은 메세지 수 실시간 표시 및 방에 들어갈 시 초기화 기능 구현
•
라우트 보호 - middleware 체인을 통해 여러 조건의 라우트 보호
◦
쎄션 유지
◦
로그인 여부에 따른 라우트 보호
◦
referer를 이용하여 주소창에 직접 타이핑 또는 뒤로가기로 수락창 / 채팅창에 접근하려고 할 시, 내가 참여 중인 방에만 접근 가능하도록 라우트 보호
◦
학교 인증 여부에 따라 인증이 안 되어 있을 시 로비로 접근 불가하도록 인가 제어