🔔 19일차
음.. 오늘은 정말 삽질을 많이 한 날인 것 같다. 채팅창에서 유저 프로필 이미지를 누르면 프로필 모달이 뜨고, 그 밑에 다른 유저의 프로필 이미지를 클릭하면 다시 그 유저의 모달이 뜨도록 만들어야 하는데 둘 다 뜨고 하나씩 모달이 지워진다..
모달을 하나씩 뜨도록 구현하고 싶은데 마음 처럼 쉽게 되지가 않았다. 그래서 일단 서버에서 socket 채팅 이미지 업로드 기능을 구현을 해 놓아서 이게 더 중요하니 이 기능 먼저 구현하였다.
이미지 업로드 기능을 프로필 페이지 구현할 때 한 번 해봐서 그런지, 생각보다 어렵지가 않았다. 채팅에서 업로드할 때 똑같이 서버에 요청해서 이미지를 받아오고, 그 값을 가지고 socket으로 다시 요청하는 과정만 추가되었다.
💪 오늘은 어떻게 프로젝트에 기여했나요?
socket까지 활용하여 실시간으로 이미지 업로드 기능을 구현하였다!!
기존에 프로필 페이지에서 사용했던 방식처럼 버튼을 통해 업로드를 할 수 있게 해주었고, useEffect를 통하여 이미지 값의 상태가 바뀌면 socket으로 emit할 수 있게 해주었다!!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
채팅 이미지 업로드 기능을 생각보다 엄청 빨리 구현한 후에 pull request를 했다.
풀리퀘를 하자마자 에러를 발견하는건 국룰인가…. 풀리퀘를 하고 불안한 마음에 다시 npm start를 해보았다.
아니나 다를까..ㅋㅋㅋㅋ 바로 에러를 발견했다.
띠용..? 이게 무슨 일인가… 빈 문자열 형태로 계속 채팅이 추가가 되고 있었다.
원인은 이미지 업로드를 useEffect로 하고 있어서 값이 없어도 emit이 되고 있었던 것이다. 그래서 서버에서 데이터를 받아오는 socket on에서 빈문자열일때는 값이 저장되지 않도록 해보았다.
그래도 값은 계속 추가가 되었다. 어차피 emit을 해서 데이터에 이미 저장되는데 오는 데이터를 막으면 무슨 소용이겠는가…
1시간 가까이 고민을 한 끝에 해결을 할 수 가 있었다!!!!!!!!
useEffect에서 애초에 빈 값이면 데이터를 보내지 않으면 되는 것이였다!! 이게 해결하고 나니 정말 쉬운 문제였는데, 막상 에러가 터지고 어디서부터 손을 봐줘야할지 막막할 때는 바로 찾기 힘든 것 같다..
그래도 천천히 잘 생각해 본 끝에 문제를 해결할 수 있어서 기분이 정말 좋았다 ㅠㅠㅠ
useEffect(() => {
if (chatUploadImage) {
//변수 생략..
setChatBucket([...chatBucket, newChat]);
socket?.emit("sendImage", getImageData);
}
}, [chatUploadImage]);
이런식으로 upload할 image의 값이 있을 때만 emit을 보내주면 되는 것이였다 ㅜㅜㅜ!!!
이후 채팅 이미지 업로드 기능은 더 이상 문제가 없었다~
그 다음은 채팅을 하자마자 수정 및 삭제가 안되는 문제가 있었다.
위에 gif 처럼 새로고침을 해야만 변경 사항이 적용되었다.
원인 분석을 한 끝에 원인을 찾을 수 있었다.
바로 서버의 broadcast 때문인데, 채팅을 입력하고 엔터를 누르는 순간 emit을 보내고 서버에서 on이 아직 오지 않은 상태에서 일단 채팅에 기록을 남겨두는 방식을 사용하고 있기 때문이다.
그래서 useEffect의 트리거 부분에 chat이 추가될 때 마다 마운팅되도록 설계를 했다. 그러면 채팅이 입력되고 추가 될 때마다 서버에서 on으로 데이터를 즉각적으로 받을 수 있었다.
그러면 서버에도 데이터가 바로 받아서 저장이 되기 때문에 그 데이터를 또 다시 수정 및 삭제가 가능한 것이다.
이 점을 활용하여 채팅을 남기고 즉각적으로 또 수정하거나 삭제할 수 있는 기능을 구현하였다.
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
드래그 앤 드랍으로 채팅 이미지 업로드 기능 구현하기, 인피니티 스크롤 기능 구현하기