3주차 미션: react-messanger

CEOS의 세번째 스터디는 무려 타입스크립트로 채팅방 구현하기..ㅎ

1주차 바닐라자바스크립트 -> 2주차 리액트 -> 3주차 리액트 with 타입스크립트...?

진짜 진도가 급발진이 따로 없다... 죽을 맛이다.

 

먼저 이번 주차의 미션 목표는 다음과 같다.

 

 

여기서 내가 죽을 맛이었던 포인트는... 바로 redux, context API 등 상태관리를 하는 것이 좋다는 것이었다.

왜냐면 이번에는 밑의 화면과 같이 채팅하는 사람이 한명에서 끝나지만, 이어지는 다음 스터디는 채팅하는 유저가 추가된다고...ㅎ

그래서 이번 프로젝트에서 상태관리 라이브러리를 써봐야 편하다는 것이었다.

 

밑은 내가 구현한 채팅방 화면이다... 무려 셀프 채팅이 가능하다..

찌부된 커비로 말을 하면 아이스커비에서 해당 내용이 보이는 그런,, 채팅방이다.

 

어려웠던 점

1. 

타입스크립트가 시키는 대로 타입을 다 선언해줬는데 왜 number을 number라고 인식하지 못하는 것이죠...?

1 2 3 이게 number 아니면 뭐란 말이죠....? 타입을 일단 싹 다 any로 선언해놨는데 자괴감이 오진다...

이놈의 타입 선언 때문에 컴포넌트 호출도 못하고 끙끙 앓았다...

 

2.

context API, redux... 다 처참히 사용 실패를 해버림,,, 저것들 공부만 한 여섯시간은 한 것 같다 ㅎ

근데도 모르겠다... 그래서 예전 기수 레포를 들어가서 전역상태관리를 다들 어떻게했나보니 다들 recoil을 쓰더라!!!!

그래서 recoil이 쉽나? 하고 바로 도전해버렸다. recoil 관련 구글링을 하다 한줄기의 빛같은 포스팅을 발견하고 어케 뚱땅뚱땅 하니까 되더라...! 내가 recoil을 쓰면서 공부했던 내용은 https://55wldms.tistory.com/15에 정리해놓았다.

 

3. 채팅 치면 스크롤바 하단으로 이동

https://minhyeong-jang.github.io/2020/01/17/js-scroll-bottom 를 참고했다.

const containerRef = useRef<HTMLDivElement>(null);

  const goToBottom = () => {
    containerRef.current!.scrollTop = containerRef.current!.scrollHeight;
  };

  useEffect(() => {
    goToBottom();
  }, [chatting]);
  
  ...
  
  <Container ref={containerRef}>
  
  ...
  
  </Container>

 

containerRef를 선언해주고 어떤 요소를 가리키는지 알려주기 위해 밑의 Container에 ref 속성을 추가해주면 

채팅을 칠 때마다 useEffect가 감지해서 스크롤을 밑으로 내려준다!!!!!

 

나는 이 때 마지막의 Container 컴포넌트에 ref 속성을 추가해주는 걸 까먹어서 한참 고생했다..

 

이렇게 완성한 배포링크는 다음과 같다!

https://react-messanger-jieun.vercel.app/

React App