BEST

개발 · 프로그래밍

풀스택

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

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

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

(4.7) 수강평 42개

수강생 1,020명

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입니다.

81,770

명

수강생

2,582

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

142개 ∙ (19시간 4분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 자료

2개

소스 코드 자료
강의 도표 자료

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

6개 ∙ (44분)

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

9개 ∙ (1시간 1분)

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

섹션 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. 강의자료

5개

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

9개 ∙ (45분)

섹션 15. 인증 처리

14개 ∙ (1시간 37분)

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

12개 ∙ (1시간 45분)

섹션 17. 공개방 채팅

10개 ∙ (1시간 46분)

섹션 18. DM (direct message) 채팅

5개 ∙ (46분)

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

9개 ∙ (1시간 27분)

섹션 20. 채팅방 정보

3개 ∙ (29분)

섹션 21. Typing...

4개 ∙ (36분)

섹션 22. Auto Scroll & Skeleton

3개 ∙ (26분)

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

9개 ∙ (1시간 15분)

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

마지막 업데이트일: 2023. 12. 04.

수강평

전체

42개

4.7

42개의 수강평

John Ahn님의 다른 강의

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

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

John Ahn

₩55,000

입문 / JavaScript

4.8

(13)

600+

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

입문

JavaScript

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

John Ahn

₩55,000

초급 / React, Next.js, TypeScript, TDD, Redux, 소프트웨어 테스트

4.7

(80)

2,800+

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

초급

React, Next.js, TypeScript

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

John Ahn

₩30,800

초급 / React Native, React, expo

4.7

(18)

600+

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

초급

React Native, React, expo

따라하며 배우는 HTML, CSS

John Ahn

₩49,500

입문 / HTML/CSS

4.9

(31)

700+

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

입문

HTML/CSS

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

John Ahn

₩49,500

초급 / GitHub, AWS, Docker, CI/CD, Travis CI, 데이터 엔지니어링

4.8

(353)

5,800+

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

초급

GitHub, AWS, Docker

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

John Ahn

₩49,500

초급 / React, React Context, 웹앱, Jest, 소프트웨어 테스트

4.6

(54)

1,500+

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

초급

React, React Context, 웹앱

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

John Ahn

₩33,000

중급이상 / React, Redux, Node.js, 웹앱, MongoDB

4.8

(153)

3,100+

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

중급이상

React, Redux, Node.js

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

John Ahn

₩44,000

초급 / TDD, Node.js, Express, MongoDB, Jest, SuperTest, Mongoose, 소프트웨어 테스트

4.8

(71)

1,100+

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

초급

TDD, Node.js, Express

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

John Ahn

무료

초급 / React, Node.js

4.8

(881)

22,700+

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

초급

React, Node.js

따라하며 배우는 NestJS

John Ahn

무료

초급 / NestJS, PostgreSQL, TypeORM, JWT

5.0

(287)

7,800+

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

초급

NestJS, PostgreSQL, TypeORM

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

John Ahn

₩49,500

초급 / TypeScript, JavaScript

5.0

(5)

300+

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

초급

TypeScript, JavaScript

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

John Ahn

₩44,000

초급 / 클론코딩, Node.js, React, Next.js, TypeScript, Docker, PostgreSQL

4.2

(17)

900+

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

초급

클론코딩, Node.js, React

따라하며 배우는 웹 게임

John Ahn

₩60,500

중급이상 / React

4.2

(6)

100+

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

중급이상

React

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

John Ahn

무료

초급 / Deno

4.9

(28)

1,300+

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

초급

Deno

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

John Ahn

무료

초급 / React, Node.js

4.8

(90)

7,700+

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

초급

React, Node.js

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

John Ahn

무료

초급 / React, Node.js, 웹앱, MongoDB, Express

4.9

(234)

10,800+

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

초급

React, Node.js, 웹앱

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

John Ahn

무료

초급 / React, Redux, Node.js, MongoDB

4.9

(219)

11,900+

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

초급

React, Redux, Node.js

비슷한 강의

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

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

정재남

₩22,000

초급 / React, GraphQL, Firebase

5.0

(13)

1,200+

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

초급

React, GraphQL, Firebase

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

John Ahn

₩33,000

중급이상 / React, Redux, Node.js, 웹앱, MongoDB

4.8

(153)

3,100+

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

중급이상

React, Redux, Node.js

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

John Ahn

₩55,000

초급 / React, Next.js, TypeScript, TDD, Redux, 소프트웨어 테스트

4.7

(80)

2,800+

초급

React, Next.js, TypeScript

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

John Ahn

₩44,000

초급 / 클론코딩, Node.js, React, Next.js, TypeScript, Docker, PostgreSQL

4.2

(17)

900+

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

초급

클론코딩, Node.js, React

React + Firebase 풀스택 개발 - 파이어베이스 파이어스토어 Data Modeling

브라이트코딩

₩71,500

30%

₩50,050

초급 / Firebase, React, firestore, database-modeling, react-fullstack

4.7

(3)

New

이 강의를 통해 파이어베이스로 DB의 관계를 구현하는 방법을 배우시게 됩니다. 빠르게 리액트 풀스택 개발자가 될 수 있습니다. 고용이 불안정한 지금 이 시대에는 새로운 기술을 배워 자신의 가치를 올려야 합니다. 그리고 무언가를 만들어야 합니다. 그 사이드 프로젝트와 아이디어를 구현 할 때 데이터의 "관계"를 구현할 수 있어야 합니다. 이 강의는 파이어베이스 "파이어스토어"로 "관계"를 구현할 수 있도록 도와 드립니다.

초급

Firebase, React, firestore

따라하며 배우는 웹 게임

John Ahn

₩60,500

중급이상 / React

4.2

(6)

100+

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

중급이상

React

리액트 공식문서 함께 공부하기

정재남

무료

입문 / React, JavaScript, react.js

5.0

(10)

5,000+

2023년 리뉴얼된 React 공식 문서를 함께 학습해요.

입문

React, JavaScript, react.js

Flutter로 메신저앱 만들기

DEV MOO

₩66,000

초급 / Flutter, Firebase, riverpod, dart, Android

5.0

(4)

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

초급

Flutter, Firebase, riverpod

틴더 파이어베이스 클론 | 리액트 네이티브

The Coders Studios

₩74,800

중급이상 / React Native, Firebase

3.0

(2)

최소한의 시간 내에 리액트 네이티브를 배울 수 있도록 해드리겠습니다. 필요 없는 부분은 넣지 않았습니다.

중급이상

React Native, Firebase

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

권태뽕

무료

초급 / Flutter, 클론코딩, Firebase

4.7

(161)

8,500+

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

초급

Flutter, 클론코딩, Firebase

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

김래옥

₩24,200

입문 / Java, 웹앱, JavaFX

4.9

(9)

100+

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

입문

Java, 웹앱, JavaFX

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

노마드크리에이터

₩38,500

초급 / 디지털 마케팅, Python, 웹앱, 웹 크롤링, Flask

3.2

(5)

100+

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

초급

디지털 마케팅, Python, 웹앱

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

David

₩17,600

초급 / Firebase

4.3

(21)

300+

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

초급

Firebase

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

김영한

₩88,000

초급 / Spring Boot, JPA, Java, Spring, 웹앱

5.0

(2,151)

24,900+

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

초급

Spring Boot, JPA, Java

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

김지형

무료

초급 / 웹앱, R

4.9

(30)

1,200+

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

초급

웹앱, R

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

김대현

무료

초급 / elm, 함수형 프로그래밍, SPA, 웹앱

5.0

(5)

200+

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

초급

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

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

SEJONG IT EDU

₩79,200

중급이상 / 웹앱, 블록체인, NFT

4.7

(41)

500+

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

중급이상

웹앱, 블록체인, NFT

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

이프로

무료

입문 / cursor, 인공지능(AI), 생성형AI, frontend, 웹앱

200+

Update

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

입문

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