파이널 프로젝트가 마무리되어 가는 와중에 유저피드백을 받은 폼을 살펴보던 도중 타인의 메시지까지 다보인다는 문제점을 받았고, 해당 로직을 수정 처음에는 모든 채팅방 및 메시지를 불러오고, 거기서 속한 메시지를 선별하는 식으로 가져오다보니 본인 것 외에 타인의 메시지까지 모두 가져와서 타인의 메시지까지 보인다는 점과 더불어 랜더링시 페이지 요청이 늘어나는 단점까지 있었는데, 위의 코드와 같이 요청시에 로그인한 유저가 속한 채팅방과 메시지만 조회를 해서 가져오게 수정을 하였고, 그 결과 본인의 메시지만 가져오게 했고, 네트워크 요청 또한 눈에 띄게 줄었다. 예를들어 채팅을 위해 왼쪽 이미지를 클릭을 하면 오른쪽 이미지가 열리게 되는데 그럴 시에 기존 400개씩 되던 네트워크 요청이 130정도로 확 줄었다.

채팅방 입장하면 헤더부분에 물품이미지가 보이는데, 그 부분에 네비를 줘서 클릭을하면 해당 상품 페이지로 이동하도록 구현, 그런데 이게 다른 컴포넌트 페이지에서는 잘 이동이 되는데, 같은 디테일 페이지 내에서는 쿼리가 바뀌면서 리렌더링 되지만 디테일 페이지는 변하지 않는 에러가 발생. 물품 이미지 부분을 눌렀는데 쿼리부분만 바뀌고 디테일 페이지는 수정 안되는 모습을 볼 수 있다. 리액트 라우터 돔 v.5.x에서 이런 에러가 많이 발생하고, v.6 버전대로 업데이트를 하면 해결 이 된다고 한다 그러나, package.json에 보이는 버전은 v.6.xx 번대 버전으로 해당 되는 사항이 없었고, 라우터 설정시 꼬여 있으면 그렇다고해서, 확인을 하면서 , 최상단 루트에 index.tsx 브라우저 라우터 를 옮겨..

초기 채팅 기능 개발시 컴포넌트 분리 한 채로 기능 구현 하기에는 어렵다는 판단하에 한 컴포넌트에 몰아서 기능을 구현을 하였더니 아래와 같이 537줄 정도 되는 코드길이의 파일이 만들어졌고, 그와 더불어 초기에 채팅내역을 불러오는 코드 부분도 한 파일에 몰아 넣어서 330줄 정도 되는 코드 양이었는데 그 코드들을 왼쪽에 market이라는 폴더에 기능별로 컴포넌트화 시켰고, 그 결과 원래 길었던 코드를 가 파일들은 아래와 같은 이미지를 얻게 되었다. 컴포넌트를 리팩토링 하는 과정에서 웃지 못할 해프닝이 생기기도 했는데 다른 컴포넌트에 컴포넌트를 활용하려면 이런식으로 접근을 해야하는데 컴포넌트 분리 전에 있던 함수 {ChatHeaderMessages()}이걸 바꿀 생각은 안하고 분리된 컴포넌트에서 R..

윈도우 환경에서는 채팅을 할 시 끝 단어가 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에 여러개의 기능들이 혼재된 모습, 분리가 ..