BEST

개발 · 프로그래밍

풀스택

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

Name: 따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
Price: 44000 KRW

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

(4.7) 수강평 43개

수강생 1,030명

John Ahn

React Firebase 웹앱

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

이런 걸 배울 수 있어요

리액트
파이어베이스

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

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

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

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

💡 강의 특징

John Ahn, Firebase

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

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

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

💻 사용 스킬 & 학습 내용

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

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

🧰 여기서 다루는 툴

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

🙋🏻‍♂️ Q&A

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

선수 지식,
필요할까요?

자바스크립트
리액트

안녕하세요
John Ahn입니다.

83,014

명

수강생

2,638

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

142개 ∙ (19시간 4분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 자료

2개

1. 소스 코드 자료
2. 강의 도표 자료

섹션 2. 강의 소개 및 기본 구조

6개 ∙ (44분)

섹션 3. 채팅 페이지 기본 구조 만들기

9개 ∙ (1시간 1분)

9. CSS Framework React Bootstrap
02:05
10. 회원 가입 페이지 UI 만들기
06:53
11. react-hook-form 이용하기
12:19
12. firebase에서 이메일로 유저 생성하기
10:03
13. Firebase에 생성한 유저에 상세 정보 추가하기
05:18
14. Firebase에 생성한 유저 데이터베이스에 저장하기
07:49
15. 로그인 페이지 만들기
04:22
16. 인증된 이후의 페이지 이동
05:54
17. Redux 스토어에 로그인 유저 정보 저장하기
06:31

섹션 4. 인증 기능 생성하기

9개 ∙ (1시간 21분)

섹션 5. Public Message 부분 생성하기

7개 ∙ (1시간 5분)

섹션 6. Direct Message 기능 생성하기

2개 ∙ (21분)

섹션 7. 채팅 방 좋아요 기능 생성하기

4개 ∙ (36분)

섹션 8. 채팅 방 정보 표시하기

2개 ∙ (18분)

섹션 9. Typing 기능 구현하기

4개 ∙ (19분)

섹션 10. Auto Scroll 및 Skeleton 구현하기

2개 ∙ (11분)

섹션 11. 데이터베이스, 스토리지 규칙 & 배포하기

4개 ∙ (37분)

섹션 12. [참조] 리덕스

8개 ∙ (1시간 28분)

섹션 13. 여기 이후부터는 예전 강의 자료들입니다. (Deprecated)

0개

섹션 14. 강의자료

5개

섹션 15. 강의 소개 & 기본 구조

9개 ∙ (45분)

섹션 16. 인증 처리

14개 ∙ (1시간 37분)

섹션 17. 채팅 페이지 기본 구조

12개 ∙ (1시간 45분)

섹션 18. 공개방 채팅

10개 ∙ (1시간 46분)

섹션 19. DM (direct message) 채팅

5개 ∙ (46분)

섹션 20. 알림 & 즐겨찾기 방

9개 ∙ (1시간 27분)

섹션 21. 채팅방 정보

3개 ∙ (29분)

섹션 22. Typing...

4개 ∙ (36분)

섹션 23. Auto Scroll & Skeleton

3개 ∙ (26분)

섹션 24. 파이어베이스 v9 로 소스 코드 수정하기

9개 ∙ (1시간 15분)

강의 게시일: 2020. 11. 15.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

43개

4.7

43개의 수강평

foxball
수강평 32
∙
평균 평점 4.8
2022. 09. 26.
4
33% 수강 후 작성
좋은강의, 훌륭한 강의라는거에는 단연코 이의를 제기할생각이 없습니다. 하지만, 최근 2주전에 구독을한 저로써는 그동안 업데이트가 되어, 많은부분이 햇갈립니다. 리액트돔, 리덕스, 파이어베이스 v9버전 강좌를 듣고, 안되는부분을 될때까지 찾아야하니, 답답하네요. 혹시 최신버전으로 다시강좌를 만들생각이 있으시면 구독해서 듣도록하겠습니다. ......
조용준 (Near)
수강평 25
∙
평균 평점 5.0
2020. 11. 18.
5
77% 수강 후 작성
파이어 베이스 처음 해보는데 재밌는 강의 였습니다. 강의는 클래스였지만 훅스로 일단 해보았어요. 리액트 컴포넌트 구조화하는데 적응이 된 것 같습니다.
윤은석
수강평 14
∙
평균 평점 5.0
2020. 12. 30.
5
58% 수강 후 작성
정말 React 와 nodejs , firebase 의 최고의 선생님이 아니신가 싶습니다. React와 Reudx 기초강좌를 완전히 띈 이후에, john ahn 님이 올려준 모든 강의만 제대로 숙지해서, 1번은 철저하게 따라서 만들면서 꼼꼼히 필기하고, 1번은 필기한 거 보면서 참고하면서 만들어보고, 1번은 안보고 만들어보고, 마지막으로 다시보고 그걸 창작으로 자신이 몇개만 만들어보면 매우 빠른 실력향상이 된다고 봅니다. 다만 아쉬운 건, cloud function 에 관한 내용이 담긴 강의 하나 만들어주시면 너무 좋을 것 같습니다 ㅠㅠ
빠스단
수강평 1
∙
평균 평점 5.0
2021. 01. 20.
5
78% 수강 후 작성
이제 절반가량 듣고 있는데 제가 여러개 강의를 들어봤는데 확실히 diagram으로 수업진행하시니깐 훨씬 눈에 쏙쏙 들어오고 저도 다이어그램으로 이번에 정리하면서 공부 해보니 진짜 이게 효율이 다르네요. 덕분에 공부하는 도구하나 새롭게 습득해갑니다. 유튜브에서 firebase 강의 듣고 도저히 이해가 안갔는데 이강의들으니깐 진짜 강사님께서 얼마나 많이 준비를 하시고 진행하시는지 느껴지네요. 강추드립니다.
오범준
수강평 5
∙
평균 평점 5.0
2020. 12. 03.
5
76% 수강 후 작성
항상 너무 감사한 존선생님! 덕분에 react 3일만에 복습했네요 감사합니다

John Ahn님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

초급

GitHub, AWS, Docker

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

중급이상

React, Redux, Node.js

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

초급

TDD, Node.js, Express

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

중급이상

React

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

초급

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

초급

React, Redux, Node.js

따라하며 배우는 NestJS

John Ahn

이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

초급

NestJS, PostgreSQL, TypeORM

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

초급

React, Node.js

따라하며 배우는 자바스크립트 A-Z

John Ahn

웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

입문

JavaScript

따라하며 배우는 리액트 네이티브 기초

John Ahn

이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

초급

React Native, React, expo

따라하며 배우는 HTML, CSS

John Ahn

이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

입문

HTML/CSS

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

초급

React, Next.js, TypeScript

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

초급

React, React Context, 웹앱

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

초급

Deno

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

초급

React, Node.js, 웹앱

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

초급

React, React Context, 웹앱

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

정재남

개발부터 배포까지! 하나의 서비스를 완성하기 위한 험난한 여정을 여과없이 보여드립니다. 처음 써보는 기술들을 잔뜩 도입하여 좌충우돌 우당탕탕하면서도 어떻게든 헤쳐나갈 수 있어요!

초급

React, GraphQL, Firebase

리액트 최신버전 공식문서 파먹기

더코딩클럽

현업에서 일해야만 알 수 있는 React의 특별한 기술이 있는게 아닙니다. 기본기로 충분합니다. React 공식문서를 토대로 설명 드립니다.

초급

React, React Context, react.js

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

초급

React, Node.js

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

중급이상

React

Flutter로 메신저앱 만들기

DEV MOO

Flutter의 Riverpod 상태 관리와 Firebase를 활용해서 메신저 앱을 제작합니다.

초급

Flutter, Firebase, riverpod

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

React.js + Node.js 롤 전적 검색 사이트 만들기

영넨

이 강의는 Riot Games API를 활용하여 React.js와 Node.js를 이용한 '리그 오브 레전드 전적 검색 사이트'를 직접 만들어보는 실습 중심 강의입니다. 수강생은 기본적인 API 사용법부터, 프론트엔드(React.js)와 백엔드(Node.js, Express.js) 연동, 전적 데이터 시각화, 그리고 op.gg 스타일의 UI 구현까지 프로젝트를 단계별로 따라하면서 실습을 통해 자연스럽게 배우게 됩니다. 복잡한 이론보다는 코드 중심으로 '직접 따라 만들기'를 통해 빠르게 결과물을 경험할 수 있습니다.

입문

React, Node.js, api

파이썬 웹서비스API 실전 프로젝트 - 돈 버는 디지털마케팅

노마드크리에이터

네이버쇼핑, 쿠팡파트너스 등 돈 버는 디지털마케팅은 꾸준함도 필요하지만, 과학적인 분석과 자동화로 쉽고 효과적으로 접근하세요. 인기상품, 키워드, 블로그, 쇼핑 정보를 수집하고 분석하는 프로그램을 만드는 핵심 비법을 알려드립니다.

초급

디지털 마케팅, Python, 웹앱

[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript

David

2021년 새롭게 돌아온, "요즘 누가 유료로 웹서비스 구축하나, Firebase의 모든 것 - JavaScript" 강의! 1인 창업을 꿈꾸는 초급 개발자를 위한 바이블이 되어드립니다.

초급

Firebase

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

웹 개발 입문자를 위한 나침반, 당신이 웹 프론트엔드에 대해 모르는 것을 발견하고 체계적으로 나아가기 위한 가이드 강의입니다.

입문

네트워크, Google Chrome, Chrome DevTools

Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]

권태뽕

본 강의는 Flutter와 Firebase로 넷플릭스 UI를 클론 코딩하는 강의입니다! 가장 빠르게 앱 개발을 공부할 수 있는 Flutter를 시작하세요:)

초급

Flutter, 클론코딩, Firebase

순수 함수형 프론트엔드 언어 Elm 가이드

김대현

순수 함수형 프로그래밍으로 프론트엔드 웹앱을 만드는 Elm 프로그래밍 언어 가이드 문서를 3시간만에 다 공부합니다.

초급

elm, 함수형 프로그래밍, SPA

Klaytn 클레이튼 블록체인 어플리케이션 만들기 - NFT

SEJONG IT EDU

이 강좌를 통해 대체불가능한 NFT (Non Fungible Token) 을 활용한 비앱을 만들 수 있게 됩니다.

중급이상

웹앱, 블록체인, NFT

자바(javafx) 실전 데스크탑앱 프로젝트 - 유튜브관리앱

김래옥

최소한의 이론으로 데스크탑앱만들기! 프로그래밍 경험이 없어도 누구나 시작하는 앱만들기!

입문

Java, 웹앱, JavaFX

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

Node.js, 웹앱, TypeScript

아빠가 들려주는 [R shiny app] 만들기

김지형

R의 무궁무진한 기능을 웹 앱상에서 구현하도록 해 주는 R shiny 가장 간단하게 활용하고 배울 수 있도록 해 줍니다.

초급

웹앱, R

[연재형] WE CAN Cusor AI ! - 커서AI 우리도 할 수 있습니다.

이프로

< WE CAN Cursor AI ALL-IN-ONE 마스터 클래스 > 코딩 지식 ZERO도 괜찮아요! #AI와 함께 시작하는 스마트 코딩 여정 #매주 새로운 성장 스토리 #당신만의 AI 개발 파트너가 되어드립니다 #비개발자도_가능 #AI코딩 #CursorAI #코딩초보환영

입문

cursor, 인공지능(AI), 생성형AI

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

김영한

실무에 가까운 예제로, 스프링 부트와 JPA를 활용해서 웹 애플리케이션을 설계하고 개발합니다. 이 과정을 통해 스프링 부트와 JPA를 실무에서 어떻게 활용해야 하는지 이해할 수 있습니다.

초급

Java, Spring, 웹앱

₩44,000

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

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

이런 걸 배울 수 있어요

💡 강의 특징

💻 사용 스킬 & 학습 내용

🧰 여기서 다루는 툴

🙋🏻‍♂️ Q&A

이런 분들께 추천드려요!

안녕하세요 John Ahn입니다.

커리큘럼

수강평

John Ahn님의 다른 강의

비슷한 강의

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

이런 분들께
추천드려요!

안녕하세요
John Ahn입니다.