[따라하며 배우는 리액트&파이어베이스] 채팅 애플리케이션 만들기
    • 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
    소개 영상
    02 강의 소개 & 기본 구조
    소개 영상


    질문하기