🔔 14일차
오늘 점심먹고 바로 socket.io 구현을 성공하였다! 최소 이틀은 걸릴 줄 알았는데 하루만에 되서 너무 신이 났다!
하지만 이제 시작일 뿐!! 디테일한 CSS작업을 어서 마무리 하고, socket을 성공시키니까 이제는 방 추가기능과 이미지 추가기능 그리고 디엠 기능까지 다 해보고 싶다!!!
💪 오늘은 어떻게 프로젝트에 기여했나요?
socket.io를 이용해서 실시간 채팅기능을 구현했다! 오른쪽 모서리에 있는 줌을 이제 봤네..
그 다음으로는 스크롤을 적용시켰다.
마지막으로는 라이브러리를 이용해서 채팅 멘션기능을 만들었다. 서버에서 현재 채팅에 있는 멤버들의 정보까지 다 보내준다고 하여 멘션 기능까지 생각해서 넣어보았다!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
오늘 오전까지만 해도 socket.io를 통해 실시간으로 채팅을 보냈지만 저장은 되지 않았다. 이유를 찾고 있던 도중 점심먹고 팀원들과 같이 봤는데 해결이 되었다!!
// TODO: 채팅기록을 담아줄 바구니
const [chatBucket, setChatBucket] = useState<ChatDataType[]>([]);
//생략...
useEffect(() => {
socket.on("sendMessage",
({ id, text, createdAt, updatedAt, writer }: ChatDataType) => {
setChatBucket([
...chatBucket,{ id, text, createdAt, updatedAt, writer },
]);
}
);
}, [chatBucket]);
해결을 할 수 있었던 이유는 바로 useEffect에 트리거로 chatBucket을 넣어주었기 때문이다.
처음에는 트리거를 빈 배열로 두고 했었는데, chatBucket을 감지하지 못하여 서버에서 받아와도 저장을 하지 못한 것이였다.
그 다음으로는 채팅을 하기 위해 꼭 필요한 textArea 박스인데, 여기에 mention 기능을 덮어씌울 때 타입때문에 고생한 것 같다.
OnChangeHandlerFunc 이 타입을 쓴 것이 mention을 쓸 때 어려웠던 점의 전부이다. 나머지는 공식문서에 잘 나와있어서 잘 따라하니 되었다.
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
채팅에서 채널 추가 기능 구현하기