풀스택

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

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

(4.9) 수강평 234개

수강생 10,817명

John Ahn

React Node.js 웹앱 MongoDB Express

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

이런 걸 배울 수 있어요

리액트
노드
몽고 DB
Express JS

리액트와 노드를 이용해 클론 웹사이트를 만들어보세요!

📝 강의 소개

안녕하세요 ^ ^
유튜브 클론에 이어서
영화 사이트 클론 강의를 만들게 되었습니다.

이 강의에서는 The Movie DB 라는 곳에서 제공하는 API를 이용하여 웹 사이트를 만들게 됩니다.
그래서 외부에서 제공하는 API를 어떻게 이용하여 사용하는지를
실질적으로 같이 해보면서 배울 수 있습니다.

이 강의를 통해서도 많은 분들이 리액트와 노드를 이용하여
더 쉽게 웹사이트를 만드는 법을 익힐수 있었으면 좋겠습니다. ^ ^

💡 강의 특징

처음 Boiler-plate 강의를 통해 기본적인 개념을 잡아가며
실제 강의에 들어가서 실질적으로 하나 하나 같이 만들어 가면서 배울 수 있습니다.

🧰 여기서 다루는 툴

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

John Ahn

🙋🏻‍♂️ QnA

|

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

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

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

Q. 노드, 리액트를 배우면 어떤 일을 할 수 있나요?
웹 개발자, 서버 개발자, 프론트엔드 개발자로서 일을 할 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트를 잘 사용하고 싶은 사람
노드를 잘 사용하고 싶은 사람

선수 지식,
필요할까요?

Javascript

안녕하세요
John Ahn입니다.

81,855

명

수강생

2,586

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

17개 ∙ (2시간 37분)

해당 강의에서 제공:

수업자료

섹션 1. 영화 사이트 만들기

17개 ∙ (2시간 37분)

무비앱 시리즈 #1 소개 영상 ( 따라하며 배우는 리액트 노드 )
02:55
무비앱 시리즈 #2 Boiler-Plate & MongoDB 연결 ( 따라하며 배우는 리액트 노드 )
12:04
무비앱 시리즈 #3 The MovieDB API 설명 ( 따라하며 배우는 리액트 노드 )
07:43
무비앱 시리즈 #4 Landing Page 만들기 (1) ( 따라하며 배우는 리액트 노드 )
16:28
무비앱 시리즈 #5 Grid Card Component ( 따라하며 배우는 리액트 노드 )
11:20
무비앱 시리즈 #6 Load More Button 만들기 ( 따라하며 배우는 리액트 노드 )
06:21
무비앱 시리즈 #7 Movie Detail 페이지 만들기 ( 따라하며 배우는 리액트 노드 )
14:36
무비앱 시리즈 #8 영화 출연진들 가져오기 ( 따라하며 배우는 리액트 노드 )
11:15
무비앱 시리즈 #9 Favorite 버튼 만들기 (1) ( 따라하며 배우는 리액트 노드 )
16:23
무비앱 시리즈 #10 Favorite 버튼 만들기 (2) ( 따라하며 배우는 리액트 노드 )
11:09
무비앱 시리즈 #11 Favorite Button 만들기 (3) ( 따라하며 배우는 리액트 노드 )
08:10
무비앱 시리즈 #12 Favorite list에 추가 삭제 ( 따라하며 배우는 리액트 노드 )
12:37
무비앱 시리즈 #13 Favorite 페이지 만들기 (1) ( 따라하며 배우는 리액트 노드 )
13:10
무비앱 시리즈 #14 Favorite 페이지 (2) ( 따라하며 배우는 리액트 노드 )
10:42
무비앱 시리즈 #15 강의 마무리 ( 따라하며 배우는 리액트 노드 )
02:58
강의 자료 Diagram
강의자료 HTML

강의 게시일: 2020. 03. 08.

마지막 업데이트일: 2021. 05. 26.

수강평

전체

234개

4.9

234개의 수강평

GentleM
2020. 08. 27.
∙
수강평 4
∙
평균 평점 5.0
5
100% 수강 후 작성
5일간 열심히 달려서 본 강의를 마무리 했습니다! 클론코딩하면서 이해한 부분에 대해 정리하고, 정리한 걸 바탕으로 스스로 다시 코딩해보니 실력이 쑥쑥 느는걸 느끼네요! 다음 강의도 기대하겠습니다.
Peter Byun
2020. 04. 27.
∙
수강평 7
∙
평균 평점 5.0
5
88% 수강 후 작성
좋았던점 1. 앱의 구조를 한 눈에 볼 수 있게 다이어그램을 보여주셔서 이해가 쉽다. 2. 설명 정도의 깊이가 균일해서 (주로 코드의 동작을 간단히 설명) 간결하게 강의가 유지될 수 있다. 3. 강사님의 매너가 너무 가볍지도 않고 딱딱하지도 않다(정신없거나 너무 빠르거나 하지 않음). 혹시 수강하시려는 분은 - HTTP, ES6지식 - 리액트 공식홈페이지의 기본 튜토리얼과 hook 튜토리얼 - node 공식 사이트 튜토리얼 이정도만 보고 따라하시면 충분히 따라가실것 같습니다. 좋은 강의를 무료로 공유해주셔서 감사합니다! 덕분에 좀 더 쉽게 리액트를 배웠어요.
jaeyoon4819
2020. 12. 29.
∙
수강평 6
∙
평균 평점 4.8
5
94% 수강 후 작성
돈 주고도 들을 정도의 퀄리티가 무료라니 이건 정말 혁명입니다. 감사합니다.
dnfwlxo11
2020. 12. 31.
∙
수강평 5
∙
평균 평점 5.0
5
100% 수강 후 작성
무료강의지만 상세한 설명과 좋은 퀄리티의 강좌입니다. 다만 node와 react에 대한 기초상식이 없으시다면 따라가기 힘드실테니 반드시 먼저 선행학습 하신 후 보시는 것을 추천드립니다.
abcde
2021. 01. 20.
∙
수강평 8
∙
평균 평점 5.0
5
100% 수강 후 작성
강사님 강의는 들을지 말지 고민 같은거 안하고 듣게 되네요.

John Ahn님의 다른 강의

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

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

John Ahn

₩49,500

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

4.8

(353)

5,800+

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

초급

GitHub, AWS, Docker

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

John Ahn

₩33,000

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

4.8

(153)

3,100+

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

중급이상

React, Redux, Node.js

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

John Ahn

₩30,800

초급 / React Native, React, expo

4.7

(18)

600+

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

초급

React Native, React, expo

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(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.6

(54)

1,500+

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

초급

React, React Context, 웹앱

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

John Ahn

무료

초급 / React, Node.js

4.8

(90)

7,700+

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

초급

React, Node.js

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

John Ahn

무료

초급 / React, Node.js

4.8

(884)

22,800+

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

초급

React, Node.js

따라하며 배우는 타입스크립트 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

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

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

John Ahn

₩55,000

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

4.7

(80)

2,800+

Update

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

초급

React, Next.js, TypeScript

따라하며 배우는 NestJS

John Ahn

무료

초급 / NestJS, PostgreSQL, TypeORM, JWT

5.0

(287)

7,800+

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

초급

NestJS, PostgreSQL, TypeORM

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

John Ahn

₩44,000

초급 / React, Firebase, 웹앱

4.7

(42)

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, Redux, Node.js, MongoDB

4.9

(219)

11,900+

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

초급

React, Redux, Node.js

비슷한 강의

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

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

John Ahn

₩33,000

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

4.8

(153)

3,100+

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

중급이상

React, Redux, Node.js

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

브라이트코딩

₩71,500

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

4.7

(3)

New

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

초급

Firebase, React, firestore

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

John Ahn

무료

초급 / React, Node.js

4.8

(90)

7,700+

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

초급

React, Node.js

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

닭강정

₩44,000

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

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

중급이상

React, Node.js, MongoDB

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

정재남

₩22,000

초급 / React, GraphQL, Firebase

5.0

(13)

1,200+

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

초급

React, GraphQL, Firebase

OpenCV + WebApp (얼굴 눈 검출 웹앱만들기)

Jeonghyun Kim

₩55,000

초급 / Django, 웹앱, OpenCV, 컴퓨터 비전

4.3

(11)

100+

이미지를 업로드하면 Opencv가 처리하여 얼굴을 검출해주는 웹앱을 만들어 봅니다.

초급

Django, 웹앱, OpenCV

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

SEJONG IT EDU

₩79,200

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

4.7

(41)

500+

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

중급이상

웹앱, 블록체인, NFT

WEB5 - Express Passport.js

Egoing Lee

무료

중급이상 / Node.js, Express

5.0

(17)

1,000+

이 수업은 Node.js Express의 인증 미들웨어인 Passport.js의 사용법을 알려드리는 수업입니다.

중급이상

Node.js, Express

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

코딩의세계 한태재

₩132,000

초급 / 인터랙티브 웹, react-three-fiber, Three.js, React, TypeScript, JavaScript, webgl

5.0

(12)

200+

React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

초급

인터랙티브 웹, react-three-fiber, Three.js

Web4 - Express-Session-Auth

Egoing Lee

무료

중급이상 / Express

4.9

(12)

1,000+

이 수업은 Node.js 웹프래임웍인 Express에서 Session을 이용해 인증을 구현하는 방법을 알려드리는 수업입니다.

중급이상

Express

Node.js로 웹 크롤링하기

제로초(조현영)

₩55,000

중급이상 / JavaScript, Node.js, 웹 크롤링, Puppeteer

4.9

(34)

900+

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

JavaScript, Node.js, 웹 크롤링

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

노마드크리에이터

₩38,500

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

3.2

(5)

100+

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

초급

디지털 마케팅, Python, 웹앱

Node.js - Express

Egoing Lee

무료

중급이상 / Express

4.9

(53)

4,100+

이 수업은 Node.js의 대표 웹프레임워크인 Express를 이용해서 웹애플리케이션을 구현하는 방법에 대한 수업입니다.

중급이상

Express

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

김래옥

₩24,200

입문 / Java, 웹앱, JavaFX

4.9

(9)

100+

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

입문

Java, 웹앱, JavaFX

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

정재남

무료

입문 / React, JavaScript, react.js

5.0

(10)

5,000+

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

입문

React, JavaScript, react.js

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

무료

중급이상 / React, TypeScript

4.7

(42)

5,900+

타입스크립트와 리액트 관련 강좌입니다.

중급이상

React, TypeScript

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

김지형

무료

초급 / 웹앱, R

4.9

(30)

1,200+

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

초급

웹앱, R

[연재형] 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