채팅 컴포넌트는 더 이상 손 대지 않아도 될 줄 알았다.. 하지만, 비즈니스 로직에 크나큰 위험성이 있었다. useEffect() 때문에 유료 결제까지 하게 되었으니 앞으로 정말 조심히 쓰자. 문제가 된 부분은 아래 부분이다. 정확히는 useEffect() 내부 동작이다. 채팅 기능의 핵심적인 부분인데, 테이블에 저장된 채팅 내역을 불러오는 역할을...

갑자기 바빠져서 작성하지 못해 밀린 내용이 많다.. 기억이 흐려지기 전에 얼른 쓰자.. 먼저 해결해야할 내용은 채팅 내역을 가져오는 동시에, 메시지를 보낸 유저의 정보를 같이 가져올 필요가 있었다. const getAllMessages = async () => { const { data, error } = await supabase ...

지금 하는 프로젝트에서 fullcalender 를 이용하고 있다. 엄청난 호환성을 자랑하며 기능도 다양한데, 기본 디자인을 바꾸려면 별도의 css 파일을 작성해 css 속성 오버라이딩이 필요했다. <div class="class1 class2 class3"> TEST </div> 이렇게 다양한 클래스 이름을 가지고 있었지만, ...

Supabase 에서 Realtime 을 통해, DB에 변화가 생기면 이를 감지해 원하는 동작을 수행하도록 만드는 방법을 알았다. 따라서, 몇 가지 상태를 추가해보고 기능을 구현해보았다. 내가 직접 구현한 부분에서 문제가 있던 부분만 살펴보자. type MessageRow = Tables<"Messages">; type MessageI...

오늘은 const handleSubmit = async ( evt: FormEvent<HTMLFormElement>, text: string | undefined ) => { evt.preventDefault(); const { data, error } = await supabase .from("Messages"...

채팅기능 구현을 위해, Supabase 의 Realtime 을 사용하기로 했다. 일단 데이터 베이스 구조는 위와 같다. 하지만, 채팅방 인원 수를 별도로 테이블에서 관리하는 건 좋지 않은 생각 같다. 실시간으로 연결되어있는 유저의 수를 감지해서 계속 DB 에 값을 바꾼다?? 얼마나 비효율적인가! 이를 해결해보자. Realtime 의 특징 ...

캘린더에서 일정을 표시하는 방법을 수정했다. 일정이 하나라도 존재하는 경우, 일단 더 보기형태로 만들었다. 하지만 더 보기가 있는 것 보다, 아예 일정에 색을 넣어서 표현하는 게 좋아보인다. 그 중간에, 와이어프레임의 break point 를 지정하고 메인 페이지의 전체 컨테이너 크기를 지정했다. 모바일 기기를 구분하는 지점으로는 max 76...