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