Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘
BEST

Slack 클론 코딩[실시간 채팅 with React]

Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!

Thumbnail
제로초(조현영)님의 프로필 이미지

이미지 드래그 업로드 영상 제작 완료

이미지 드래그 업로드하는 API 소스 코드를 깃헙에 올려두었습니다.

웹소켓 구조의 차이로 Channel과 DM에서 실시간 표시 메커니즘이 살짝 다릅니다.

https://github.com/ZeroCho/sleact/blob/master/alecture/components/Chat/index.tsx

채팅 컴포넌트에서 주소를 인식하는 부분과

https://github.com/ZeroCho/sleact/blob/master/alecture/pages/Channel/index.tsx

https://github.com/ZeroCho/sleact/blob/master/alecture/pages/DirectMessage/index.tsx

채널 페이지 DM 페이지에서 onDrop, onDragOver가 주요 차이점입니다.

안 읽은 메시지 개수 표시하는 것도 올라와 있습니다.

댓글