[따라하며 배우는 리액트&파이어베이스] 채팅 애플리케이션 만들기
01
강의자료 다운로드
강의자료 다운로드
추가 강의 자료 다운로드
02
강의 소개 & 기본 구조
소개 영상
체험하기
리액트 앱 설치하기
체험하기
Create React App 구조 (Structure)
체험하기
React Router Dom
리덕스 기본 구조
애플리케이션 전체 구조
REST vs WebSockets
Firebase?
Firebase 사용하기
03
인증 처리
React Bootstrap
체험하기
회원 가입 페이지 UI 만들기
체험하기
react-hook-form을 이용한 회원 가입 유효성 체크
useRef를 이용한 현재 password 값 갖기
firebase에서 이메일로 유저 생성시 발생하는 문제점
firebase에서 이메일로 유저 생성
프로세스 처리 중 Button을 누르지 못하게 막기
Firebase에 생성한 유저에 상세 정보 추가하기
Firebase에 생성한 유저 데이터베이스에 저장하기
로그인 페이지 만들기
인증된 이후의 페이지 이동 & useHistory
Redux 스토어에 로그인 유저 정보 저장하기
04
채팅 페이지 기본 구조
채팅 페이지 UI_1
채팅 페이지 UI_2
User Panel 기본 구조 만들기
로그아웃 & 리덕스 스토어에서 유저 정보 지워주기
프로필 이미지 수정_1
프로필 이미지 수정_2. Firebase 스토리지에 이미지 업로드
프로필 이미지 수정_3. 리덕스 스토어 데이터 변경 및 데이터베이스에 데이터 저장
채팅 룸 리스트 UI
ChatRoom 생성하기
Firebase에서 데이터 실시간으로 받기
Set current chat room
Clean up event listener
05
공개방 채팅
메시지 Header 부분 UI
메시지 Body, 메시지 Form UI 만들기
메시지 저장하기
메시지 보여주기
메시지 컴포넌트 만들기
이미지 파일 업로드
파일 업로드 Progress Bar 만들기
업로드한 파일 메시지를 상대방이 볼 수 있게 해주기
검색으로 메시지 찾기_1. reduce, regrex
검색으로 메시지 찾기_2
06
DM(Direct Message) 채팅
Side Panel Direct Message 기본 UI
Direct Message를 위한 User 목록 가져오기
Direct Message 방 ID 생성하기
Direct Message 방 클릭 시 해주어야 할 것들
Private, Public 채팅방 구분해주기
07
알림 & 즐겨찾기 방
Notification UI 만들기
알림 정보 만들기_1
알림 정보 만들기_2
Notification count 클릭해서 없애주기 & MessageRef
현재까지 나온 에러들 수정하기
Favorite 버튼 UI & Favorite 정보 데이터베이스에 넣기
페이지 새로 고침 시에도 좋아요 표시 남아있게 해주기
Favorited 채팅방 클릭 시 해당 방으로 이동하기
Favorited를 위한 리스터 제거하기
08
채팅방 정보
방 생성자,방 설명
각 사람당 글 쓴 데이터 가져오기
userPosts 데이터를 count가 높은 순서부터 보여주기
09
Typing...
Typing 시작 시 Typing 정보 데이터베이스에 저장하기
리스너를 이용하여 Typing 정보 가져오기
Typing UI 추가하기
Typing 리스터 제거하기
10
Auto Scroll & Skeleton
메시지 보낼 때 자동으로 스크롤 내려가게 하기
메시지 로딩 중 스켈레톤 처리
엔터 키로 메시지 보내기
11
데이터베이스, 스토리지 규칙 & 배포하기
Firebase 스토리지 규칙
Firebase 데이터베이스 규칙_1
Firebase 데이터베이스 규칙_2
애플리케이션 배포하기
12
파이어베이스 v9로 소스코드 수정하기
v9에 대해서
firebase initilize 소스코드 변경
로그인 회원가입 변경
database ref, storage ref
리스너 등록 (onChildAdded, onValue ...)
채팅방 생성, 채팅 보내기
이미지 업로드
채팅방 즐겨찾기
Direct Message
React Bootstrap
03 인증 처리
Loading...
100%
React Bootstrap
질문하기
추가 자료
추가 자료가 없습니다
여기서 새로운 학습 자료를 확인하세요!
선생님이 추가한 자료들을 바로 확인할 수 있어요.