[✍️ Dev Log] 이우성 / 2021-05-24

### 오늘은 어떻게 프로젝트에 기여했나요?

- #176 Chat Item CSS 추가 작업
- #182 Socket 연결해서 실시간 채팅 기능 구현
- #188 채팅창 스크롤바 추가 및 Chat Zone CSS 수정
- #189 Chat Box 멘션 기능 추가
- #191 Socket 채팅 기록이 저장 안되는 에러 핸들링
- #192 채팅을 전송하면 해당 값 undefined 오류




### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

오늘 오전까지만 해도 socket.io를 통해 실시간으로 채팅을 보냈지만 저장은 되지 않았다. 이유를 찾고 있던 도중 점심먹고 팀원들과 같이 봤는데 해결이 되었다!!

```js
// TODO: 채팅기록을 담아줄 바구니
const [chatBucket, setChatBucket] = useState([]);

//생략...

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을 쓸 때 어려웠던 점의 전부이다. 나머지는 공식문서에 잘 나와있어서 잘 따라하니 되었다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] 채팅에서 채널 추가 기능 구현하기