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

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

- #234 Chat socket을 통해 서버에게 전해주는 데이터를 유틸함수로 만들기
- #236 채팅 image upload 기능 구현하기
- #239 채팅 마운트 시 빈 문자열 데이터 저장 에러 해결
- #240 chat 실시간으로 저장되지 않는 에러 해결



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


이게 무슨 일인가... 빈 문자열 형태로 계속 채팅이 추가가 되고 있었다.

원인은 이미지 업로드를 `useEffect`로 하고 있어서 값이 없어도 `emit`이 되고 있었던 것이다. 그래서 서버에서 데이터를 받아오는 socket `on`에서 빈문자열일때는 값이 저장되지 않도록 해보았다.

그래도 값은 계속 추가가 되었다. 어차피 `emit`을 해서 데이터에 이미 저장되는데 오는 데이터를 막으면 무슨 소용이겠는가...

1시간 가까이 고민을 한 끝에 해결을 할 수 가 있었다!!!!!!!!

`useEffect`에서 애초에 빈 값이면 데이터를 보내지 않으면 되는 것이였다!! 이게 해결하고 나니 정말 쉬운 문제였는데, 막상 에러가 터지고 어디서부터 손을 봐줘야할지 막막할 때는 바로 찾기 힘든 것 같다..

그래도 천천히 잘 생각해 본 끝에 문제를 해결할 수 있어서 기분이 정말 좋았다 ㅠㅠㅠ

```js
useEffect(() => {
if (chatUploadImage) {
//변수 생략..

setChatBucket([...chatBucket, newChat]);
socket?.emit("sendImage", getImageData);
}
}, [chatUploadImage]);
```

이런식으로 upload할 image의 값이 있을 때만 `emit`을 보내주면 되는 것이였다 ㅜㅜㅜ!!!

이후 채팅 이미지 업로드 기능은 더 이상 문제가 없었다~

그 다음은 채팅을 하자마자 수정 및 삭제가 안되는 문제가 있었다.

{: width="100%" height="100%"}

위에 gif 처럼 새로고침을 해야만 변경 사항이 적용되었다.

원인 분석을 한 끝에 원인을 찾을 수 있었다.

바로 서버의 `broadcast` 때문인데, 채팅을 입력하고 엔터를 누르는 순간 emit을 보내고 서버에서 `on`이 아직 오지 않은 상태에서 일단 채팅에 기록을 남겨두는 방식을 사용하고 있기 때문이다.

그래서 `useEffect`의 트리거 부분에 chat이 추가될 때 마다 마운팅되도록 설계를 했다. 그러면 채팅이 입력되고 추가 될 때마다 서버에서 `on`으로 데이터를 즉각적으로 받을 수 있었다.

그러면 서버에도 데이터가 바로 받아서 저장이 되기 때문에 그 데이터를 또 다시 수정 및 삭제가 가능한 것이다.

이 점을 활용하여 채팅을 남기고 즉각적으로 또 수정하거나 삭제할 수 있는 기능을 구현하였다.

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

- [x] 드래그 앤 드랍으로 채팅 이미지 업로드 기능 구현하기
- [x] 인피니티 스크롤 기능 구현하기