갑자기 바빠져서 작성하지 못해 밀린 내용이 많다.. 기억이 흐려지기 전에 얼른 쓰자.. 먼저 해결해야할 내용은 채팅 내역을 가져오는 동시에, 메시지를 보낸 유저의 정보를 같이 가져올 필요가 있었다. 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...

사실 빼먹은 것들은 정리한다고 보는게 더 맞겠다. 데이터 베이스 테이블을 구성해보았다. 물론 중간 중간 변경 점이 생기겠지만, 일단 이렇게 구성해보았다. 다음으로는 개발 일정을 짜보았다. 이후 캘린더 연동을 완료했고, 좁은 공간에 어떻게 표시할 수 있을지 생각해봐야겠다.