따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기
수강정보 23명의 수강생
스킬태그 #React, #Firebase, #웹앱
25% 할인, D-13
23,870원
31,900원
지식공유자 : John Ahn
73회 수업 · 총 10시간 19분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급

이 강의는

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

따라하며 배우는 채팅 애플리케이션 만들기, 
핵심 기능을 하나하나 따라 학습해보세요!

안녕하세요 ^ ^ 
이 강의에서는 처음부터 기능 하나하나,
한페이지 한페이지씩 직접 채팅 애플리케이션을 만들어 봅니다.

이 강의는 비록 노드는 사용하지 않지만 
노드 + 리액트 기본 선수지식이 있으면 더 이해하기 쉽기 때문에,
노드 + 리액트를 학습하지 않으신 분들은 다음 강의를 먼저 학습하시면 좋습니다.

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
실제 웹앱을 만들기 위한 노드 + 리액트 기초 개념 학습

💡 강의 특징

 실시간 스트리밍 프로토콜(RTSP) 방식 지원 

파이어베이스(Firebase)는 인증, 데이터베이스, 스토리지, 푸시 알림, 배포 등
대부분의 앱을 만들 때 필요한 부분들을 자동으로 만들어 주는 플랫폼으로,
실시간(Real-Time) 데이터 전송이 필요한 채팅 앱, 택시 앱 등을 쉽게 구현할 수 있습니다.

채팅 애플리케이션의 핵심 기능들을 최대한 많이 넣으려고 노력했으며, 
만드는 과정에서 어려운 로직들이 많이 들어가기에
설명을 하는 가운데 이해가 잘 되실 수 있도록 도표를 이용하며,
왜 이 부분이 이렇게 되는지 실제로 보여드리면서 강의가 진행되도록 노력하며 만들었습니다. 


💻 사용 스킬 & 학습 내용

▲ 자바스크립트(JavaScript), 리액트(React), 리덕스(Redux) 관련 선수 지식이 필요합니다. 

  • 로그인/회원가입, 유효성 체크
  • DM에 가입된 유저 실시간 반영, DM 메시지방
  • 채팅방 생성, 설명 추가, 즐겨찾기 추가/삭제
  • 메시지 알림 개수 표시
  • 공개방에서 대화하기
  • 상대방 대화 입력 시 알려주기
  • 채팅 검색, 스켈레톤 효과
  • 파일 업로드 퍼센테이지 보여주기
  • 유저 이미지 교체, 이미지 메시지 보내기
  • 애플리케이션 배포
  • etc.

🧰 여기서 다루는 툴

Visual Studio Code를 사용하지만 자신이 원하는 Editor를 사용해도 됩니다. 
MAC을 사용하지만 윈도우에서도 가능합니다.


🙋🏻‍♂️ Q&A

Q. 비전공자도 들을 수 있나요?
A. 넵! 전공자, 비전공자 상관없이 들을 수 있는 강의입니다.

이런 걸 배워요

  • 리액트
  • 파이어베이스

도움 되는 분들

  • 즐겁게 코딩을 하고 싶은 사람
  • 최신 기술에 관심이 있는 사람

선수 지식

  • 자바스크립트
  • 리액트

공개 일자

2020년 11월 16일 (마지막 업데이트 일자 : 2020년 11월 16일)

지식공유자 소개

안녕하세요. 

현재 평범하게 직장 생활하며 

파이썬과 PHP, 그리고 Node 와   

프론트엔드 스택들 리액트, 리덕스 등을 사용하며  

즐겁게 개발 하고 있는 개발자 입니다. 

앞으로 많은 도움을 드릴수 있었으면 좋겠습니다.

아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

교육과정

모두 펼치기 73 강의 10시간 19분
섹션 0. 강의자료
2 강의
강의 소스 코드
강의 도표 자료
섹션 1. 강의 소개 & 기본 구조
9 강의 45 : 14
소개 영상
02 : 45
리액트 앱 설치하기
03 : 06
Create React App 구조 (Structure)
05 : 28
React Router Dom
07 : 53
리덕스 기본구조
07 : 14
애플리케이션 전체적인 구조
02 : 29
REST vs WebSockets
04 : 54
Firebase ?
05 : 17
Firebase 사용하기
06 : 08
섹션 2. 인증 처리
12 강의 97 : 38
React Bootstrap
03 : 59
회원 가입 페이지 UI 만들기
13 : 51
react-hook-form을 이용한 회원 가입 유효성 체크
14 : 43
useRef를 이용한 현재 password값 갖기
06 : 39
firebase에서 이메일로 유저 생성시 생기는 문제점
09 : 53
firebase에서 이메일로 유저 생성
03 : 11
프로세스 처리 중 Button을 누르지 못하게 막기
02 : 30
Firebase에 생성한 유저에 상세 정보 추가하기
07 : 25
Firebase에 생성한 유저 데이터베이스에 저장
09 : 39
로그인 페이지 만들기
05 : 01
인증된 이후의 페이지 이동 & useHistory
11 : 25
Redux 스토어에 로그인 유저 정보 저장
09 : 22
섹션 3. 채팅 페이지 기본 구조
12 강의 105 : 46
채팅 페이지 UI
07 : 25
채팅 페이지 UI (2)
06 : 00
User Panel 기본 구조 만들기
08 : 59
로그 아웃 & 리덕스 스토어에서 유저 정보 지워주기
04 : 37
프로필 이미지 수정 (1)
09 : 54
프로필 이미지 수정(2) Firebase 스토리지에 이미지 업로드
09 : 49
프로필 이미지 수정(3) 리덕스 스토어 데이터 변경 및 데이터베이스에 데이터 저장
09 : 07
채팅 룸 리스트 UI
08 : 37
ChatRoom 생성하기
16 : 15
Firebase에서 데이터 실시간으로 받기
08 : 31
Set current chat room
14 : 35
clean up event listener
01 : 57
섹션 4. 공개방 채팅
10 강의 106 : 59
메시지 Header 부분 UI
10 : 01
메시지 Body, 메시지 Form UI 만들기
05 : 30
메시지 저장하기
19 : 00
메시지 보여주기
10 : 59
메시지 컴포넌트 만들기
12 : 26
이미지 파일 업로드
11 : 27
파일 업로드 Progress Bar 만들기
08 : 07
업로드한 파일 메시지를 상대방이 볼 수 있게 해주기
08 : 51
검색으로 메시지 찾기 (1) reduce , regex
12 : 20
검색으로 메시지 찾기 (2)
08 : 18
섹션 5. DM (direct message) 채팅
5 강의 46 : 15
Side Panel Direct Message 기본 UI
03 : 58
Direct Message를 위한 User 목록 가져오기
10 : 53
Direct Message 방 ID 생성하기
11 : 38
Direct Message 방 클릭 시 해줘야 할 것들
11 : 11
Private, Public 채팅방 구분해주기
08 : 35
섹션 6. 알림 & 즐겨찾기 방
9 강의 87 : 34
Notification UI 만들기
04 : 49
알림 정보 만들기 (1)
13 : 35
알림 정보 만들기 (2)
17 : 24
notification count 클릭해서 없애주기 & messageRef
07 : 51
현재까지 나온 에러들 수정하기
04 : 22
Favorite 버튼 UI & Favorite 정보 데이터베이스에 넣기
11 : 30
페이지 새로 고침 시에도 좋아요 표시 남아있게 해주기
08 : 34
Favorited 채팅방 클릭 시 해당 방으로 이동
16 : 58
Favorited를 위한 리스너 제거하기
02 : 31
섹션 7. 채팅방 정보
3 강의 29 : 16
방 생성자, 방 설명
03 : 44
각 사람당 글 쓴 데이터 가져오기
13 : 40
userPosts 데이터를 count가 높은 순서 부터 보여주기
11 : 52
섹션 8. Typing...
4 강의 36 : 19
Typing 시작 시 Typing 정보 데이터베이스에 저장
09 : 29
리스너를 이용하여서 Typing 정보를 가져오기
08 : 25
Typing UI 추가하기
03 : 26
Typing 리스너 제거
14 : 59
섹션 9. Auto Scroll & Skeleton
3 강의 26 : 54
메시지 보낼 때 자동으로 스크롤 내려가게 하기
07 : 11
메시지 로딩 중 스켈레톤 처리
16 : 09
엔터 키로 메시지 보내기
03 : 34
섹션 10. 데이터베이스, 스토리지 규칙 & 배포하기
4 강의 37 : 22
Firebase 스토리지 규칙
13 : 15
Firebase 데이터베이스 규칙 (1)
07 : 39
Firebase 데이터베이스 규칙 (2)
07 : 13
애플리케이션 배포하기
09 : 15
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스