🔔 22일차
음… 오늘은 또 삽질을 한 날이다… 하아아아아 하루하루가 부족한데 오늘은 진짜 너무 아쉬운 하루다 ㅜㅜ
일단 socket 채팅 구현을 완벽하게 해결한 줄만 알았지만… 역시나 오류가 있었다.
바로 다른 유저의 관점에서 나타는 에러인데 채팅을 남기자마자 삭제를 하고 다시 또 채팅을 남기고 연속적으로 삭제를 하면 삭제가 안되는 이슈를 발견했다.
뿐만아니라… 채팅을 막 연속적으로 치고 난 후에 수정을 하면 수정이 안된다던가.. 등등…
결국 해결을 하긴 했지만.. 배포 후에 또 어떤 이슈가 터질지 아주 기대가 된다..^^;
그리고 구현하고 싶었던 채팅 멘션기능을… 3~4시간 붙잡고 있다가 결국 파일을 지워버렸다.. 도저히 구현할 시간이 되지 않는 다는 것을 깨닫게 되었다.
삽질도 너무 많이 했고, 애초에 서버에서 알람기능을 구현할 시간이 없다고 해서.. 나도 멘션기능을 만들어봤자 알람도 안되는데…. 이런 생각에 멘션 기능은 포기를 하였다.
애매하게 있느니 차라리 다른 부분에서 더 완성도를 높히는 방식을 택했다. 그래서 매우 아쉬운 하루가 되었다…. ㅠㅠ
💪 오늘은 어떻게 프로젝트에 기여했나요?
먼저 해결한 문제인데, 이건 잠시 고민하다가 바로 해결했다!
socket을 통해 서버에서 전체 메시지를 받아오는 부분에도 스크롤을 맨 밑까지 내려주는 코드를 추가해주었다. 인피니티 스크롤은 order라는 state값 숫자가 올라갈 때만 요청을 하기 때문에 이 부분을 제외하고는 모든 행동에는 스크롤을 맨 밑으로 내려주었다.
그 다음으로는 수정 및 삭제를 다른 유저 시점에서도 잘 작동하는지 점검을 해보았다!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
실시간으로 채팅을 수정하고 삭제하는 부분에서 정말 애먹었다…
chat 마다 고유 값인 id가 있는데 내가 만약 채팅을 입력하면 그 chat id가 1번이라고 가정하자.
그러면 그 1번을 다시 삭제 요청을 하면 서버에서 1번을 삭제한다.
그리고 내가 다시 채팅을 입력하면 그 채팅은 다시 1번이 된다. 하지만 서버에서는 2번이 된다.. 응..? 서버는 삭제했던 자리는 공백으로 처리가 되었다.
이 부분을 socket으로 맞춰서 해결하려고 하니 정말 애먹은 것 같다..
결국 해결은 했지만 배포 한 상태에서 다시 점검을 해봐야 한다.
해결한 방법으로는 채팅을 보낼 때 마다 useState 상태값으로 클릭한 chat id에서 + 1을 해줘서 상태 변경을 해주고 서버에 보내주었다.
// 전체 채팅을 받아올 때
useEffect(() => {
socket?.on("getAllMessages", ({ chats, isEnd }: AllMessagesDataType) => {
setCurrentIndex(chats[chats.length - 1].id + 1);
setChatBucket([...chats, ...chatBucket]);
});
}, [chatBucket]);
// 채팅 삭제 버튼을 누른 후
setCurrentIndex(chat.id + 1);
const getChatDelete = getChatDeleteData(room, index, chat.id);
socket?.emit("deleteMessage", getChatDelete);
// 채팅 입력 후
const newChat: ChatDataType = newChatData(
currentIndex,
chat,
"",
room,
profileInfo
);
socket?.emit("sendMessage", data);
이 방법 말고는 도저히 생각이 나질 않았다.. 하지만 이 로직이 채팅의 모든 id를 검사한 후에 +1을 해주는 것 같아서 마음이 걸린다.
계속 점검을 하고 문제점을 찾아 봐야겠다.
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
랜딩 페이지 검토 및 수정