[✍️ Dev Log] 이우성 / 2021-06-04

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

- #325 Profile Image 기본 프로필 이미지로 변경 버튼 구현
- #327 workspace room 수정 및 삭제 모달창 CSS 수정
- #329 Chat bug fix
- #331 chat 수정 및 삭제 기능 오류 해결!




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

* 채팅 오류 해결 부분

채팅을 입력하면 `broadcast`로 인해서 채팅을 받는 사람 입장에서 콘솔을 찍어보면 채팅 `id` 값이 잘 찍히고 있었다.

하지만 내 로컬에는 채팅 `id` 값이 계속 `0`으로 찍히다가 새로고침을 해야만(socket으로 DB를 불러와야만) `id`값이 콘솔에 찍혔다.

이러한 현상때문에 채팅을 입력하고 첫번째 채팅은 삭제가 되지 않았다. 처음 채팅은 `id`와 `index` 모두 `0`이기 때문이다.

하지만 `broadcast`로 인해서 `id`값을 서버에 보낼때는 정상적인 값으로 서버에 보내는데, 화면에는 안그려질 뿐이다.

그래서 첫 해결 방안이 내가 채팅을 하고 `socket.on`으로 채팅 기록을 받아올 때 채팅 `id` 값도 같이 받아오기로 했다.

```js
useEffect(() => {
socket?.on("nowMessageId", ({ id }: ChatIdType) => {
setCurrentIndex(id);
});
}, [currentIndex]);
```

이런식으로 채팅을 칠 때 마다 그 채팅의 `id`값을 받아서 바로 값을 변경시켜 주었다.

하지만 여전히 첫 채팅의 `id`값은 0이고, `setState`로 인한 상태 값 변경이 되질 않았다. 새로 고침을 해야만 `setState`가 작동을 했다.
(안됐던 이유는 내가 동기적으로 생각했기 때문! setState는 비동기임을 잊지말자.. state가 변경된다고 해서 꼭 DOM 리렌더링이 일어나는 것은 아니다! 퍼포먼스에 따라 다름 주의, state는 즉각 변경이 되어도 props로 전달할 때는 다르다.)

그래서 두번째 방안이 서버에서 해당 채팅의 `index`까지 같이 내려주기로 하였다.

```js
socket?.on("nowMessageId", ({ id, chatLength }: ChatIdType) => {
if (chatBucket[chatLength]) {
chatBucket[chatLength].id = id;
}
});
```

이런식으로 해서 해결을 할 수가 있었다!!

* 프로필 이미지 기본 이미지로 변경하는 부분

이 부분은 서버에 `image = ''` 이런식으로 빈 문자열로 요청을 보내면 기본 이미지가 삭제 되는 줄 알았다. 하지만 서버에는 빈 문자열에 대한 처리 로직이 없었기 때문에 내가 빈 문자열로 보내도 이미지는 초기화가 되지 않았다.

어려움을 겪어서 바로 팀원들에게 말을 했더니 바로 해결이 되었다!

서버에서 빈 문자열 대신 'deleteImage' 라는 문자열을 받게 되면 빈 문자열 처럼 이미지를 없애는 로직을 하나 추가했다. 그랬더니 바로 해결을 할 수가 있었다!!!

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

- [ ] 프로필 유저 프로젝트 진행 상황 목록 표시 기능