따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기
수강정보
(23개의 수강평)
547명의 수강생
스킬태그 #React, #Redux, #Node.js, #웹앱
25% 할인, D-4
8,250원
11,000원
지식공유자 : John Ahn
45회 수업 · 총 7시간 21분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상

이 강의는

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

이런 걸 배워요

  • 리액트
  • 노드
  • 몽고 DB
  • 리덕스
  • Express JS

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

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

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

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

💡 강의 특징

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

🧰 여기서 다루는 툴

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

🙋🏻‍♂️ Q&A

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

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

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

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

도움 되는 분들

  • 노드, 리액트 시리즈 기본 강의를 들으신 분
  • 많은 기능이 있는 쇼핑몰 사이트를 직접 만들어 보고 싶으신 분

선수 지식

  • Javascript
  • Node JS
  • React JS

지식공유자 소개

안녕하세요. 

현재 평범하게 직장 생활하며 

파이썬과 PHP, 그리고 Node 와   

프론트엔드 스택들 리액트, 리덕스 등을 사용하며  

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

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

교육과정

모두 펼치기 45 강의 7시간 21분
섹션 0. 강의 소개 및 초기 설정
2 강의 14 : 59
강의 소개
03 : 21
Boiler Plate을 가져오고 Mongo DB 연결하기
11 : 38
섹션 1. 업로드 페이지 만들기
9 강의 82 : 02
업로드 페이지 만들기 시작
08 : 51
onChange Event 처리하기
09 : 47
Select Option 처리하기
07 : 00
Drop-Zone 적용하기
06 : 47
이미지 파일을 서버로 보내기
08 : 53
multer를 이용하여 이미지 저장
11 : 27
이미지 지우기
08 : 01
이미지 State을 부모 컴포넌트로 업데이트하기
05 : 23
모든 상품 정보를 데이터베이스에 저장하기
15 : 53
섹션 2. 랜딩 페이지 만들기
12 강의 130 : 33
데이터베이스에 들어 있는 모든 상품을 가져오기
08 : 13
카드 만들기
10 : 57
이미지 슬라이더 만들기
06 : 25
더보기 버튼 만들기 #1
09 : 04
더보기 버튼 만들기 #2
10 : 24
체크 박스 필터 만들기 #1
09 : 45
체크 박스 필터 만들기 #2
10 : 33
체크 박스 필터 만들기 #3
14 : 18
라디오 박스 필터 만들기 #1
15 : 31
라디오 박스 필터 만들기 #2
14 : 28
검색 기능 만들기 #1
09 : 29
검색 기능 만들기 #2
11 : 26
섹션 3. 상세 보기 페이지 만들기
5 강의 68 : 07
상품의 상세정보를 데이터베이스에서 가져오기
14 : 49
Product Image 컴포넌트 만들기
17 : 43
Product Info 컴포넌트 만들기
06 : 11
Add to Cart 버튼 만들기 #1
13 : 17
Add to Cart 버튼 만들기 #2
16 : 07
섹션 4. 카트 페이지 만들기
13 강의 135 : 30
Add to Cart 기능 개선 및 카트 Tab 만들기
11 : 52
카트에 담긴 상품 정보들을 데이터베이스에서 가져오기 #1
16 : 17
카트에 담긴 상품 정보들을 데이터베이스에서 가져오기 #2
07 : 46
데이터베이스에서 가져온 상품 정보들을 화면에서 보여주기
08 : 24
카트에 담긴 상품 정보 가져오는 부분 코드 수정
05 : 09
카트에 들어있는 상품들 가격 계산
05 : 56
카트에 들어 있는 상품 지우기
20 : 45
카트에 있는 모든 상품 지운 다음 처리할 것들
05 : 50
Paypal 버튼 만들기
09 : 06
Paypal로 결제하기
09 : 08
Paypal로 결제 성공 후 할 일들 #1
12 : 58
Paypal로 결제 성공 후 할 일들 #2
07 : 37
Paypal로 결제 성공 후 할 일들 #3
14 : 42
섹션 5. 결제 내역 페이지 만들기
1 강의 10 : 07
결제 내역 페이지 만들기
10 : 07
섹션 6. 강의 자료들
3 강의
전체 소스 코드 주소
Diagram HTML 파일
Diagram XML 파일

공개 일자

2020년 4월 22일 (마지막 업데이트 일자 : 2020년 4월 22일)

수강 후기

5.0
23개의 수강평
default_profile.png
릴롱궤 4달 전
난이도가 좀 있지만 그만큼 많이 배울 수 있어서 좋았습니다! 더 좋은 강의들 많이 만들어주세요 계속 수강하겠습니다 ! 아 한가지 건의사항이 있는데 그 강의가 끝날때 그때의 소스코드를 같이 제공해주시면 배우는데 더 도움이 될 것같습니다. ㅎㅎ
default_profile.png
skywalk 4달 전
정말 잘 들었습니다. 초보자가 전체적인 구성을 이해하도록 해주셨고, 앞으로 어떻게 해야 하는지를 보여 주셨습니다. 이제 다시 세세하게 보면서 익히도록 하겠습니다. 수고하셨습니다.
default_profile.png
andrewlee 4달 전
다른 많은 강사들을 들어보았지만 John Ahn님은 확실히 차별화 되어 있습니다. 0. 저렴한 가격정책 ( 클론 강의는 기본적으로 5~6만원 이상이 형성되어 있음. 거의 생태계 파괴자 급 가격정책; ) 1. 성의있는 강의 자료 ( 강의자료를 본인 저작권 운운하면서 안 올리는 강사가 다수 존재함... ) 2. 거의 1~2일 안에 오는 빠르고 성실한 질의응답 ( 타 강의에서는 강의의 내용과 조금 엇나가다라는 이유로 답장 조차 안하는 강의자도 많습니다.. ) 3. 불필요하거나 쓸때없는 소리가 없는 설명 ( 이상한 소리 안하십니다. 모르는 부분, 정확하지 않은 부분에 대해서 마치 아는 것마냥 떠드는 강사들이 많은데 저는 오히려 딱 초보자들을 위해 쉽게 설명하고, 어려운 개념에 대해선 말을 아끼시는 모습이 차라이 더 좋더라고요, ) 4. 반복학습을 통한 개념 내재화 ( 절대로 한번 했다고 이건 했구요 하면서 복붙하거나 하지 않음. 강의 후반에 가서는 물론 스스로의 노력과 반복이 필수적이지만, 리덕스에 대한 개념과 필요성에 대해서 스스로가 정리가 되어 있습니다. ) 5. 목소리도 좋음 ( 중저음의 매력적인 못소리 ) 정말 프론트엔드, 벡엔드 시작하고 싶다는 마음이 있다면 팔로우 할만한 로드맵입니다. 강추. 주의) 다만 완전 처음이신 분은 존안님 공짜강의 먼저 듣고오세요. 아는 것이 없는 데 이 강의를 먼저 듣는 것은 욕심입니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스