Thumbnail
BEST 개발 · 프로그래밍 풀스택
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기
(4.7)
24개의 수강평 ∙ 446명의 수강생

31,900원

지식공유자 : John Ahn
총 87개 수업˙총 11시간 34분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 529 공유
초급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
리액트
파이어베이스

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

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

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

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

💡 강의 특징

John Ahn, Firebase

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

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

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


💻 사용 스킬 & 학습 내용

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

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

🧰 여기서 다루는 툴

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


🙋🏻‍♂️ Q&A

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
즐겁게 코딩을 하고 싶은 사람
최신 기술에 관심이 있는 사람
📚
선수 지식,
필요한가요?
자바스크립트
리액트

안녕하세요
John Ahn 입니다.
John Ahn의 썸네일

안녕하세요. 

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

파이썬과 PHP, 그리고 Node 와   

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

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

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

커리큘럼 총 87 개 ˙ 11시간 34분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의자료
강의 소스 코드
강의 소스 코드 (2)
강의 도표 자료
강의 소스 코드 firebase-v9
강의 소스 코드 v7에서 v9으로 바꾸는 용도로 사용
섹션 1. 강의 소개 & 기본 구조
소개 영상 미리보기 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. 인증 처리
React Bootstrap 03:59
회원 가입 페이지 UI 만들기 13:51
react-hook-form을 이용한 회원 가입 유효성 체크 14:43
[업데이트] react-hook-form 업데이트에 따른 강의 수정 (회원가입 페이지)
useRef를 이용한 현재 password값 갖기 06:39
firebase에서 이메일로 유저 생성시 생기는 문제점 09:53
firebase에서 이메일로 유저 생성 03:11
프로세스 처리 중 Button을 누르지 못하게 막기 02:30
Firebase에 생성한 유저에 상세 정보 추가하기 07:25
Firebase에 생성한 유저 데이터베이스에 저장 09:39
[업데이트] react-hook-form 업데이트에 따른 강의 수정 (로그인 페이지)
로그인 페이지 만들기 05:01
인증된 이후의 페이지 이동 & useHistory 11:25
Redux 스토어에 로그인 유저 정보 저장 09:22
섹션 3. 채팅 페이지 기본 구조
채팅 페이지 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. 공개방 채팅
메시지 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) 채팅
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. 알림 & 즐겨찾기 방
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. 채팅방 정보
방 생성자, 방 설명 03:44
각 사람당 글 쓴 데이터 가져오기 13:40
userPosts 데이터를 count가 높은 순서 부터 보여주기 11:52
섹션 8. Typing...
Typing 시작 시 Typing 정보 데이터베이스에 저장 미리보기 09:29
리스너를 이용하여서 Typing 정보를 가져오기 08:25
Typing UI 추가하기 03:26
Typing 리스너 제거 14:59
섹션 9. Auto Scroll & Skeleton
메시지 보낼 때 자동으로 스크롤 내려가게 하기 07:11
메시지 로딩 중 스켈레톤 처리 16:09
엔터 키로 메시지 보내기 03:34
섹션 10. 데이터베이스, 스토리지 규칙 & 배포하기
Firebase 스토리지 규칙 13:15
Firebase 데이터베이스 규칙 (1) 07:39
Firebase 데이터베이스 규칙 (2) 07:13
애플리케이션 배포하기 09:15
섹션 11. 파이어베이스 v9 로 소스 코드 수정하기
v9에 대해서 미리보기 01:55
firebase initilize 소스 코드 변경 04:45
로그인 회원가입 변경 12:25
database ref, storage ref 07:47
리스너 등록 (onChildAdded, onValue ...) 16:43
채팅방 생성, 채팅 보내기 09:47
이미지 업로드 12:38
채팅방 즐겨찾기 05:13
Direct Message 04:20
강의 게시일 : 2020년 11월 16일 (마지막 업데이트일 : 2021년 10월 04일)
수강평 총 24개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.7
24개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
빠스단 thumbnail
이제 절반가량 듣고 있는데 제가 여러개 강의를 들어봤는데 확실히 diagram으로 수업진행하시니깐 훨씬 눈에 쏙쏙 들어오고 저도 다이어그램으로 이번에 정리하면서 공부 해보니 진짜 이게 효율이 다르네요. 덕분에 공부하는 도구하나 새롭게 습득해갑니다. 유튜브에서 firebase 강의 듣고 도저히 이해가 안갔는데 이강의들으니깐 진짜 강사님께서 얼마나 많이 준비를 하시고 진행하시는지 느껴지네요. 강추드립니다.
2021-01-20
bytrustu thumbnail
파이어 베이스 처음 해보는데 재밌는 강의 였습니다. 강의는 클래스였지만 훅스로 일단 해보았어요. 리액트 컴포넌트 구조화하는데 적응이 된 것 같습니다.
2020-11-19
오범준 thumbnail
항상 너무 감사한 존선생님! 덕분에 react 3일만에 복습했네요 감사합니다
2020-12-03
윤은석 thumbnail
정말 React 와 nodejs , firebase 의 최고의 선생님이 아니신가 싶습니다. React와 Reudx 기초강좌를 완전히 띈 이후에, john ahn 님이 올려준 모든 강의만 제대로 숙지해서, 1번은 철저하게 따라서 만들면서 꼼꼼히 필기하고, 1번은 필기한 거 보면서 참고하면서 만들어보고, 1번은 안보고 만들어보고, 마지막으로 다시보고 그걸 창작으로 자신이 몇개만 만들어보면 매우 빠른 실력향상이 된다고 봅니다. 다만 아쉬운 건, cloud function 에 관한 내용이 담긴 강의 하나 만들어주시면 너무 좋을 것 같습니다 ㅠㅠ
2020-12-30
조현일 thumbnail
최고입니다.
2021-09-24

31,900원

폴더에 추가 529 공유
지식공유자 : John Ahn
총 87개 수업˙총 11시간 34분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스