[TIL] 22.01.03. 채팅기능 완료

 

오늘 채팅을 연결하면서 수많은 오류가 생겼다. 

우선 방을 들어갔다가 다른 방에 들어갈때 disconnect를 하면 아예 소켓 연결이 안되는 

에러가 발생하였다. 

 

  const RoomId = useParams().Room;

  const ChatRoomClickHandler = () => {
    if (RoomId !== Room) {
      chatSocket.disconnect();
    }
    Room.push(roomId);
  }

해서 유저 이름을 클릭할 때 disconnect를 해주고 

다시 방에 들어가서 connect와 방연결을 다시 해주는 방법을 선택님이 말해주어서

적용하게 되었다. 

 

저걸 해결하고 나니까 이제 스크롤바를 아래로 자동으로 내려가게 하는 방법에 대해서 고민해서 

구글링해서 찾아보았는데 

계속 scrollIntoView에 대한 오류가 나기 시작했다 

그래서 아래와 같이 messageEndRef가 null이 아닐 때 실행되게 바꾸어 주니 에러가 해결되었다 . 

  const messagesEndRef = useRef(null);


  const scrollToBottom = () => {
    if(messagesEndRef && messagesEndRef.current){
      messagesEndRef.current.scrollIntoView({
        behavior: "smooth",});
    }
  };

  useEffect(scrollToBottom, [chat, Room, location]);

 

오늘 다시한번 클린코딩과 className 짓는 부분에 대해서 다시 생각해 보게 되었다.

처음부터 잘 하면 좋았을껄 이라는 생각이 들었지만 

이것을 기반으로 다음번에는 조금더 클린하고 아름다운 코딩을 쓸 수 있겠지

다시한번 다짐하는 시간이 되었다.