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