풀스택

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

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

(4.9) 수강평 219개

수강생 11,958명

John Ahn

React Redux Node.js MongoDB

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

이런 걸 배울 수 있어요

리액트 React JS
몽고 디비 Mongo DB
노드 Node JS
리덕스 Redux

| 강의소개

안녕하세요. 이 강의를 만들게 된 계기는 시중에 보면 리액트와 노드를 설명하는 개념 강의나 Todo Lists를 만드는 강의는 많은데 생각보다 좀 더 큰 웹사이트를 만드는 강의는 많이 못 본 것 같아서 이렇게 이 강의를 만들게 되었습니다.

| 강의에서 만드는 예제

- 메인 페이지

John Ahn

- 상세 비디오 페이지

- 상세 페이지 댓글 , 좋아요 , 구독 기능

- 이미지 업로드 페이지

| 여기서 다루는 툴

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

| 강의에 대해서

- 비전공자도 들을 수 있나요?

넵 ! 전공자, 비전공자 상관없이 들을 수 있는 강의입니다.

- 왜 노드, 리액트 등을 배워야 하나요?

2019년 Stackoverflow survey 결과를 가져와 봤습니다. 보시다시피 리액트와 노드의 인기는 해가 지나갈수록 점점 높아지고 있기 때문에 배워 두신다면 자신의 커리어 향상에 많은 도움 줄 수 있습니다.

- 노드, 리액트을 배우면 어떤 일을 할 수 있나요?

웹 개발자로서 일을 할 수 있습니다.

- 이 강의만의 특별한 장점이 있을까요?

하나씩 단계별로 기능을 만들어보면서 자연스럽게 전체 개념과 최신 기술(리액트 훅, 리덕스 등)을 익힐 수 있습니다.

🙋🏻‍♂️ 안녕하세요!

최근에 유튜브에서 영어 공부를 하려고 개발 강의를 영어로 찍기 시작했는데 의외로 해외 사람들이 보기 시작하여서 한글로도 이곳에 올리게 되었습니다.

혼자 하나하나 프로젝트를 만들 때 생각보다 자료가 많이 없어서 고생했던 것들을 이곳에서 많은 분과 나누면 좋겠다고 생각하여 이 강의를 시작하게 되었습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

즐겁게 따라하며 배우고 싶으신 분
개념과 실질적인 코딩을 함께 배우고 싶으신 분

선수 지식,
필요할까요?

javascript

안녕하세요
John Ahn입니다.

82,024

명

수강생

2,590

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

22개 ∙ (4시간 57분)

해당 강의에서 제공:

수업자료

섹션 1. 따라하며 배우는 노드, 리액트 시리즈

22개 ∙ (4시간 57분)

강의 소개
03:13
전체적인 틀 만들고 Mongo DB 연결
11:52
Boiler Plate 강의
02:03
비디오 업로드 FORM 만들기 (1)
19:43
비디오 업로드 FORM 만들기 (2)
12:35
Multer로 노드 서버에 비디오 저장하기
13:28
ffmpeg로 비디오 썸네일 생성하기
15:09
비디오 업로드 하기
17:47
랜딩 페이지에 비디오들 나타나게 하기
13:35
비디오 디테일 페이지 만들기
16:02
디테일 비디오 페이지에 Side 비디오 생성
09:12
구독 기능 (1)
20:16
구독 기능 (2)
11:34
구독 비디오 페이지
13:40
댓글 기능 생성 (1) 구조 설명
09:20
댓글 기능 생성 (2) Comment.js
15:53
댓글 기능 생성 (3) SingleComment
25:56
댓글 기능 생성 (4) ReplyComment
21:46
좋아요 싫어요 기능 생성 (1) 구조 설명
04:34
좋아요 싫어요 기능 (2) 템플릿, 데이터 가져오기
20:00
좋아요 싫어요 기능 (3) 클릭시 기능들
20:17
도표 자료

강의 게시일: 2020. 01. 01.

마지막 업데이트일: 2020. 01. 21.

수강평

전체

219개

4.9

219개의 수강평

JK Cho
2020. 03. 23.
∙
수강평 2
∙
평균 평점 5.0
5
95% 수강 후 작성
React를 처음 배우는 분들에게 매우 추천하는 강의입니다. React와 NodeJS, MongoDB의 사용법에 대해 전반적으로 배울 수 있습니다. 수업 진행도 매끄럽고(영상의 길이, 목소리, 말 속도 등), 문제가 생겼을 때 질문하면 강의자님께서 친절히 답변해주십니다! 이 강의를 수강하면 하나의 결과물이 확실하게 나오는 것 뿐만 아니라 기능을 더 추가하거나, 다른 사이트를 만들어 보면서 응용하기에도 쉽습니다. 무료로 강의를 올려주셔서 감사드리고, 다른 강의도 기다리겠습니다!
- John Ahn
  지식공유자
  2020. 03. 23.
  너무나 전문적이게 평가를 써주셨네요 ^^ 진심으로 감사드립니다. 앞으로도 좋은 강의로 찾아뵙겠습니다 ~!!! 감사합니다!
wizstudy1004
2020. 08. 27.
∙
수강평 5
∙
평균 평점 5.0
5
95% 수강 후 작성
너무 좋아요
릴롱궤
2020. 05. 08.
∙
수강평 7
∙
평균 평점 4.4
5
95% 수강 후 작성
기초부터 쭉 달리고 있습니다. 제가 인프런에서 만났던 강의들 중에 베스트인것 같습니다 ㅎㅎ 특별히 좋았던 것은 반복 숙달이었어요 처음에 이해가 잘 안되던 것도 계속 반복하니 어느새 체득하게 되는 것 같습니다 ! react를 이제 조금 알게 된것같습니다. 아 그리고 ㅎㅎㅎㅎ 처음 접하게 되는 메소드들에 대해서 개념설명을 좀 더 자세히 해주시면 더더욱 좋은 강의가 될 것 같습니다! 그리고 질문올리면 정말 성의껏 답변해주셔서 너무너무 감사합니다! 저는 또 쇼핑몰 배우러 갑니다 :)
HM L
2022. 03. 17.
∙
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
여러기능을 리액트와 노드로 만들어볼 수 있어서 유익해요 거기다 무료라서 좋아요 ㅎㅎ 근데 설명이 조금 부족한 부분도 있긴한데 무료인걸 생각하면 이정도는 괜찮다 생각해요 ㅋㅋ
kangdari_
2020. 03. 26.
∙
수강평 4
∙
평균 평점 5.0
5
95% 수강 후 작성
정말 좋은 강의였습니다. react 뿐만 아니라 기본적인 express와 mongoDB 사용법까지 공부할 수 있었습니다.
- John Ahn
  지식공유자
  2020. 03. 31.
  좋은 강의평 감사합니다 ^^ 완강하시느라 너무 수고하셨어요 !!!

John Ahn님의 다른 강의

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

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

John Ahn

₩30,800

초급 / React Native, React, expo

4.7

(18)

600+

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

초급

React Native, React, expo

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

John Ahn

₩49,500

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

4.8

(353)

5,800+

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

초급

GitHub, AWS, Docker

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

John Ahn

₩55,000

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

4.7

(80)

2,800+

Update

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

초급

React, Next.js, TypeScript

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

John Ahn

₩33,000

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

4.8

(153)

3,100+

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

중급이상

React, Redux, Node.js

따라하며 배우는 HTML, CSS

John Ahn

₩49,500

입문 / HTML/CSS

4.9

(31)

700+

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

입문

HTML/CSS

따라하며 배우는 웹 게임

John Ahn

₩60,500

중급이상 / React

4.2

(6)

100+

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

중급이상

React

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

John Ahn

무료

초급 / React, Node.js

4.8

(884)

22,800+

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

초급

React, Node.js

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

John Ahn

무료

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

4.9

(234)

10,800+

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

초급

Node.js, React, 웹앱

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

John Ahn

무료

초급 / Node.js, React

4.8

(91)

7,800+

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

초급

Node.js, React

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

John Ahn

₩49,500

초급 / TypeScript, JavaScript

5.0

(5)

300+

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

초급

TypeScript, JavaScript

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

John Ahn

₩55,000

입문 / JavaScript

4.8

(14)

600+

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

입문

JavaScript

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

John Ahn

₩44,000

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

4.2

(17)

900+

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

초급

클론코딩, Node.js, React

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

John Ahn

₩49,500

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

4.7

(55)

1,500+

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

초급

React, React Context, 웹앱

따라하며 배우는 NestJS

John Ahn

무료

초급 / NestJS, PostgreSQL, TypeORM, JWT

5.0

(288)

7,900+

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

초급

NestJS, PostgreSQL, TypeORM

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

John Ahn

₩44,000

초급 / React, Firebase, 웹앱

4.7

(43)

1,000+

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

초급

React, Firebase, 웹앱

따라하며 배우는 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

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

John Ahn

무료

초급 / Deno

4.9

(28)

1,300+

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

초급

Deno

비슷한 강의

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

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

John Ahn

무료

초급 / React, Node.js

4.8

(91)

7,800+

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

초급

React, Node.js

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

John Ahn

무료

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

4.9

(234)

10,800+

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

초급

Node.js, React, 웹앱

NodeFull Stack 개발 가이드

싸플

₩319,000

초급 / React, Docker, redux-toolkit, oauth2

맥 또는 윈도우 상관없는 Docker 환경에서 나만의 쇼핑몰을 만들어 봅시다 ^^

초급

React, Docker, redux-toolkit

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

개복치개발자

₩55,000

입문 / HTML/CSS, JavaScript, Vue.js, Node.js, 소프트스킬, MongoDB

5.0

(5)

바쁜 기획자 분들을 위한 빠르게 진행되는 개발 강의입니다. 군더더기 없는 설명으로 웹 프론트엔드, 백엔드, DB를 직접 개발해보며 전체적인 개발 프로세스를 알아볼 수 있습니다.

입문

HTML/CSS, JavaScript, Vue.js

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

₩44,000

중급이상 / React, Node.js, MongoDB, HTML/CSS, JavaScript

5.0

(2)

React, Node.js, MongoDB를 활용해 회사 웹사이트를 직접 제작하는 과정을 배울 수 있는 실전 강의입니다. 간단한 React, Node.js 배경으로 풀스택 프로젝트를 같이 만들어요!

중급이상

React, Node.js, MongoDB

React 비기너: 튼튼한 기본 만들기

김영보

₩44,000

초급 / React, JavaScript, DOM, 객체지향

5.0

(12)

700+

React 기본을 배울 수 있습니다. React와 관련된 HTML, JavaScript, DOM, Event, Object, Module, OOP 등을 정리할 수 있습니다.

초급

React, JavaScript, DOM

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

도도(코딩루팡)

₩46,200

초급 / Next.js, React, TailwindCSS, zustand, 클론코딩, 인터랙티브 웹

4.4

(34)

400+

React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

초급

Next.js, React, TailwindCSS

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

정재남

₩22,000

초급 / React, GraphQL, Firebase

5.0

(13)

1,200+

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

초급

React, GraphQL, Firebase

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

₩55,000

초급 / GraphQL, Svelte, MongoDB, Apollo

4.4

(5)

200+

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

초급

GraphQL, Svelte, MongoDB

배달앱은 어떻게 내 주변의 맛집을 찾을까?

정승원

₩77,000

중급이상 / Python, MongoDB, FastAPI

5.0

(6)

100+

제가 만약 배달앱을 처음부터 만든다면 이렇게 만들겠습니다. 실전 레벨의 fastapi, mongodb, 모델링과 인덱스 설계, redis 캐싱과 부하 테스트를 모두 이 강의에 담았습니다.

중급이상

Python, MongoDB, FastAPI

백엔드 취업을 위한 프로젝트 구조 와 데이터베이스 다루기 [MySQL, Mongo]

July

₩27,500

24%

₩20,900

초급 / MySQL, MongoDB, ERD, Go

4.6

(7)

100+

백엔드 취업을 준비하시는 취준생분들을 위한 MySQL, Mongo 두가지 DB를 활용한 백엔드 개발에 대한 내용입니다.

초급

MySQL, MongoDB, ERD

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱

무료

초급 / Node.js, JavaScript, Express, MongoDB

4.9

(18)

1,400+

Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

초급

Node.js, JavaScript, Express

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

Wintho

₩110,000

중급이상 / React Native, Redux, Firebase

4.6

(22)

400+

React Native 기반 모바일 앱 개발을 위한 중급 강의입니다. 프론트엔드의 심화내용 학습 뿐만 아니라 Firebase 기반의 백엔드 내용까지 함께 배우면서, 서버 연동/ 로그인/ 데이터 송수신/ 공공API 활용 등이 가능한 하나의 완벽한 앱을 개발할 수 있도록 제작된 강의입니다.

중급이상

React Native, Redux, Firebase