풀스택

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

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

(4.9) 수강평 219개

수강생 12,090명

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

83,062

명

수강생

2,643

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

22개 ∙ (4시간 57분)

해당 강의에서 제공:

수업자료

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

22개 ∙ (4시간 57분)

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

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

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

수강평

전체

219개

4.9

219개의 수강평

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

John Ahn님의 다른 강의

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

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

John Ahn

₩55,000

입문 / JavaScript

4.7

(16)

600+

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

입문

JavaScript

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

John Ahn

₩30,800

초급 / React Native, React, expo

4.8

(20)

600+

Update

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

초급

React Native, React, expo

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

John Ahn

무료

초급 / React, Node.js

4.8

(889)

23,000+

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

초급

React, Node.js

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

John Ahn

₩49,500

초급 / TypeScript, JavaScript

5.0

(5)

300+

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

초급

TypeScript, JavaScript

따라하며 배우는 HTML, CSS

John Ahn

₩49,500

입문 / HTML/CSS

4.9

(31)

700+

Update

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

입문

HTML/CSS

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

John Ahn

₩44,000

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

4.1

(19)

900+

Update

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

초급

클론코딩, Node.js, React

따라하며 배우는 웹 게임

John Ahn

₩60,500

중급이상 / React

4.2

(6)

100+

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

중급이상

React

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

John Ahn

₩55,000

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

4.7

(84)

2,800+

Update

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

초급

React, Next.js, TypeScript

따라하며 배우는 리액트 테스트 [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

(311)

8,100+

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

초급

NestJS, PostgreSQL, TypeORM

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

John Ahn

₩44,000

초급 / React, Firebase, 웹앱

4.7

(43)

1,000+

Update

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

초급

React, Firebase, 웹앱

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

John Ahn

₩44,000

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

4.8

(71)

1,100+

Update

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

초급

TDD, Node.js, Express

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

John Ahn

₩49,500

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

4.8

(362)

5,800+

Update

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

초급

GitHub, AWS, Docker

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

John Ahn

무료

초급 / Deno

4.9

(29)

1,300+

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

초급

Deno

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

John Ahn

₩33,000

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

4.8

(155)

3,100+

Update

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

중급이상

React, Redux, Node.js

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

John Ahn

무료

초급 / Node.js, React

4.8

(91)

7,900+

Update

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

초급

Node.js, React

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

John Ahn

무료

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

4.9

(237)

10,900+

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

초급

Node.js, React, 웹앱

비슷한 강의

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

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

John Ahn

₩33,000

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

4.8

(155)

3,100+

Update

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

중급이상

React, Redux, Node.js

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

코배투

₩261,800

초급 / React, AWS, cloudflare, adsense, Google Analytics, 수익화

5.0

(8)

200+

Update

답변 활발

React로 광고 수익형 웹사이트를 만들어 봅니다. 광고를 최적화 하고 서버 비용을 줄이기 위한 방법과 규모에 따른 사이트 운영 Tip까지 배워봅니다.

초급

React, AWS, cloudflare

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

John Ahn

무료

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

4.9

(237)

10,900+

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

초급

웹앱, React, Node.js

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

브라이트코딩

₩71,500

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

4.4

(5)

Update

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

초급

Firebase, React, firestore

스프링 부트와 리액트로 구현하는 소셜 로그인

온코딩

₩60,500

70%

₩18,150

중급이상 / Java, Spring Boot, JPA, React, Spring Security

New

스프링 부트와 리액트를 활용해 일반 로그인과 소셜 로그인을 통합 구현하는 방법을 배웁니다. MPA와 SPA 환경 모두에서 로그인 시스템을 구축하고, JWT와 OAuth2 인증을 실습합니다. 실무에 바로 적용 가능한 예제 프로젝트를 통해 전체 로그인 흐름을 이해하고 구현할 수 있습니다.

중급이상

Java, Spring Boot, JPA

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

정재남

₩22,000

초급 / React, GraphQL, Firebase

5.0

(13)

1,200+

Update

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

초급

React, GraphQL, Firebase

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

₩44,000

초급 / Node.js, TypeScript, Prisma, REST API, fastify

4.5

(2)

Update

빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

초급

Node.js, TypeScript, Prisma

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

July

₩27,500

초급 / MySQL, MongoDB, ERD, Go

4.6

(7)

100+

Update

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

초급

MySQL, MongoDB, ERD

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.3

유용한IT학습

₩38,500

초급 / React

4.5

(26)

57,800+

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다. SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다. Part3에서는 하나의 완성된 데이터베이스 처리 웹앱을 만들어봅니다.

초급

React

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

Indie Coder

₩55,000

초급 / GraphQL, Svelte, MongoDB, Apollo

4.5

(6)

200+

Update

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

초급

GraphQL, Svelte, MongoDB

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

정재남

무료

입문 / React, JavaScript, react.js

5.0

(12)

5,300+

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

입문

React, JavaScript, react.js

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

정현우

₩22,000

25%

₩16,500

입문 / JavaScript, React, Node.js, React Native, TypeScript

2.4

(5)

100+

Update

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

입문

JavaScript, React, Node.js

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

이지스퍼블리싱

무료

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

4.9

(26)

1,600+

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

초급

Node.js, JavaScript, Express

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

Wintho

₩110,000

중급이상 / React Native, Redux, Firebase

4.7

(24)

500+

Update

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

중급이상

React Native, Redux, Firebase