myinfo7091 님의 블로그

이중 탭으로 구성된 채팅방 UI가 필요하다.현재 구조에서 채팅방을 두 개의 탭으로 나누고, 각 탭에서 서로 다른 콘텐츠(채팅 메시지 + 입력창 / 채팅방 갤러리)를 표시하려면 탭 컴포넌트를 별도로 분리하는 것이 유지보수성과 재사용성을 높이는 데 유리하다.탭 컴포넌트 분리하기탭의 전환을 관리하는 상태와 UI를 캡슐화한 Tabs 컴포넌트를 생성하자. 각 탭의 콘텐츠는 props.children 또는 특정 컴포넌트를 렌더링하도록 설계할 수 있다.ChatRoomPage 컴포넌트에서는 탭 컴포넌트를 사용해 두 개의 탭을 표시할 것이다.탭 1: 채팅 메시지, 채팅 입력창탭 2: 갤러리Tabs 컴포넌트 만들기import { useState } from "react";interface TabProps { labels..

채팅방 데이터 테이블 스키마 수정chat_roomsroom_id(PK) user_id(FK) room_title room_subtitle room_description room_thumbnail_url room_hashtags isActive created_attypeuuiduuid(users table)texttexttexttexttext[]booltimestampzchat_members (복합 고유 키)member_id(PK) room_id(PK) isAdmin isActivetypeuuid(usres table)uuid(chat_rooms table)boolbool복합 고유 키 설정고민 과정: member_id와 room_id 의 조합이 고유해야 하므로, 중복 데이터를 방지하기 위한 방법이 필요했다..

퍼널 패턴이란?퍼널 패턴은 단계별로 사용자 데이터를 입력받고 처리하는 과정을 설계하는 방법이다. 퍼널이라는 단어에서 유추할 수 있듯이, 여러 단계를 거치며 데이터를 점진적으로 모으고 필터링한다. 특히, 사용자 경험이 중요한 멀티스텝 폼이나 단계별 입력이 필요한 서비스(예: 회원가입, 예약 시스템)에서 유용하다.퍼널 패턴의 주요 특징단계적 데이터 관리:여러 단계를 나누어 데이터를 입력받고 처리한다.각 단계에서 입력된 데이터는 별도로 저장되고, 최종적으로 전체 데이터를 하나로 합친다.사용자 경험 최적화:한 번에 모든 데이터를 입력받기보다 단계를 나눠 부담을 줄인다.단계별로 사용자의 진행 상황을 보여줄 수 있다.유지보수성 향상:각 단계를 컴포넌트로 분리하여 독립적으로 관리 가능하다.비즈니스 로직과 UI를 명확..

Supabase RealtimeSupabase Realtime은 클라이언트와 데이터베이스 간에 실시간 동기화를 지원합니다. 이를 통해 사용자는 데이터가 변경된 부분을 즉시 반영할 수 있습니다. Realtime에는 세 가지 주요 작동 방식이 있습니다. Broadcast클라이언트 간에 메시지를 주고받는 기본 방식입니다.데이터베이스와 관계없이 클라이언트 간에 실시간 이벤트를 공유할 수 있습니다.채팅에서 실시간으로 메시지를 전송, 다수의 사용자에게 동시에 알림 보내기 가능// 채널이 특정 이벤트를 구독하도록 활성화하기// room/topic을 구독합니다. 채널은 'realtime'을 제외한 어떤 이름이든 사용 가능!const channelA = supabase.channel('room-1')// 수신한 메시지를..

튜터님 피드백- 룩북에 대한 게시글을 작성하면서 사용자가 직접 상품에 대한 구매처까지 등록하는 것은 번거로움을 유발할 수 있을 듯 합니다. - 데이터가 필요하다면 크롤링을 시도해도 좋지만 기술적으로 구현이 어려울 수 있습니다. - 오픈 api를 활용한 룩북 가상 시착 시스템 커뮤니티로서의 속성을 강화해서 유저 중심의 기능이 추가되면 좋을 것 같습니다.   [Next.js] Puppeteer로 CSR 페이지 크롤링하기Chrome Headless 모드로 CSR 페이지 크롤링하기🤖velog.io Puppeteer란? Puppeteer는 Chrome DevTools 프로토콜을 이용해 Chrome/Chromium을 제어할 수 있는 Node.js 라이브러리로, 기본적으로 헤드리스 모드(백그라운드에서 UI 없이 브..

오전 피드백- 검색 기능은 query parameter를 활용하기- 홈 페이지에서 너무 많은 기능을 처리하지 않도록 하기 위해 따로 페이지를 생성하는 방향 고려하기- npm 라이브러리(예시: 웹 에디터) 선정은 패키지 비교를 활용해서 선정하기- 개발자는 이전에 구현해봤던 기능 반, 해보지 않은 기능 반 정도를 도전해보기- 수정 사항은 회의를 거친 후 확정이 되었을때 진행하기 - 회의를 거치지 않고 수정한 기능/디자인은 갈등으로 이어질 수 있으므로 꼭 사전에 팀원들과 공유하기오후 피드백- 기능 개발 방식에 대한 논의- 필터링 구현 방식 2가지1. supabase query 날리기2. 모든 데이터 받아와서 필터링 - query parameter 구현할때 검색 페이지가 있는 것이 선호 마이 페이지-> pral..