문제의 그 사진(?) 24 시간 만에 사용량이 폭발적이었다. 배포를 하긴 했지만, 실제 이용자는 아무도 없었다. 도대체 어느 바가지에서 이렇게 새는 걸까? 문제 자체는 vercel 을 통해 배포한 링크들이었다. 현재 팀 프로젝트 레포지토리를 제외하고, 무료 요금제를 사용할 때 배포 테스트를 하느라 개인 레포지토리로 fork 해서 만든 배포...

채팅 컴포넌트는 더 이상 손 대지 않아도 될 줄 알았다.. 하지만, 비즈니스 로직에 크나큰 위험성이 있었다. 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 의 특징 ...