수료 후, 이력서에 우리가 만들어낸 내용들을 꼼꼼하게 채워넣어야겠죠?
우리 프로젝트의 강점을 잘 녹여내기 위해 회고록 양식을 공유 드립니다.
프로젝트와 작성하시는 회고록을 기반으로 다음 주 멘토님들께서 순회할 예정이니,
새롭게 추가/개선할 기능이나 수정 방향성에 대해서 깊은 고민을 할 수 있는 기회가 되길 바랍니다
Table
Search
중간 발표 이전 기재
1. MVP 중간발표 자료(기입)
1.
프로젝트 정보
•
서비스명: MeetGo(믿고)
•
서비스 기획 의도: 미팅 방을 만들어 온라인에서 만난 사람들이 약속을 잡을 수 있으며, 피드백을 받을 수 있는 서비스를 기획했습니다.
•
프로젝트 한 줄 설명: 학교 인증을 한 대학생이 간단하게 미팅 방을 만들 수 있고, 지도와 채팅으로 약속을 정할 수 있으며, 미팅 후 후기를 나눌 수 있는 서비스입니다.
•
최종 MVP 스펙: 실시간 채팅이 가능한 realtime 시스템입니다.
2. 기술적 의사결정 & 트러블슈팅 기록
•
기술적 의사결정
React-query
Next.js
•
프레임워크로서 번들링, 컴파일 등과 같은 툴링을 추상화하고 자동으로 구성하기 때문에 애플리케이션을 만드는데 보다 집중할 수 있습니다.
•
서버 사이드 랜더링(SSR)과 정적 사이트 생성(SSG), 서버컴포넌트 등 React의 새로운 기능을 사용할 수 있습니다.
TypeScript
•
서로 다른 코드간의 관계를 표현하기 위해 사용됩니다.
•
가장 일반적인 오류인 유형 오류, 오타 등의 발생을 최소화하기 위해 사용하였습니다.
•
코드가 실행되기 전에 실행되어 타입이 올바른지 확인할 수 있어 사용하였습니다.
Zustand
•
간단한 설정으로 클라이언트 컴포넌트간 이동이 필요한 데이터를 관리할 수 있습니다.
•
redux의 reduxDevTools로 디버깅이 가능하기 때문에 오류 추적에 용의합니다.
•
Jotai와 Recoil은 전역상태에 바로 접근하기 때문에 어느 단계에서 변화가 일어났는지 추적이 어렵습니다.
•
따라서 저희 조는 Zustand로 상태 관리를 선택했습니다.
React-Query
•
불필요한 서버 요청을 막기 위해서 사용되었습니다.
•
서버에서 불러온 데이터를 zustand로 상태를 관리한다면 같은 데이터를 두 번 관리해야 하는 문제점이 발생하기 때문입니다.
•
하나의 쿼리키를 사용하여 서버에서 데이터를 받아옴으로서 중복된 서버 요청 없이 데이터를 사용할 수 있어 선택하였습니다.
Supabase
•
데이터베이스, 인증, 스토어 등 백엔드 개발에 필요한 기능을 간편하게 이용할 수 있어 선택하였습니다.
•
실시간 기능을 제공하여 기능을 작동시킨 사람이 아니어도 추적이 가능한 서비스를 제공하고 있습니다.
•
Firebase는 검색기능을 제공하지 않기 때문에 데이터를 선별한 뒤 가져올 수 있는 Supabase를 선택하였습니다.
UNIVCERT
•
학교 인증을 통해 유저를 대학생으로 한정하고, 신뢰성 있는 미팅 홈페이지로 만들기 위해 선택했습니다.
Tailwind-CSS
•
일관적인 형태의 간편한 CSS 구현이 가능합니다.
Kakao-map
•
검색된 장소에 대한 자세한 장소를 얻을 수 있는 API를 선택하였습니다.
•
네이버는 더 적은 데이터를 주기 때문에 카카오 API를 선택하였습니다.
중간 발표 이후 기재
3. 중간발표 피드백 기록
•
월요일에 대면 피드백을 꼼꼼히 기록해두고, 개선이 필요한 사항에 적용해봅시다.
창식 튜터님 피드백
2) 추가/개선 할 기능과 그 이유
•
(추가) 채팅방에 미팅 시간/날짜 공지: 채팅방에 다른 사람들에게 미팅의 시간/날짜를 알리기 위함
•
(개선) 기가 막힌 기능 : 1:1이 아닌 n:n 환경의 실시간 데이터 공유(로비, 수락창, 채팅창)
•
(추가) 미팅 완료 후 방 자동 삭제 기능
•
(개선) 수락창, 채팅방 UI 개선
•
(추가) 아이디, 비밀번호 찾기 기능
3) 추가/개선할 기능을 어떻게 구현 할 것인지
•
ex) 사용할 라이브러리와 그 이유
•
실시간 채팅 → websocket(또는 socket.io) : 새로운 데이터가 들어오면 먼저 서버가 클라이언트에게 데이터를 전송하는 기술이므로 실시간 채팅 메세지를 주고받는 방식에 적합함
•
미팅 완료 후 방의 자동 삭제 기능 → 실제로 방이 사라지는 것이 아니라, 방의 상태를 바꾸는 방법으로 방 삭제를 처리하여 이후에도 방에 참여했던 유저 정보를 가져올 수 있게 처리
4. 앞으로의 계획 및 우선순위
•
예시
순위 | 구분 | 앞으로의 계획 (구체적으로) | 마감예정일자 |
1 | 개선 | - supabase select 부분 join으로 변경하여 불필요한 서버 요청 줄이기 | |
2 | MVP | - 미구현 된 미팅 확정된 시간 하루 뒤 방 자동삭제하기 | |
3 | 개선 | - 실시간 채팅 서비스 구현하기 | |
4 | 추가 | - 실시간 채팅 관련 자료 검색하기 | |
5 | 추가 | - 실시간 채팅에 활용 할 라이브러리 학습 및 적용하기 |
5. 앞으로 해야 할 일(4주차)
•
팀 전체 (리더와 부리더님께서 필두로 정리해 주세요.)
로그인 후 헤더 상태가 새로고침해야지 바뀌는 문제
⇒ location.replace 로 강제 새로고침 후 임시 해결
소셜로그인
⇒ 각 API 에서 허용 URI에 배포 주소 추가
방 만든 후 undefined (*)
인원이 안찼는데 바로 채팅방으로 넘어가는 문제
한 번 나간방은 다시 못 들어가게
review 클릭 시 오류
supabase select 부분 join으로 변경하여 불필요한 서버 요청 줄이기 : 이거 안줄여짐
방에 안들어가진다?
채팅방 나갔을 때 모집중으로 안돌아옴
마이페이지 이미지 바로 안바뀌는 문제
online과 참여자들 위치 수정
isPending 으로 스켈레톤 처리하여 로딩중일 때 UI 깔끔해보이도록 : pending은 아니지만..
‘/login’, ‘female’같이 중복 or 타 컴포넌트에서도 공통으로 쓰는 부분들 전부 변수처리
useQuery도 타입 지정 (확실한 타입에는 옵셔널체이닝 지양) : 타입을 지정해도 옵셔널 체이닝은 안사라진다. 데이터베이스에서 정보를 가져오는 특성상 undefined의 가능성은 항상 열려있기 때문!
{ () ⇒ function() } = { function } 로 변경
div style 지양
•
팀원 개인별로 작성해 주세요.
◦
황인정
사진 추가기능
◦
최희라
비밀번호 보이게 하는 눈 아이콘 추가
마이페이지 컴포넌트 분리(스쳐간 인연, 작성글, 좋아요한 글 페이지 별도로 분리?)
카톡 ID 요청 오면 빨간색 동그란 알림 뜨도록?
카톡 ID 요청 취소 버튼 만들기
상수 변수화
성별 한번 선택하면 수정 안되도록’
◦
이혜진
한번 채팅창에서 나간 사람은 채팅이 생성된 그 방에는 다시 들어오지 못하는 기능
하루 뒤에 방이 사라지는 기능
realtime을 방의 모달에도 적용해서 팀장만 보이는 에니메이션 추가하기 : 고정 + 팀원이 모두 권한이 있도록 수정