🔔 25일차
벌써 25일 차… 이제 토요일, 일요일만 보내면 프로젝트도 끝이 난다!!!
오늘은 채팅에서 생기는 모든 오류를 해결하고 추가로 프로필 이미지를 기본 이미지로 변경하는 작업을 했다.
오늘 모든 작업은 서버분과 협업으로 이루어졌다. 혼자서 해결 못할 것만 같았던 문제들도 같이 하니까 해결이 되었ㄷㅏ… 협업의 힘은 정말.. 위대하다!!!
💪 오늘은 어떻게 프로젝트에 기여했나요?
유저가 프로필을 등록했다가 기본 이미지로 변경하고 싶으면 기본 이미지로 변경해줄 수 있는 기능을 만들었다. 기본 프로필 이미지 색상은 랜덤으로 지정해주기로 했다
그 다음은 채팅 수정 및 삭제 기능을 실시간으로 적용되도록 구현하였다. 실시간 적용은 성공했지만.. 약간의 오류가 있었다. 첫번째 채팅은 안된다던가.. 수정 및 삭제가 됐다가 안 됐다가 하거나 그랬었다..
이 문제를 이틀동안 고생했지만 드디어 해결했다!!!!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
채팅을 입력하면 broadcast로 인해서 채팅을 받는 사람 입장에서 콘솔을 찍어보면 채팅 id 값이 잘 찍히고 있었다.
하지만 내 로컬에는 채팅 id 값이 계속 0으로 찍히다가 새로고침을 해야만(socket으로 DB를 불러와야만) id값이 콘솔에 찍혔다.
이러한 현상때문에 채팅을 입력하고 첫번째 채팅은 삭제가 되지 않았다. 처음 채팅은 id와 index 모두 0이기 때문이다.
하지만 broadcast로 인해서 id값을 서버에 보낼때는 정상적인 값으로 서버에 보내는데, 화면에는 안그려질 뿐이다.
그래서 첫 해결 방안이 내가 채팅을 하고 socket.on으로 채팅 기록을 받아올 때 채팅 id 값도 같이 받아오기로 했다.
useEffect(() => {
socket?.on("nowMessageId", ({ id }: ChatIdType) => {
setCurrentIndex(id);
});
}, [currentIndex]);
이런식으로 채팅을 칠 때 마다 그 채팅의 id값을 받아서 바로 값을 변경시켜 주었다.
하지만 여전히 첫 채팅의 id값은 0이고, setState로 인한 상태 값 변경이 되질 않았다. 새로 고침을 해야만 setState가 작동을 했다.
(안됐던 이유는 내가 동기적으로 생각했기 때문! setState는 비동기임을 잊지말자.. state가 변경된다고 해서 꼭 DOM 리렌더링이 일어나는 것은 아니다! 퍼포먼스에 따라 다름 주의, state는 즉각 변경이 되어도 props로 전달할 때는 다르다.)
그래서 두번째 방안이 서버에서 해당 채팅의 index까지 같이 내려주기로 하였다.
socket?.on("nowMessageId", ({ id, chatLength }: ChatIdType) => {
if (chatBucket[chatLength]) {
chatBucket[chatLength].id = id;
}
});
이런식으로 하니 바로 해결이 되었다!!!!!! 이 문제를 며칠만에 드디어 해결…을 했다…ㅠ
이 문제를 아침부터 고민하고.. (사실) 어제도.. 그제도 고민했는데 해결을 못 했었다.
현재 채팅의 id값을 setState로 자식 컴포넌트까지 안 내려주고 저런식으로 바로 해결할 수 있었다니..
해결하고 보면 정말 이런 것 때문에 왜 며칠을 고생했을까? 생각하지만.. 그 당시에는 정말 어렵게 느껴지는 것 같다.
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
프로필 유저 프로젝트 진행 상황 목록 표시 기능