Thumbnail
BEST
개발 · 프로그래밍 풀스택

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

(4.8)
148개의 수강평 ∙  2,996명의 수강생

33,000원

지식공유자: John Ahn
총 111개 수업 (19시간 58분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
리액트
노드
몽고 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 입니다.
John Ahn의 썸네일

안녕하세요. 

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

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


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

커리큘럼 총 111 개 ˙ 19시간 58분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
소스 코드 자료
도표 강의 자료
섹션 1. 프론트엔드 기본 구조 생성하기
강의 소개 미리보기 03:54
Vite을 이용한 리액트 생성하기 12:56
Vite ESlint 설정하기 04:59
TailWindCSS에 대해서 08:02
TailwindCSS 를 앱에 적용하기 03:56
React Router Dom 08:21
React Router Dom APIs 미리보기 08:47
React Router Dom 적용하기 08:09
CSS 전체 구조 & React Icons 09:22
리덕스 사용을 위해 준비하기 06:51
Redux-Persist 13:20
섹션 2. 백엔드 기본 구조 생성하기
백엔드 기본 구조 생성하기 미리보기 12:53 express.static() 미리보기 06:44
CORS 02:51
Express.json() 02:39
MongoDB 사용하기 07:21
Mongoose에 대해서 07:18
Model 및 Schema 생성하기 03:59
Express에서 에러 처리하기 06:07
섹션 3. 로그인 기능 구현하기
회원가입 페이지 UI 생성하기 미리보기 09:10 React-Hook-Form 미리보기 12:05
Axios Instance 06:26
회원가입 기능 생성하기 11:22
react toast 이용하기 05:07
register route 생성하기 08:25
비밀번호 암호화 하기 07:33
회원 가입 시에 비밀번호 암호화 적용하기 05:04
로그인 페이지 생성하기 09:01
인증 절차가 필요한 이유 05:29
JWT에 대하여 12:25
login route 생성하기 15:03
인증이 되어있는지 체크하기 25:34
NotAuthRoutes, ProtectedRoutes 07:43
NavBar 08:21
NavBar Item 18:10
token 만료되었을 때 처리하기 03:37
섹션 4. 상품 생성, 메인 페이지 생성하기
Shop App을 위한 소스 코드 추가하기 미리보기 21:37
상품 업로드 페이지 UI 생성하기 08:50
상품 업로드 페이지 기능 생성하기 16:39
파일 업로드 컴포넌트 생성하기 17:34
Multer를 이용해서 파일 업로드하기 13:00
랜딩 페이지 생성하기 17:34
상품 데이터 가져오는 Route 생성하기 10:15
더 보기 기능 생성하기 15:48
Checkbox filter 기능 생성하기 25:02
Radiobox filter 기능 생성하기 17:01
검색기능 생성하기 13:01
섹션 5. 상품 디테일 페이지
상품 디테일 페이지 생성하기 22:46
Product Info 컴포넌트 생성하기 24:06
쇼핑 카트 페이지 데이터 가져오기 22:08
쇼핑 카트 페이지 생성하기 08:51
CartTable 컴포넌트 생성하기 08:43
Cart Item 삭제 기능 생성하기 15:33
결제 기능 생성하기 30:05
History 페이지 생성하기 07:40
섹션 6. [참조] 리덕스
리덕스란? 08:26
미들웨어 없이 리덕스 카운터 앱 만들기 17:25
combineReducers 11:22
Redux Provider 06:46
useSelector & useDispatch 07:08
리덕스 미들웨어 06:26
Redux Thunk 20:01
리덕스 툴킷(redux toolkit) 11:06
리덕스 툴킷 더 자세히 알아보기(APIs) 43:10
섹션 7. 이 아래부터는 예전 강의입니다. (DEPRECATED)
섹션 8. 강의 소개 및 초기 설정
강의 소개[삭제 예정] 미리보기 03:21
Boiler Plate을 가져오고 Mongo DB 연결하기[삭제 예정] 11:38
섹션 9. 업로드 페이지 만들기
업로드 페이지 만들기 시작[삭제 예정] 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
섹션 10. 랜딩 페이지 만들기
데이터베이스에 들어 있는 모든 상품을 가져오기[삭제 예정] 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
섹션 11. 상세 보기 페이지 만들기
상품의 상세정보를 데이터베이스에서 가져오기[삭제 예정] 14:49
Product Image 컴포넌트 만들기[삭제 예정] 17:43
Product Info 컴포넌트 만들기[삭제 예정] 06:11
Add to Cart 버튼 만들기 #1[삭제 예정] 13:17
Add to Cart 버튼 만들기 #2[삭제 예정] 16:07
섹션 12. 카트 페이지 만들기
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
섹션 13. 결제 내역 페이지 만들기
결제 내역 페이지 만들기[삭제 예정] 10:07
섹션 14. 강의 자료들
전체 소스 코드 주소[삭제 예정]
Diagram HTML 파일[삭제 예정]
Diagram XML 파일[삭제 예정]
강의 게시일 : 2020년 04월 22일 (마지막 업데이트일 : 2023년 04월 25일)
수강평 총 148개
수강생분들이 직접 작성하신 수강평입니다.
4.8
148개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
skywalk thumbnail
5
정말 잘 들었습니다. 초보자가 전체적인 구성을 이해하도록 해주셨고, 앞으로 어떻게 해야 하는지를 보여 주셨습니다. 이제 다시 세세하게 보면서 익히도록 하겠습니다. 수고하셨습니다.
2020-05-12
노형률 thumbnail
5
최신버전으로 리뉴얼되서 다시 개강되길 기다리고있습니다. ㅠㅠ
2023-03-15
릴롱궤 thumbnail
5
난이도가 좀 있지만 그만큼 많이 배울 수 있어서 좋았습니다! 더 좋은 강의들 많이 만들어주세요 계속 수강하겠습니다 ! 아 한가지 건의사항이 있는데 그 강의가 끝날때 그때의 소스코드를 같이 제공해주시면 배우는데 더 도움이 될 것같습니다. ㅎㅎ
2020-05-13
소라연 thumbnail
5
리뉴얼 후 강의가 더 더 좋아 졌어요. 좋은 강의 감사합니다
2021-03-31
andrewlee thumbnail
5
다른 많은 강사들을 들어보았지만 John Ahn님은 확실히 차별화 되어 있습니다. 0. 저렴한 가격정책 ( 클론 강의는 기본적으로 5~6만원 이상이 형성되어 있음. 거의 생태계 파괴자 급 가격정책; ) 1. 성의있는 강의 자료 ( 강의자료를 본인 저작권 운운하면서 안 올리는 강사가 다수 존재함... ) 2. 거의 1~2일 안에 오는 빠르고 성실한 질의응답 ( 타 강의에서는 강의의 내용과 조금 엇나가다라는 이유로 답장 조차 안하는 강의자도 많습니다.. ) 3. 불필요하거나 쓸때없는 소리가 없는 설명 ( 이상한 소리 안하십니다. 모르는 부분, 정확하지 않은 부분에 대해서 마치 아는 것마냥 떠드는 강사들이 많은데 저는 오히려 딱 초보자들을 위해 쉽게 설명하고, 어려운 개념에 대해선 말을 아끼시는 모습이 차라이 더 좋더라고요, ) 4. 반복학습을 통한 개념 내재화 ( 절대로 한번 했다고 이건 했구요 하면서 복붙하거나 하지 않음. 강의 후반에 가서는 물론 스스로의 노력과 반복이 필수적이지만, 리덕스에 대한 개념과 필요성에 대해서 스스로가 정리가 되어 있습니다. ) 5. 목소리도 좋음 ( 중저음의 매력적인 못소리 ) 정말 프론트엔드, 벡엔드 시작하고 싶다는 마음이 있다면 팔로우 할만한 로드맵입니다. 강추. 주의) 다만 완전 처음이신 분은 존안님 공짜강의 먼저 듣고오세요. 아는 것이 없는 데 이 강의를 먼저 듣는 것은 욕심입니다.
2020-05-04