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

/

풀스택

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

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

(4.8) 수강평 155개

수강생 3,136명

ReactReduxNode.js웹앱MongoDB

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

이런 걸 배울 수 있어요

  • 리액트

  • 노드

  • 몽고 DB

  • 리덕스

  • Express JS

노드 + 리액트 개발, 한단계 레벨 업!
쇼핑몰 웹사이트를 직접 만들어보세요.

John Ahn

 

안녕하세요.
이 강의가 오래되다 보니
새롭게 강의를 리뉴얼할 예정입니다.
그래서 만약 현재 이 강의를 들으시려면
따라 하실 때 에러가 많이 나게 됩니다.
만약 수강하게 된 다면 참고해주시면 감사하겠습니다.
(2022년 12월 13일)

안녕하세요 ^ ^ 
이 강의에서는 처음부터 기능 하나하나,
한페이지 한페이지씩 직접 쇼핑몰 웹사이트를 만들어 봅니다.

이 강의는 노드 + 리액트 기본 선수지식이 필요한 강의이므로,
노드 + 리액트를 학습하지 않으신 분들은 다음 강의를 먼저 학습해주세요!

 

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
실제 웹앱을 만들기 위한 노드 + 리액트 기초 개념 학습

 

 

💡 강의 특징

쇼핑몰 사이트의 핵심 기능들을 최대한 많이 넣으려고 노력했으며, 
만드는 과정에서 어려운 로직들이 많이 들어가기에
설명을 하는 가운데 이해가 잘 되실 수 있도록 도표를 이용하며,
왜 이 부분이 이렇게 되는지 실제로 보여드리면서 강의가 진행되도록 노력하며 만들었습니다. 

 

 

🧰 여기서 다루는 툴

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

 

 

🙋🏻‍♂️ Q&A

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

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

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

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

 

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 노드, 리액트 시리즈 기본 강의를 들으신 분

  • 많은 기능이 있는 쇼핑몰 사이트를 직접 만들어 보고 싶으신 분

선수 지식,
필요할까요?

  • Javascript

  • Node JS

  • React JS

안녕하세요
John Ahn입니다.

83,062

명

수강생

2,641

개

수강평

2,428

개

답변

4.8

점

강의 평점

20

개

강의

안녕하세요. 

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

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


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

더보기

커리큘럼

전체

66개 ∙ (12시간 37분)

해당 강의에서 제공:

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

수강평

전체

155개

4.8

155개의 수강평

  • 소라연님의 프로필 이미지
    소라연

    수강평 81

    ∙

    평균 평점 5.0

    5

    53% 수강 후 작성

    리뉴얼 후 강의가 더 더 좋아 졌어요. 좋은 강의 감사합니다

    • 릴롱궤님의 프로필 이미지
      릴롱궤

      수강평 7

      ∙

      평균 평점 4.4

      5

      39% 수강 후 작성

      난이도가 좀 있지만 그만큼 많이 배울 수 있어서 좋았습니다! 더 좋은 강의들 많이 만들어주세요 계속 수강하겠습니다 ! 아 한가지 건의사항이 있는데 그 강의가 끝날때 그때의 소스코드를 같이 제공해주시면 배우는데 더 도움이 될 것같습니다. ㅎㅎ

      • 김밥님의 프로필 이미지
        김밥

        수강평 7

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        최신버전으로 리뉴얼되서 다시 개강되길 기다리고있습니다. ㅠㅠ

        • andrewlee님의 프로필 이미지
          andrewlee

          수강평 7

          ∙

          평균 평점 5.0

          5

          100% 수강 후 작성

          다른 많은 강사들을 들어보았지만 John Ahn님은 확실히 차별화 되어 있습니다. 0. 저렴한 가격정책 ( 클론 강의는 기본적으로 5~6만원 이상이 형성되어 있음. 거의 생태계 파괴자 급 가격정책; ) 1. 성의있는 강의 자료 ( 강의자료를 본인 저작권 운운하면서 안 올리는 강사가 다수 존재함... ) 2. 거의 1~2일 안에 오는 빠르고 성실한 질의응답 ( 타 강의에서는 강의의 내용과 조금 엇나가다라는 이유로 답장 조차 안하는 강의자도 많습니다.. ) 3. 불필요하거나 쓸때없는 소리가 없는 설명 ( 이상한 소리 안하십니다. 모르는 부분, 정확하지 않은 부분에 대해서 마치 아는 것마냥 떠드는 강사들이 많은데 저는 오히려 딱 초보자들을 위해 쉽게 설명하고, 어려운 개념에 대해선 말을 아끼시는 모습이 차라이 더 좋더라고요, ) 4. 반복학습을 통한 개념 내재화 ( 절대로 한번 했다고 이건 했구요 하면서 복붙하거나 하지 않음. 강의 후반에 가서는 물론 스스로의 노력과 반복이 필수적이지만, 리덕스에 대한 개념과 필요성에 대해서 스스로가 정리가 되어 있습니다. ) 5. 목소리도 좋음 ( 중저음의 매력적인 못소리 ) 정말 프론트엔드, 벡엔드 시작하고 싶다는 마음이 있다면 팔로우 할만한 로드맵입니다. 강추. 주의) 다만 완전 처음이신 분은 존안님 공짜강의 먼저 듣고오세요. 아는 것이 없는 데 이 강의를 먼저 듣는 것은 욕심입니다.

          • skywalk님의 프로필 이미지
            skywalk

            수강평 6

            ∙

            평균 평점 5.0

            5

            100% 수강 후 작성

            정말 잘 들었습니다. 초보자가 전체적인 구성을 이해하도록 해주셨고, 앞으로 어떻게 해야 하는지를 보여 주셨습니다. 이제 다시 세세하게 보면서 익히도록 하겠습니다. 수고하셨습니다.

            John Ahn님의 다른 강의

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

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

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

            John Ahn

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

            초급

            초급

            GitHub, AWS, Docker

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

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

            John Ahn

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

            입문

            입문

            JavaScript

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

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

            John Ahn

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

            초급

            초급

            React Native, React, expo

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

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

            John Ahn

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

            초급

            초급

            TDD, Node.js, Express

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

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

            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, 웹앱

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

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

            John Ahn

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

            초급

            초급

            Deno

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

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

            John Ahn

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

            초급

            초급

            React, Node.js

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

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

            John Ahn

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

            초급

            초급

            MongoDB, Express, React

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

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

            John Ahn

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

            초급

            초급

            Node.js, MongoDB, Redux

            비슷한 강의

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

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

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

            John Ahn

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

            초급

            초급

            React, Redux, Node.js

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

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

            John Ahn

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

            초급

            초급

            웹앱, React, Node.js

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

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

            닭강정

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

            중급이상

            중급이상

            React, Node.js, MongoDB

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

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

            온코딩

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

            중급이상

            중급이상

            Java, Spring Boot, JPA

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

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

            개복치개발자

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

            입문

            입문

            HTML/CSS, JavaScript, Vue.js

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

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

            John Ahn

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

            초급

            초급

            React, Next.js, TypeScript

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

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

            John Ahn

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

            초급

            초급

            React, React Context, 웹앱

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

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

            Indie Coder

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

            초급

            초급

            GraphQL, Svelte, MongoDB

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

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

            정현우

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

            입문

            입문

            JavaScript, React, Node.js

            iOS/Android 앱 개발을 위한 실전 React Native - Intermediate강의 썸네일

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

            Wintho

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

            중급이상

            중급이상

            React Native, Redux, Firebase

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

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

            정재남

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

            초급

            초급

            React, GraphQL, Firebase

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

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

            John Ahn

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

            초급

            초급

            TDD, Node.js, Express

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

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

            SEJONG IT EDU

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

            중급이상

            중급이상

            웹앱, 블록체인, NFT

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

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

            July

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

            초급

            초급

            MySQL, MongoDB, ERD

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

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

            정승원

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

            중급이상

            중급이상

            Python, MongoDB, FastAPI

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

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

            노마드크리에이터

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

            초급

            초급

            디지털 마케팅, Python, 웹앱

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

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

            김래옥

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

            입문

            입문

            Java, 웹앱, JavaFX

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

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

            김지형

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

            초급

            초급

            웹앱, R

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

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

            이웅재

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

            중급이상

            중급이상

            React, TypeScript

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

            ₩33,000