윈도우 환경에서는 채팅을 할 시 끝 단어가 2번 반복되는 현상이 없었는데 맥 환경에서는 채팅을 할 시 끝 단어가 간헐적으로 2번 반복되는 현상이 나타났다. // 메시지 전송 핸들러 const KeyPresshandler = async (event: React.KeyboardEvent) => { if (event.key === 'Enter' && inputValue.trim()) { if (event.nativeEvent.isComposing === false) { event.preventDefault(); // 폼 제출 방지 sendDirectMessage({ content: inputValue, author_id: LoginPersonal, chat_id: chatId, item_id: productI..

기존에 한 useEffect에 몰아 넣었던 기능들을 하나의 기능마다 분리해서 리팩토링 진행. 위에서부터 각 채팅방 리스트/채팅방메시지/채팅방 메시지 카운트 디펜더시도 다시 만들어 넣어줬더니 굴러는 가는데 아직 가야할 길이 멀다 APP에 몰아 넣은 기능들 코드를 더 줄 일 수 있으면 줄이고, 컴포넌트 따로 빼서 export 할 수 있으면 그렇게 리팩토링 진행할 계획이다 import { useEffect, useState } from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; import { useRecoilState } from 'recoil'; import { ThemeProvider } from 'styled-com..

스파게티 코드는 겉으로 보기에는 작동 자체는 제대로 하거나 하는 것 처럼 보인다. 하지만 해당 코드는 추후 유지보수가 매우 어려워진다. 코드의 작동 방식을 변경하거나 버그를 찾거나 개선하는 등 코드를 수정하는 모든 작업에 방해가 된다. 특히 이러한 코드는 프로그래밍 초보자들이 많이 작성한다 보통 계획없이 바로 코딩을 시작하거나 요구사항이 원래 기획한 범위를 크게 벗어날 때 혹은 프로그래머의알고리즘 구현 실력이 지나치게 떨어질 때 주로 출현한다 -나무위키- 팀프로젝트, 명확한 초기 플랜 없이 바로 시작했고, 요구사항이 회의를 통해 원래 기획에서 벗어나서 귓속말이었지만 채팅이 되었고, 알고리즘 구현 실력이 지나치게 떨어지는 ~ 3관왕 달성~ 하나의 useEffect에 여러개의 기능들이 혼재된 모습, 분리가 ..

알람기능을 수정해서 구현하고 깃 pr 해놨더니 어? 데이터베이스를 빼먹었네? 새메시지를 보내면 카운팅이 되고, 위의 책이미지를 클릭을 하면 카운팅이 초기화되고 오른쪽 이미지가 뜨면 새 메시지가 와도 카운팅은 안되고 닉네임 옆에 new가 뜨도록 구현 (책 이미지를 클릭하면 열리면서 new가 날라가서 수정중) 하였으나, 데이터베이스 테이블 만들어서 세팅 하는 걸 잊어먹고 깃 pr을 해버려서 revert로 롤백했다. f5를 누르면 알림 초기화 되버리는 문제가 발생 ㅋㅋ 왜? 알림 기능 구현하면서 초기화 많이 했었는데 그때 생각을 못 한 걸까... 기존 코드 최대한 쓸 수 있도록 table 만들어 봐야겠다.

알림 기능을 추가했는데, 상대방이 새로운 메시지를 보내면 오른쪽 코드 supabase realtime기능을 이용해 실시간으로 구독을 하고 왼쪽 이미지 아래에 숫자가 보이는 것처럼 하나의 메시지마다 카운팅+1이 되도록 설정을 했다. 그리고 위의 코드들을 추가해서 문의하기/중고거래 클릭시 카운팅이 초기화되도록 했고 모달이 열려있는 상태에서는 카운팅되지 않도록 세팅을 해놨다. 이것 외에 새로운 메시지가 도착하면 1@1이라는 닉네임 우측에 new라는 알림이 오도록 했는데 기존 채팅에 new가 붙은 다음 새로운 메시지가 출력되는 현상 발견되어서 수정 중에 있다.

채팅은 챗방에 누가 있는지랑, 챗방 id 정도만 있으면, 내가 쓴글만 author_id로 줘서 그걸 현재 로그인한 유저와 비교해서 챗창에 오른쪽으로 뜨도록 하는게 채팅인데, 애매하게 구현하고 있었다. 그래서 로직도 어거지로 구현 중이었고, 결국 내부로직이 엉망이어서 다시 엎고, 방금 설명한 채팅형식으로 수정중이다. 이전 내용. if (newChatData) { const { error } = await supabase.from('chats_users').insert([ { chat_id: newChatData.id, user_id: userId, item_id: productId }, { chat_id: newChatData.id, user_id: otherUserId, item_id: productId..