15. 채팅방에서 메세지 불러오기, 메세지 보내기 화면

https://www.youtube.com/watch?v=cHziFZ7Q58Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=14

를 보며 하고있다.

 

그런데 사실 이번편은 화면 어떻게 작동하나만 확인하고, 내가 알아서 만든거라 동영상 내용이랑은 많이 다를 수 있음.

 

한거는 먼저 messageStore를 만든다. 챗 하나를 클릭하면, 지난시간에 만든 메세지 패치 api를 사용해서 채팅방 하나에있는 메세지들을 모두 불러온다. 그리고 message State를 패치해온걸로 바꿔줌. 그리고 chatBox 컴포넌트에서 해당 메세지를 표시해준다.

 

메세지 보내기는 역시 messageStore와 함께 쓰는데, 메세지를 전송하면 messageStore에  addMessage라는 함수를 만들어놨는데, 이는 message State에 방금 입력한 메세지를 하나 추가해주는 거다. 그리고 chatBos 컴포넌트에는 useEffect[messages]가 적용되어 있어서 화면이 바로 바뀐다. optimistic update인 셈이다. 그리고, 지난시간에 만든 sendAPI도 불러서 메세지를 보낸다.

 

그런데 sendAPI에 보내는 형식과 화면에서 표시하는 메세지 Schema가 다르다. 통일해주던지 해야겠다.

 

UI는 여전히 개판이고, 코드도 지저분하지만 잘 작동된다. 리팩토링은 다 하고나서 해야겠다.

드디어 다음시간부터 socket이랑 연결이다. 프론트를 내맘대로해서 얼마나 뜯어고쳐야할지는 모르겠지만... 일단 고고!

 

github : https://github.com/Wunhyeon/ChatApp-MERNStack/tree/15.Message-front

GitHub - Wunhyeon/ChatApp-MERNStack