yarn add @tanstack/react-query또는npm install @tanstack/react-queryyarn add axiosyarn add -D @types/axios또는npm install axiosnpm install --save-dev @type

1) 실시간 채팅 기능2) 실시간 알림 기능 일부3) home 페이지, 헤더, 탭메뉴, 기능 일부zustand 사용해 count 전역 상태 관리 : 코드가 복잡하지 않으며 사용이 편리하고 유지보수에 용이supabase realtime 활용한 실시간 인터렉션supabas

그동안 빠르게 approve, merge 하느라 PR마다 코드리뷰를 거의 안 달고 확인 댓글만 짧게 남겼었는데, 한 번 쭉 다같이 코드리뷰를 해보자는 팀장님&부팀장님의 의견에 따라 코드리뷰를 해 보았다.코드를 전체적으로 검토해보면서(기술적인 부분은 거의 그냥 넘겼지만.

notifications 페이지 UI 작업trips 페이지에서 Alarm 아이콘 누르면 notifications 페이지로 이동탭메뉴 글씨 추가, 컬러 변경채팅 목록에 안 읽은 메시지 숫자 표시하는 방법에 대해 고민안 읽은 메시지 숫자 표시하는 방법에 대해 고민. =>

채팅 목록 & 채팅 페이지 pc 버전전체적으로 리팩토링tanstackquery 사용컴포넌트 분리, atoms까지 분리!messages 테이블에 unread column 추가하는 것 관련해서 의견 내기알림 목록 페이지 만들기알림 기능 구현기술면접 공부남은 2주 동안 gi

부모 요소 (레이아웃) : overflow-hidden, 하위 요소 센터로 배치자식 요소 (이미지 자체) : object-cover자주 필요한 이미지 설정인데 한번 기록해 놓아야 좋을 것 같아서 기록한다!

현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저 프로필 사진은 로드되지 않고 있다.데이터 f

어렵게 생각했는데 생각했던 것보다 간결하다!현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저

어제 강의를 들어봤는데, 두려워 했던 것보다 어렵지 않아 보였다.이번주에 MVP 발표까지 해야 하는 구현 사항을 마쳐야 하기 때문에... 우선 realtime으로 해 놓고 MVP 발표 이후 웹소켓 활용하여 리팩토링 작업해볼까 하는 새 계획이 생겼다.본래 웹소켓을 도전

초반 기획 단계 회의 시간에 한 번 supabase.ts 의 Database의 public의 Table의 message... 이런 식으로 안 쓰고 저렇게 Tables<'messages'>만 써도 된다고 리더님이 설명 해주셨었다. 좋은 정보.types 폴더 안에 넣

첫 모의 기술 면접채팅 목록 페이지 모바일 ui 작업채팅 페이지 모바일 ui 작업기술 면접 공부채팅 페이지 ui 작업 초안 완성채팅 목록, 채팅 페이지 데스크탑 작업채팅 기능 조금이라도 시작실제 기술 면접처럼 컬쳐핏, 협업, 기술 질문들로 구성.컬쳐핏, 협업 질문은 잘

메인페이지, 탭메뉴 컴포넌트 보다 더 세분화, 재사용성 고려헤더, 탭메뉴 ui 수정이번 프로젝트 첫 PR, 첫 mergechat 페이지 (채팅 목록) 스켈레톤 작성chat 페이지 구현 시 레이아웃 구성 관련 고민, 레퍼런스 서치모바일에서는 chat(목록)과 chat(i

-4094 에러 (Internal Server Error)Next.js 를 사용하기 시작하고 나를 계속 괴롭힌 에러.간단한 CSS 수정을 하든 뭘 하든 뭘 안 하든 짧게는 몇십초 길게는 몇분 내에 꼭 저 에러가 뜨면서 랜더링이 멈추고, yarn dev를

프로젝트 세팅디자이너 님과 미팅맡은 파트의 항목 별 진행 및 마감일 계획 세우기개발 시작메인 페이지 컴포넌트 파일 분리 및 UI 구현 시작팀원 분들이 해결해주신 트러블 슈팅인데 나도 새롭게 배운 부분.git clone 받은 다음 코딩 시작하기 전에 팀장님이 알려주신 세

오늘 한 일 (같이) 디자이너님과 회의 와이어프레임 피드백 및 플로우 정리 각자 의사코드 공유, 다같이 회의 거쳐서 수정 DB 완성 채팅 구현 플로우 홈 의사코드 1. 배너 trips 테이블에서 get trips.tripmaster || trips.tripm

와이어프레임 피드백세부 기능, 로직, 플로우 정리디자이너 미팅채팅 생성:chat 테이블에 컬럼 생성채팅 목록:chat 테이블 데이터 가져옴상태에 저장, 목록 렌더링이름 클릭하면 chat/id 로 이동메시지 전송:해당 chat과 연결된 messages 리스트를 상태에 저

우리는 Figma에서 작업하다가 좀 더 구조 그리기 편한 걸 써보자! 해서 Figjam으로 넘어가게 됐다. 진작 그럴 걸.피그잼으로 오니까 이렇게 화살표 그리는 것도 간편하고, 스탬프를 활용해 누가 어떤 파트를 작업할지 나누어 놓는 것도 쉽게 가능해졌다.컴포넌트 구조:

홈 페이지에서 생성하기 누름 -> 기본 정보 입력 모달 -> 모달의 생성하기 누르면 지도 불러오는 페이지로 이동위와 같은 과정에서, 지도 불러오는 페이지로 이동했는데 지도가 로드 되지 않는 문제가 발생했다.새로고침을 하면 작동이 되는데, 페이지에서 페이지로 넘어갈 때

방법 정리..

하루종일 회의했던 날...낮밤이 바뀌어서 두 시간 정도 자고 왔는데, 몽롱한 상태로 하루종일 계속 소통하니까 예쁘고 부드럽게 말하는 걸 신경쓰지 못 한 것 같다...내일부터는 다시 좋은 팀원이 되도록 노력해보자..!!내일의 계획지금 맡은 파트 빨리 끝내기빨리 끝내서 다