[따라하며 배우는 리액트&파이어베이스] 채팅 애플리케이션 만들기

슬랙 애플리케이션을 따라 만들며 개념과 실전, 거기에 재미까지 더한 웹 프로그래밍 강좌를 만나보세요!

클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
리액트, 자바스크립트, node.js
추천 학습대상
- 하나의 온전한 프로젝트를 완성해보고 싶은 분
- 웹 프로그래밍에 대한 개념과 실제 구현 방법을 함께 배우고 싶은 분
- 웹 개발자를 꿈꾸는 누구나
- 노드와 리액트를 잘 다루고 싶은 누구나
- 최신 기술에 관심이 많은 분
내 손으로 뚝딱 완성하는 슬랙 애플리케이션!💬


Boiler-Plate를 완성했다면
진짜 웹 서비스를 만들어보고 싶어졌을 거에요!



리액트 & 파이어베이스와 함께
A to Z 직접 만드는 채팅 앱


파이어베이스는 인증, 데이터베이스, 스토리지,
푸시 알림, 배포 등 애플리케이션에 꼭 필요한
다양한 기능을 자동으로 해결해주는 플랫폼입니다

높은 인기를 자랑하는 프레임워크 리액트와
실시간 데이터 전송을 원활하게 진행하는
파이어베이스로 채팅 앱을 구현해봅시다




도표와 함께 명확하게 이해하세요

채팅 애플리케이션의 핵심 기능들을
최대한 많이 구현해보는 강좌입니다

때문에 만드는 과정 중 어려운 로직들이
많이 사용되고 있습니다


이런 부분들을 보다 쉽게 이해하실 수 있도록
깔끔하게 정리된 도표로 설명하고,
설명한 내용이 왜 그렇게 되는지 코드를 통해
실제로 볼 수 있도록 구성
했습니다




수강하기 전에 확인해주세요


본 강좌는 자바스크립트, 리액트, 리덕스를
공부하신 분들에게 적합한 과정입니다

공부하시기 










우리 함께 성장해가요😌



John Ahn

현재 평범하게 직장 생활 중인 개발자입니다

 파이썬과 PHP, Node.js, React, Redux 등을
사용하며 즐겁게 개발하고 있습니다


 

all Icon made by Freepik from www.flaticon.com

체험하기
모두 펼치기
교육 과정
모두 펼치기
  • 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
마지막 업데이트|2023년 09월 26일
강의자 소개
안녕하세요. 구름에듀 캡틴 John Ahn (코치)입니다. 함께 학습을 시작해봐요!

강좌 후기
31,900

평균평점
4.2
난이도
보통
수강기간
평생 무제한