오늘 한 일 (같이)
- 디자이너님과 회의
- 와이어프레임 피드백 및 플로우 정리
- 각자 의사코드 공유, 다같이 회의 거쳐서 수정
- DB 완성
채팅 구현 플로우
홈 의사코드
1. 배너
trips 테이블에서 get
trips.trip_master || trips.trip_members 에 있는 id와 유저 id가 일치하는 trip만 필터링
start_data를 기준으로 저장
0번째 인덱스만 불러와서 배너에 노출
(새로 추가된 테이블 기준으로 수정)
2. 추천 인기 버디즈
온도 기준으로 정렬
buddies 테이블에서 get
메인페이지에선 몇개만 가져오기
전체보기 누르면 /buddies 페이지로 이동
3. 인기 스토리
(이 부분은 은님에게 컴퍼넌트 맡김)
4. 지금 모집중인 여정
trips 테이블에서 isValidated 만 필터링해서 get
메인페이지에선 몇개만 가져오기
전체보기 누르면 /trips 페이지로 이동
chat 의사코드
1. 채팅 생성:
trip 모집 생성 시 바로 contracts 테이블에 isLeader=true인 row 생성
2. contract 추가 및 채팅방 입장:
채팅하기 = isValidate=true 해당되어야만 채팅창 접근 가능
채팅하기 클릭 -> master에게 요청 알림 -> 거절or수락 창
거절 시 거절됐다는 알림
수락 시 수락됐다는 알림 (클릭하면 채팅으로 이동)
수락 시 participant 테이블에 row 생성
master의 경우: 수락하기 -> 채팅방 이동
3. 채팅 목록:
contracts 테이블에서 user_id와 member_id? 비교 돌려서 해당되는 채팅만 가져옴
상태에 저장, 목록 렌더링
클릭하면 chat/[id]로 이동
4. 메시지 전송:
해당 chat과 연결된 messages 리스트를 상태에 저장
메시지 도착할 때마다 메시지 리스트 업데이트
input 창에 입력한 message_content와 message_sender_id 저장
전송 누르면 messages 테이블에 새로운 메시지 삽입
메시지 보내면 notification 테이블에 type="message"로 새 row 추가
5. 이미지 전송 로직
- createObjectUrl이미지를 화면에서 볼 수 있도록 임시 url 생성
- supabase storage에 저장 (webp로)
- getPublicUrl 사용해서 Image 컴퍼넌트로 뿌리기
새로 배운 것들 메모
1. supabase 실시간 채팅 관련
- postgress를 사용하면 서버에 써지면 렌더링됨
바로바로 되려면 broadcast를 쓰면 됨 - 문제: 서버에 저장을 따로 해줘야 함. 화면에 그려지는 순간 업데이트 되지만 채팅 데이터는 따로 테이블에 저장을 해야 한다.
2. 이미지 처리
1) createObjectUrl 사용해 이미지를 화면에서 볼 수 있도록 임시 url 생성
2) supabase storage에 저장
.from bucket
.upload3) getPublicUrl 사용해 Image 컴퍼넌트로 뿌리기
***Optimistic 업데이트를 사용한다면 createObjectUrl
3. 퍼널(Funnel) 패턴
출처: https://dev.to/hxxtae/tossyi-peoneolfunnel-paeteon-jeogyonghaebogi-2n7c
요즘 모바일 UX, 토스 이후로 신경쓰기 시작한 부분. 튜터님이 우리 진행 상황을 보시고 모바일 구현 시 다들 참고하면 좋다고 하신 기술이다!
이런 패턴을 적용할만한 부분이 있다면 적용해보자.
좋은 팁을 알게 됐다.
파이널 프로젝트 첫주를 마무리 하며
파이널 프로젝트를 시작한 주. 월요일에 첫 인사를 시작으로 화요일부터 이어진 본격적인 회의. 정말 9 to 9 의 회의 시간. 리더님 부리더님은 새벽까지 회의하신 것 같지만... 12시간 회의도 정말 심리적으로나 체력적으로나 쉽지 않은 4일이었다!
하지만 뿌듯하고, 좋은 팀, 좋은 팀원들을 만난 것 같아서 즐겁게 임할 수 있는 시간이었다. 리더 부리더 님들이 정말 배려를 많이 해주시고, 부족한 부분을 잘 이해해주시고 다같이 문제를 해결해나갈 수 있도록 열심히 도와주셔서... 너무 잘 만났다고 감사하다고 말하고 싶다! 우리가 사전에 계획했던 대부분의 일은 마친 것 같고. 이제 코딩 들어가면 더 바빠지겠지..?
매우 기대가 된다.
회의는 (즐거웠지만) 지쳐서 이제 잘 하든 못하든 코딩을 빨리 시작하고 싶다ㅋㅋㅋㅋ
주말 동안 채팅 구현 로직에 대해 더 공부하고 와야겠다.
기술 면접 준비도 잊지 말고! 알고리즘 문제 풀이도 내일부터는 매일 하나씩은 꼭 하는 거 잊지 말자.
기록은 생명. 5분 기록 보드와 TIL 반드시 12시 지나가기 전에 작성하기.
남은 기간 동안 성실하게 임해보자.
