메일 인증하면, 매일 특별한 선물💌
Thumbnail
인프런 추석할인 중(D-6)
BEST 개발 · 프로그래밍 웹 개발
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기
(4.8)
98개의 수강평 ∙ 1747명의 수강생

20%

8,800원

11,000원
지식공유자 : John Ahn
총 45개 수업˙총 7시간 21분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
폴더에 추가 1270 공유
중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

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

✍️
이런 걸
배워요!
리액트
노드
몽고 DB
리덕스
Express JS

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

John Ahn

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

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

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

💡 강의 특징

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

🧰 여기서 다루는 툴

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

🙋🏻‍♂️ Q&A

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

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

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

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
노드, 리액트 시리즈 기본 강의를 들으신 분
많은 기능이 있는 쇼핑몰 사이트를 직접 만들어 보고 싶으신 분
📚
선수 지식,
필요한가요?
Javascript
Node JS
React JS

안녕하세요
John Ahn 입니다.
John Ahn의 썸네일

안녕하세요. 

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

파이썬과 PHP, 그리고 Node 와   

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

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

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

커리큘럼 총 45 개 ˙ 7시간 21분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개 및 초기 설정
강의 소개 미리보기 03:21
Boiler Plate을 가져오고 Mongo DB 연결하기 11:38
섹션 1. 업로드 페이지 만들기
업로드 페이지 만들기 시작 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. 랜딩 페이지 만들기
데이터베이스에 들어 있는 모든 상품을 가져오기 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. 상세 보기 페이지 만들기
상품의 상세정보를 데이터베이스에서 가져오기 14:49
Product Image 컴포넌트 만들기 17:43
Product Info 컴포넌트 만들기 06:11
Add to Cart 버튼 만들기 #1 13:17
Add to Cart 버튼 만들기 #2 16:07
섹션 4. 카트 페이지 만들기
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. 결제 내역 페이지 만들기
결제 내역 페이지 만들기 10:07
섹션 6. 강의 자료들
전체 소스 코드 주소
Diagram HTML 파일
Diagram XML 파일
강의 게시일 : 2020년 04월 22일 (마지막 업데이트일 : 2020년 04월 22일)
수강평 총 98개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
98개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
andrewlee thumbnail
다른 많은 강사들을 들어보았지만 John Ahn님은 확실히 차별화 되어 있습니다. 0. 저렴한 가격정책 ( 클론 강의는 기본적으로 5~6만원 이상이 형성되어 있음. 거의 생태계 파괴자 급 가격정책; ) 1. 성의있는 강의 자료 ( 강의자료를 본인 저작권 운운하면서 안 올리는 강사가 다수 존재함... ) 2. 거의 1~2일 안에 오는 빠르고 성실한 질의응답 ( 타 강의에서는 강의의 내용과 조금 엇나가다라는 이유로 답장 조차 안하는 강의자도 많습니다.. ) 3. 불필요하거나 쓸때없는 소리가 없는 설명 ( 이상한 소리 안하십니다. 모르는 부분, 정확하지 않은 부분에 대해서 마치 아는 것마냥 떠드는 강사들이 많은데 저는 오히려 딱 초보자들을 위해 쉽게 설명하고, 어려운 개념에 대해선 말을 아끼시는 모습이 차라이 더 좋더라고요, ) 4. 반복학습을 통한 개념 내재화 ( 절대로 한번 했다고 이건 했구요 하면서 복붙하거나 하지 않음. 강의 후반에 가서는 물론 스스로의 노력과 반복이 필수적이지만, 리덕스에 대한 개념과 필요성에 대해서 스스로가 정리가 되어 있습니다. ) 5. 목소리도 좋음 ( 중저음의 매력적인 못소리 ) 정말 프론트엔드, 벡엔드 시작하고 싶다는 마음이 있다면 팔로우 할만한 로드맵입니다. 강추. 주의) 다만 완전 처음이신 분은 존안님 공짜강의 먼저 듣고오세요. 아는 것이 없는 데 이 강의를 먼저 듣는 것은 욕심입니다.
2020-05-04
veris@naver.com thumbnail
초심자에게는 조금 어렵지만 좋은 강의였습니다.
2020-05-02
릴롱궤 thumbnail
난이도가 좀 있지만 그만큼 많이 배울 수 있어서 좋았습니다! 더 좋은 강의들 많이 만들어주세요 계속 수강하겠습니다 ! 아 한가지 건의사항이 있는데 그 강의가 끝날때 그때의 소스코드를 같이 제공해주시면 배우는데 더 도움이 될 것같습니다. ㅎㅎ
2020-05-13
hongki jung thumbnail
최고입니다!
2021-09-16
skywalk thumbnail
정말 잘 들었습니다. 초보자가 전체적인 구성을 이해하도록 해주셨고, 앞으로 어떻게 해야 하는지를 보여 주셨습니다. 이제 다시 세세하게 보면서 익히도록 하겠습니다. 수고하셨습니다.
2020-05-12
인프런 추석할인 중(D-6)

20%

8,800원

11,000원
폴더에 추가 1270 공유
지식공유자 : John Ahn
총 45개 수업˙총 7시간 21분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스