강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(4.8) 수강평 97개

수강생 2,899명

난이도 중급이상

수강기한 무제한

  • 제로초(조현영)
새소식 목록
관리
작성

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

이미지 드래그 업로드하는 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가 주요 차이점입니다.

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

댓글