Thumbnail
BEST
개발 · 프로그래밍 풀스택

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼] 대시보드

(4.8)
39개의 수강평 ∙  964명의 수강생

44,000원

지식공유자: John Ahn
총 142개 수업 (19시간 4분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.

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

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

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

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

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

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

💡 강의 특징

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의 썸네일

안녕하세요. 

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

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


- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사 
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

커리큘럼 총 142 개 ˙ 19시간 4분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
소스 코드 자료
강의 도표 자료
섹션 1. 강의 소개 및 기본 구조
리액트 파이어베이스 슬랙 앱 소개 영상 미리보기 03:03
리액트 앱 설치하고 구조 생성하기 12:50
ESLint 설정하기 미리보기 04:46
React Router Dom 설정하기 05:10
Redux 설정하기 09:57
Firebase 사용하기 08:47
섹션 2. 채팅 페이지 기본 구조 만들기
CSS Framework React Bootstrap 02:05
회원 가입 페이지 UI 만들기 06:53
react-hook-form 이용하기 12:19
firebase에서 이메일로 유저 생성하기 10:03
Firebase에 생성한 유저에 상세 정보 추가하기 05:18
Firebase에 생성한 유저 데이터베이스에 저장하기 07:49
로그인 페이지 만들기 04:22
인증된 이후의 페이지 이동 05:54
Redux 스토어에 로그인 유저 정보 저장하기 06:31
섹션 3. 인증 기능 생성하기
채팅 페이지 UI 생성하기 06:34
User Panel 만들기 07:12
로그아웃 기능 구현 및 리덕스 스토어에서 유저 정보 지워주기 03:08
프로필 이미지 수정하기 24:10
채팅 룸 리스트 UI 생성하기 13:41
ChatRoom 생성하기 08:00
Firebase에서 데이터 실시간으로 받기 08:45
Clear Up Event Listener 02:10
Current Chat Room 지정하기 08:17
섹션 4. Public Message 부분 생성하기
메시지 Header UI 생성하기 06:02
Message Form 생성하기 미리보기 06:12
메시지 저장하기 12:34
메시지 보여주기 (Read) 09:22
Message 컴포넌트 생성하기 07:51
파일 업로드 기능 생성하기 12:35
메시지 검색 기능 생성하기 11:07
섹션 5. Direct Message 기능 생성하기
Direct Message UI 생성하기 08:46
Direct Message 목록 클릭하기 13:00
섹션 6. 채팅 방 좋아요 기능 생성하기
Favorite 버튼 UI & Favorite 데이터 데이터베이스에 추가하기 15:26
Favorite 리스트에 추가하기 14:44
채팅방 이동 시 올바르지 않은 데이터를 보여주는 버그 수정하기 04:00
Favorite 채팅방 클릭 시 해당 방으로 이동하기 02:29
섹션 7. 채팅 방 정보 표시하기
Chat Room 정보 (1) 방 생성자, 방 설명 표시하기 04:02
Chat Room 정보 (2) 각 사람당 글 쓴 개수 표시하기 14:11
섹션 8. Typing 기능 구현하기
Typing 시작 시 Typing 정보 데이터베이스에 저장하기 05:10
리스너를 이용하여서 Typing 정보를 가져오기 06:28
Typing UI 추가하기 04:17
회원가입 후 채팅 페이지로 이동 시 유저 정보 안 보이는 문제 해결하기 03:49
섹션 9. Auto Scroll 및 Skeleton 구현하기
메시지 보낼 때 자동으로 스크롤 내려가게 하기 05:08
메시지 로딩 중 스켈레톤 처리해 주기 06:16
섹션 10. 데이터베이스, 스토리지 규칙 & 배포하기
Firebase 스토리지 규칙 13:15
Firebase 데이터베이스 규칙 (1) 07:39
Firebase 데이터베이스 규칙 (2) 07:13
애플리케이션 배포하기 09:15
섹션 11. [참조] 리덕스
리덕스란? 08:26
미들웨어 없이 리덕스 카운터 앱 만들기 17:25
combineReducers 11:22
Redux Provider 06:46
userSelector & useDispatch 07:08
리덕스 미들웨어 06:26
Redux Thunk 20:01
리덕스 툴킷 11:06
섹션 12. 여기 이후부터는 예전 강의 자료들입니다. (Deprecated)
섹션 13. 강의자료
강의 소스 코드
강의 소스 코드 (2)
강의 도표 자료
강의 소스 코드 v7에서 v9으로 바꾸는 용도로 사용 (2021-12-30 update)
강의 완성본 소스 코드 (2022-05-26 update)
섹션 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
섹션 15. 인증 처리
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
섹션 16. 채팅 페이지 기본 구조
채팅 페이지 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
섹션 17. 공개방 채팅
메시지 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
섹션 18. 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
섹션 19. 알림 & 즐겨찾기 방
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
섹션 20. 채팅방 정보
방 생성자, 방 설명 03:44
각 사람당 글 쓴 데이터 가져오기 13:40
userPosts 데이터를 count가 높은 순서 부터 보여주기 11:52
섹션 21. Typing...
Typing 시작 시 Typing 정보 데이터베이스에 저장 미리보기 09:29
리스너를 이용하여서 Typing 정보를 가져오기 08:25
Typing UI 추가하기 03:26
Typing 리스너 제거 14:59
섹션 22. Auto Scroll & Skeleton
메시지 보낼 때 자동으로 스크롤 내려가게 하기 07:11
메시지 로딩 중 스켈레톤 처리 16:09
엔터 키로 메시지 보내기 03:34
섹션 23. 파이어베이스 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일 (마지막 업데이트일 : 2023년 12월 04일)
수강평 총 39개
수강생분들이 직접 작성하신 수강평입니다.
4.8
39개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
빠스단 thumbnail
5
이제 절반가량 듣고 있는데 제가 여러개 강의를 들어봤는데 확실히 diagram으로 수업진행하시니깐 훨씬 눈에 쏙쏙 들어오고 저도 다이어그램으로 이번에 정리하면서 공부 해보니 진짜 이게 효율이 다르네요. 덕분에 공부하는 도구하나 새롭게 습득해갑니다. 유튜브에서 firebase 강의 듣고 도저히 이해가 안갔는데 이강의들으니깐 진짜 강사님께서 얼마나 많이 준비를 하시고 진행하시는지 느껴지네요. 강추드립니다.
2021-01-20
bytrustu thumbnail
5
파이어 베이스 처음 해보는데 재밌는 강의 였습니다. 강의는 클래스였지만 훅스로 일단 해보았어요. 리액트 컴포넌트 구조화하는데 적응이 된 것 같습니다.
2020-11-19
윤은석 thumbnail
5
정말 React 와 nodejs , firebase 의 최고의 선생님이 아니신가 싶습니다. React와 Reudx 기초강좌를 완전히 띈 이후에, john ahn 님이 올려준 모든 강의만 제대로 숙지해서, 1번은 철저하게 따라서 만들면서 꼼꼼히 필기하고, 1번은 필기한 거 보면서 참고하면서 만들어보고, 1번은 안보고 만들어보고, 마지막으로 다시보고 그걸 창작으로 자신이 몇개만 만들어보면 매우 빠른 실력향상이 된다고 봅니다. 다만 아쉬운 건, cloud function 에 관한 내용이 담긴 강의 하나 만들어주시면 너무 좋을 것 같습니다 ㅠㅠ
2020-12-30
오범준 thumbnail
5
항상 너무 감사한 존선생님! 덕분에 react 3일만에 복습했네요 감사합니다
2020-12-03
foxball thumbnail
4
좋은강의, 훌륭한 강의라는거에는 단연코 이의를 제기할생각이 없습니다. 하지만, 최근 2주전에 구독을한 저로써는 그동안 업데이트가 되어, 많은부분이 햇갈립니다. 리액트돔, 리덕스, 파이어베이스 v9버전 강좌를 듣고, 안되는부분을 될때까지 찾아야하니, 답답하네요. 혹시 최신버전으로 다시강좌를 만들생각이 있으시면 구독해서 듣도록하겠습니다. ......
2022-09-26