맡은 부분 공동 컴포넌트 - 버튼, 카테고리 디테일페이지 - 상품상세,리뷰, 1:1 문의 채팅 마이페이지 - 보유한 쿠폰

• 트러블 슈팅

1:1채팅에서 한명이 채팅방을 떠난후 다시 들어왔을때 소켓으로 메세지 상대방에게는 넘어가서 화면에 반영되는데 본인은 다시 들어온 후 주고받는 메세지가 useState에 저장되지 않고 화면에도 반영되지 않았습니다.

소켓 메세지가 상대방에게 잘 전달되고 나에게도 subscribe로 문제없이 들어온 메세지 내용을 콘솔에서 확인하고 서버보다 프론트 문제일거라고 추측 후 보내고 받은 메세지를 저장하는 state를 찍어봤는데 나갔다가 다시 들어오면 저장이 되지않고 계속 메세지를 보내도 메세지 배열은 빈값으로 확인되었습니다.

소켓 신호는 잘 오고가고 불변성을 못지킨것도 아니었는데 state에 저장이 제대로 안된다는건 어딘가 상태관리가 꼬였을꺼라고 추측 했습니다. 거꾸로 찾아 올라가다보니 채팅을 연결할 소켓 객체 생성 함수가 ChatDetail 함수 밖에 있는것을 발견했습니다. 그래서 함수밖에 있던 stompClient를 ChatDetail 함수 안에 useState에 담아 생성했더니 채팅을 보내는 본인도 나갔다가 들어와도 보낸 메세지가 화면에 반영되었습니다.

const [stompClient] = useState(
  new Client({
    brokerURL: `${import.meta.env.VITE_API_CHAT_URL}/chat`,
  }),
);
const [stompClient] = useState(
  new Client({
    brokerURL: `${import.meta.env.VITE_API_CHAT_URL}/chat`,
  }),
);