인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

풀스택

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

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

(4.9) 수강평 237개

수강생 10,956명

ReactNode.js웹앱MongoDBExpress
Thumbnail

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

이런 걸 배울 수 있어요

  • 리액트

  • 노드

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

83,062

명

수강생

2,643

개

수강평

2,428

개

답변

4.8

점

강의 평점

20

개

강의

안녕하세요. 

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

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


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

더보기

커리큘럼

전체

17개 ∙ (2시간 37분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

237개

4.9

237개의 수강평

  • GentleM님의 프로필 이미지
    GentleM

    수강평 4

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    5일간 열심히 달려서 본 강의를 마무리 했습니다! 클론코딩하면서 이해한 부분에 대해 정리하고, 정리한 걸 바탕으로 스스로 다시 코딩해보니 실력이 쑥쑥 느는걸 느끼네요! 다음 강의도 기대하겠습니다.

    • Peter Byun님의 프로필 이미지
      Peter Byun

      수강평 7

      ∙

      평균 평점 5.0

      5

      88% 수강 후 작성

      좋았던점 1. 앱의 구조를 한 눈에 볼 수 있게 다이어그램을 보여주셔서 이해가 쉽다. 2. 설명 정도의 깊이가 균일해서 (주로 코드의 동작을 간단히 설명) 간결하게 강의가 유지될 수 있다. 3. 강사님의 매너가 너무 가볍지도 않고 딱딱하지도 않다(정신없거나 너무 빠르거나 하지 않음). 혹시 수강하시려는 분은 - HTTP, ES6지식 - 리액트 공식홈페이지의 기본 튜토리얼과 hook 튜토리얼 - node 공식 사이트 튜토리얼 이정도만 보고 따라하시면 충분히 따라가실것 같습니다. 좋은 강의를 무료로 공유해주셔서 감사합니다! 덕분에 좀 더 쉽게 리액트를 배웠어요.

      • jaeyoon4819님의 프로필 이미지
        jaeyoon4819

        수강평 6

        ∙

        평균 평점 4.8

        5

        94% 수강 후 작성

        돈 주고도 들을 정도의 퀄리티가 무료라니 이건 정말 혁명입니다. 감사합니다.

        • abcde님의 프로필 이미지
          abcde

          수강평 8

          ∙

          평균 평점 5.0

          5

          100% 수강 후 작성

          강사님 강의는 들을지 말지 고민 같은거 안하고 듣게 되네요.

          • dnfwlxo11님의 프로필 이미지
            dnfwlxo11

            수강평 5

            ∙

            평균 평점 5.0

            5

            100% 수강 후 작성

            무료강의지만 상세한 설명과 좋은 퀄리티의 강좌입니다. 다만 node와 react에 대한 기초상식이 없으시다면 따라가기 힘드실테니 반드시 먼저 선행학습 하신 후 보시는 것을 추천드립니다.

            John Ahn님의 다른 강의

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

            따라하며 배우는 자바스크립트 A-Z강의 썸네일

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

            John Ahn

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

            입문

            입문

            JavaScript

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

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

            John Ahn

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

            초급

            초급

            React Native, React, expo

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

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

            John Ahn

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

            초급

            초급

            React, Node.js

            따라하며 배우는 타입스크립트 A-Z강의 썸네일

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

            John Ahn

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

            초급

            초급

            TypeScript, JavaScript

            따라하며 배우는 HTML, CSS강의 썸네일

            따라하며 배우는 HTML, CSS

            John Ahn

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

            입문

            입문

            HTML/CSS

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

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

            John Ahn

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

            초급

            초급

            클론코딩, Node.js, React

            따라하며 배우는 웹 게임강의 썸네일

            따라하며 배우는 웹 게임

            John Ahn

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

            중급이상

            중급이상

            React

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

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

            John Ahn

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

            초급

            초급

            React, Next.js, TypeScript

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]강의 썸네일

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

            John Ahn

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

            초급

            초급

            React, React Context, 웹앱

            따라하며 배우는 NestJS강의 썸네일

            따라하며 배우는 NestJS

            John Ahn

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

            초급

            초급

            NestJS, PostgreSQL, TypeORM

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

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

            John Ahn

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

            초급

            초급

            React, Firebase, 웹앱

            따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

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

            John Ahn

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

            초급

            초급

            TDD, Node.js, Express

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

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

            John Ahn

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

            초급

            초급

            GitHub, AWS, Docker

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

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

            John Ahn

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

            초급

            초급

            Deno

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

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

            John Ahn

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

            중급이상

            중급이상

            React, Redux, Node.js

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

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

            John Ahn

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

            초급

            초급

            React, Node.js

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

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

            John Ahn

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

            초급

            초급

            React, Redux, Node.js

            비슷한 강의

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

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

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

            John Ahn

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

            초급

            초급

            React, Node.js

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

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

            John Ahn

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

            초급

            초급

            Redux, React, Node.js

            제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

            제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

            nhcodingstudio

            이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

            입문

            입문

            JavaScript, HTML/CSS, 웹앱

            OpenCV + WebApp (얼굴 눈 검출 웹앱만들기)강의 썸네일

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

            Jeonghyun Kim

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

            초급

            초급

            Django, 웹앱, OpenCV

            스프링 부트와 리액트로 구현하는 소셜 로그인강의 썸네일

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

            온코딩

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

            중급이상

            중급이상

            Java, Spring Boot, JPA

            React 비기너: 튼튼한 기본 만들기강의 썸네일

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

            김영보

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

            초급

            초급

            React, JavaScript, DOM

            리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트강의 썸네일

            리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트

            webstoryboy

            강의를 통해 React 프레임워크와 YouTube API를 이용하여 자신만의 리액트 유튜브 영상 사이트를 만들어봅니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용하는 것을 목표로 합니다.

            초급

            초급

            React, HTML/CSS, JavaScript

            Klaytn 클레이튼 블록체인 어플리케이션 만들기 - NFT강의 썸네일

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

            SEJONG IT EDU

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

            중급이상

            중급이상

            웹앱, 블록체인, NFT

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

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

            정재남

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

            초급

            초급

            React, GraphQL, Firebase

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

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

            노마드크리에이터

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

            초급

            초급

            디지털 마케팅, Python, 웹앱

            Node.js 노드 빠르게 훑어보기: 서버부터 DB까지강의 썸네일

            Node.js 노드 빠르게 훑어보기: 서버부터 DB까지

            제주코딩베이스캠프

            웹 서버 개발을 경험해보고 싶으신가요? 비전공자, 프론트엔드 개발자 모두 서버 개발로 첫 걸음을 내딛을 수 있게 도와드리겠습니다. 익숙한 자바스크립트 문법으로 서버, 데이터베이스까지 한 번에 효율적으로 훑어보며 서버를 이해해봅시다!

            초급

            초급

            Node.js, MongoDB, Express

            아빠가 들려주는 [R shiny app] 만들기강의 썸네일

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

            김지형

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

            초급

            초급

            웹앱, R

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

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

            정현우

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

            입문

            입문

            JavaScript, React, Node.js

            Do it! Node.js 프로그래밍 입문강의 썸네일

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

            이지스퍼블리싱

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

            초급

            초급

            Node.js, JavaScript, Express

            타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

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

            이웅재

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

            중급이상

            중급이상

            React, TypeScript

            Azure Native로 나만의 GPT 만들기강의 썸네일

            Azure Native로 나만의 GPT 만들기

            정동형

            Azure의 여러 리소스들을 사용해서 여러분들만의 GPT를 만들고, 배포하는 강의입니다. 처음부터 끝까지! 아무것도 없는 백지에서 완전한 서비스를 배포해봅시다!

            초급

            초급

            Azure, FastAPI, MongoDB

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

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

            Indie Coder

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

            초급

            초급

            GraphQL, Svelte, MongoDB

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

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

            이프로

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

            입문

            입문

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

            Node.js로 웹 크롤링하기강의 썸네일

            Node.js로 웹 크롤링하기

            제로초(조현영)

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

            중급이상

            중급이상

            JavaScript, Node.js, 웹 크롤링

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

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

            김래옥

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

            입문

            입문

            Java, 웹앱, JavaFX

            무료