[TIL] 16주차 화요일. 팀 프로젝트 - 채팅 기능 supabase realtime 사용해 구현. 이슈 발생

Realtime 사용하여 chat-room 생성

useEffect(() => {
        const channel = supabase
            .channel('chat-room')
            .on(
                'postgres_changes',
                { event: 'INSERT', schema: 'public', table: 'messages' },
                payload => {
                    const newMessage = payload.new as Message & {
                        buddy: {
                            buddy_profile_pic: string;
                            buddy_nickname: string;
                        };
                    };
                    if (newMessage.message_trip_id === id) {
                        setMessages(prevMessages => [
                            ...prevMessages,
                            newMessage,
                        ]);
                    }
                },
            )
            .subscribe();

        return () => {
            channel.unsubscribe();
        };
    }, [id]);

    useEffect(() => {
        const fetchMessages = async () => {
            const { data, error } = await supabase
                .from('messages')
                .select(
                    `
                    *,
                    buddy:message_sender_id (
                        buddy_profile_pic,
                        buddy_nickname
                    )
                `,
                )
                .eq('message_trip_id', id)
                .order('message_created_at', { ascending: true });

            if (error) {
                console.error('Error fetching messages:', error);
            } else {
                setMessages(data);
            }
        };

        fetchMessages();
    }, [id]);

리얼타임 써본 후기

어렵게 생각했는데 생각했던 것보다 간결하다!

작업하면서..

이슈 (1)

현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저 프로필 사진은 로드되지 않고 있다.

이슈 (2)

buddies, trips, contract, messages 4개의 테이블을 잘 엮어서 데이터를 가져와야 한다. 이 부분이 생각보다 오래 걸리고 있다.
그동안 나는 동시에 한 개의, 혹은 두 개의 테이블만 사용했었다. 내일은 여러 개의 테이블의 데이터를 잘 엮어서 사용하는 방법에 대해서 찾아보고 작업에 들어가는 게 좋을 것 같다! 의사코드도 먼저 작성해보고.

이슈 해결 계획

(1) 방법 구글링 (GPT의 도움은 받지 말아보자!)
(2) 로직 정리해보기 -> 여러 테이블 엮어서 사용하는 법 서치 -> 의사코드 작성 및 기록 -> 실제 코딩 작업