전체 글143 2024-01-18 본 캠프 75일차 / 94일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(3) 2024-01-18 본 캠프 75일차 / 94일차 TIL (react-zoom-pan-pinch 활용 영상공유 레이아웃 만들기(3) 주요 진행사항 - react-zoom-pan-pinch 활용 레이아웃 만들기 (이전) react-dnd 활용 영상공유 레이아웃 만들기 (2) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기(2) - grid 변경 (이전) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react- audtjqxx.tistory.com 영상의 .. 2024. 1. 18. 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기(2) - grid 변경 (이전) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(1) 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기 react-dnd 활용 영상공유 레이아웃만들기 유저가 직접 영상공유 audtjqxx.tistory.com r.. 2024. 1. 18. 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기 react-dnd 활용 영상공유 레이아웃만들기 유저가 직접 영상공유 레이아웃을 커스텀하기 위해 다음과 같은 기술이 필요했다. 드래그하여 일정한 위치에 가이드 라인이 나오고 해당 위치로 레이아웃이 생성되는 것이다. 이런 기능을 구현하기 위해서 라이브러리를 사용하였으며, react-dnd와 react-beautiful-dnd 두개의 라이브러리를 고민하였다. 레이아웃을 설정하고 그리드의 위치를 조절해야하기 때문에 좀더 복잡한 구현이 가능하고 유연한 react-dnd를 선택하였다. react-dnd 설치 명령어 yarn add react-d.. 2024. 1. 17. 2024-01-15 본 캠프 72일차 / 91일차 TIL (realtime chat) 2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat) 주요 진행사항 - real time chat 구성 supabase realtime 이용 chat 만들기 (2) 이전 내용 참고 2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat(1)) 2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat) 주요 진행사항 - real time chat 구성 supabase realtime 이용 chat 만들기 (1) 1. supabase dm 테이블 구성 dm_channels: 모든 dm 채널을 관리하는 table, supabase realtime 적 audtjqxx.tistory.com 위 로직을 통해 변경된 state에 .. 2024. 1. 16. 2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat(1)) 2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat) 주요 진행사항 - real time chat 구성 supabase realtime 이용 chat 만들기 (1) 1. supabase dm 테이블 구성 dm_channels: 모든 dm 채널을 관리하는 table, supabase realtime 적용, space 단위로 filter를 적용시키기 위해 space_id 속성을 가지고 있음. dm_messages: 모든 dm 메시지 정보를 담는 테이블, dm_id와 dm_channels가 매칭되는 항목으로 각 dm 채널마다 메시지를 가져옴. 2. 나에게 오는 모든 메시지 받기 채널의 모든 메시지 구독 useEffect(() => { const dmChannel = supaba.. 2024. 1. 15. 2024-01-11 본 캠프 70일차 / 89일차 TIL (supabase rpc 함수 및 realtime table) 2024-01-11 본 캠프 70일차 / 89일차 TIL (supabase rpc 함수 및 realtime table) 주요 진행사항 : - supabase rpc 함수 제작 - supabase realtime table 검증 예정사항 - realtime chat 테스트 supabase rpc 함수 제작 dm을 구현하기 위해서 api 호출을 통해 supabase 테이블에 접근해야한다. 유저당 스페이스 별 dm 채널을 가져오기 위해서 1차로 user가 접속한 space를 확인하고 2차로 해당 space 내부의 dm 채널 중에서 나의 dm채널만을 확인해야하는 번거로움이 있었다. 이러한 문제는 api 호출을 이후 클라이언트에서의 로직으로 해당 유저의 dm채널을 가져와야하는 문제가 발생되었다. 나는 애초에 ap.. 2024. 1. 12. 이전 1 2 3 4 5 6 ··· 24 다음
