홈페이지>프로그래밍 관련>기타 소스코드
다운로드

Amazona 전자상거래 웹사이트

아마조나

React 및 Node 튜토리얼 - 9시간 만에 전체 전자상거래 [2021]

Amazon과 똑같은 완전한 기능을 갖춘 전자 상거래 웹사이트를 구축하기 위한 React 및 Node 튜토리얼에 오신 것을 환영합니다. 코드 편집기를 열고 나를 따라 몇 시간 동안 MERN 스택(MongoDB, ExpressJS, React 및 Node.JS)을 사용하여 전자 상거래 웹사이트를 구축해 보세요.

데모 웹사이트

  • 헤로쿠 : https://react-amazona.herokuapp.com

  • 헤로쿠 미러: https://react-amazona-mirror.herokuapp.com

당신은 배울 것이다

  • HTML5 및 CSS3: 의미 요소, CSS 그리드, Flexbox

  • 반응: 구성 요소, 소품, 이벤트, 후크, 라우터, Axios

  • Redux: 저장, 리듀서, 액션

  • 노드 및 익스프레스: 웹 API, 본문 파서, 파일 업로드, JWT

  • MongoDB: 몽구스, 집계

  • 개발: ESLint, Babel, Git, Github,

  • 배포: Heroku

  • React 및 노드 튜토리얼 보기

로컬로 실행

1. 저장소 복제 

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. 몽고DB 설정

  • 로컬 몽고DB

    • 여기에서 설치하세요.

    • 루트 폴더에 .env 파일 생성

    • MONGODB_URL=mongodb://localhost/amazona를 설정합니다.

  • Atlas Cloud MongoDB

    • https://cloud.mongodb.com에서 데이터베이스 생성

    • 루트 폴더에 .env 파일 생성

    • MONGODB_URL=mongodb+srv://your-db-connection을 설정합니다.

3. 백엔드 실행 

$ npm install
$ npm start

4. 프론트엔드 실행 

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. 시드 사용자 및 제품

  • 크롬에서 이것을 실행하세요: http://localhost:5000/api/users/seed

  • 관리자 이메일과 비밀번호를 반환합니다.

  • 크롬에서 이것을 실행하세요: http://localhost:5000/api/products/seed

  • 6개의 샘플 제품을 생성합니다.

6. 관리자 로그인

  • http://localhost:3000/signin을 실행하세요.

  • 관리자 이메일과 비밀번호를 입력하고 로그인을 클릭하세요

지원하다

  • Q/A: https://webacademy.pro/amazona

  • 강사에게 연락하세요: Basir

수업

  1. 이 코스 소개

    1. 무엇을 만들 것인가?

    2. 무엇을 배울 것인가

    3. 청중은 누구인가

  2. 도구 설치

    1. 코드 편집기

    2. 웹 브라우저

    3. VS 코드 확장

  3. 웹사이트 템플릿

    1. 아마존 폴더 생성

    2. 템플릿 폴더 생성

    3. index.html 생성

    4. 기본 HTML 코드 추가

    5. style.css에 대한 링크

    6. 머리글, 기본, 바닥글 만들기

    7. 스타일 요소

  4. 디스플레이 제품

    1. 제품 div 만들기

    2. 제품 속성 추가

    3. 링크, 이미지, 이름, 가격 추가

  5. 반응 앱 만들기

    1. npx create-react-app 프론트엔드

    2. npm 시작

    3. 사용하지 않는 파일 제거

    4. index.html 콘텐츠를 App.js에 복사

    5. style.css 콘텐츠를 index.css로 복사

    6. 클래스를 className으로 교체

  6. Github에서 코드 공유

    1. Git 저장소 초기화

    2. 변경 사항 커밋

    3. github 계정 만들기

    4. github에 저장소 만들기

    5. 로컬 저장소를 github 저장소에 연결

    6. 변경 사항을 github에 푸시

  7. 등급 및 제품 구성요소 생성

    1. 구성 요소/Rating.js 만들기

    2. div.등급 생성

    3. 스타일 div.등급, 범위 및 마지막 범위

    4. 제품 구성요소 생성

    5. 등급 구성요소 사용

  8. 제품 화면 구축

    1. 반응 라우터 돔 설치

    2. 홈 화면에 BrowserRouter 및 경로 사용

    3. HomeScreen.js 만들기

    4. 거기에 제품 목록 코드를 추가하세요.

    5. ProductScreen.js 생성

    6. 제품 세부정보에서 App.js로 새 경로 추가

    7. 제품 이미지, 정보, 작업에 대한 3개의 열을 만듭니다.

  9. Node.JS 서버 생성

    1. 루트 폴더에서 npm init 실행

    2. package.json 세트 유형 업데이트: 모듈

    3. 가져오기에 .js 추가

    4. npm 설치 익스프레스

    5. server.js 생성

    6. node backend/server.js로 시작 명령 추가

    7. 급행이 필요하다

    8. 백엔드를 위한 경로 생성/반환이 준비되었습니다.

    9. products.js를 프런트엔드에서 백엔드로 이동

    10. /api/products에 대한 경로 생성

    11. 반품 제품

    12. npm 시작 실행

  10. 백엔드에서 제품 로드

    1. HomeScreen.js 편집

    2. 제품, 로딩 및 오류를 정의합니다.

    3. useEffect 생성

    4. 비동기 fetchData를 정의하고 호출합니다.

    5. 액시스 설치

    6. /api/products에서 데이터 가져오기

    7. 목록에 보여줘

    8. 로딩 구성요소 생성

    9. 메시지 상자 구성요소 생성

    10. 홈스크린에서 사용하세요

  11. 코드 린팅을 위해 ESlint 설치

    1. VSCode eslint 확장 설치

    2. npm install -D eslint

    3. ./node_modules/.bin/eslint --init 실행

    4. ./frontend/.env 생성

    5. SKIP_PREFLIGHT_CHECK=true 추가

  12. 홈 화면에 Redux 추가

    1. npm 설치 redux 반응-redux

    2. store.js 생성

    3. initState= {제품:[]}

    4. 감속기 = (상태, 동작) => 스위치 LOAD_PRODUCTS: {제품: action.payload}

    5. 기본 createStore(reducer, initState) 내보내기

    6. HomeScreen.js 편집

    7. shopName = useSelector(state=>state.products)

    8. const 디스패치 = useDispatch()

    9. useEffect(()=>dispatch({유형: LOAD_PRODUCTS, 페이로드: 데이터})

    10. index.js에 스토어 추가

  13. 제품 화면에 Redux 추가

    1. 제품 세부정보 상수, 액션 및 리듀서를 생성합니다.

    2. store.js에 감속기 추가

    3. ProductScreen.js에서 작업 사용

    4. 백엔드 API에 /api/product/:id 추가

  14. 장바구니에 추가 버튼 처리

    1. ProductScreen.js에서 장바구니에 추가 처리

    2. CartScreen.js 생성

  15. 장바구니에 추가 작업 구현

    1. addToCart 상수, 액션, 리듀서 생성

    2. store.js에 감속기 추가

    3. CartScreen.js에서 작업 사용

    4. cartItems.length 렌더링

  16. 장바구니 화면 만들기

    1. 장바구니 항목 및 장바구니 작업에 대한 2개의 열을 만듭니다.

    2. cartItems.length === 0 ? 장바구니가 비어 있습니다

    3. 항목 이미지, 이름, 수량 및 가격 표시

    4. Checkout 버튼으로 진행

    5. 장바구니에서 삭제 작업 구현

  17. 장바구니에서 제거 작업 구현

    1. RemoveFromCart 상수, 작업 및 감속기 생성

    2. store.js에 감속기 추가

    3. CartScreen.js에서 작업 사용

  18. MongoDB에서 샘플 사용자 생성

    1. npm 몽구스 설치

    2. 몽고디비에 ​​접속

    3. config.js 생성

    4. npm 설치 dotenv

    5. MONGODB_URL 내보내기

    6. 모델/userModel.js 생성

    7. userSchema 및 userModel 생성

    8. 사용자 경로 생성

    9. 종자 샘플 데이터

  19. MongoDB에서 샘플 제품 생성

    1. 모델/productModel.js 생성

    2. productSchema 및 productModel 생성

    3. 제품 경로 생성

    4. 종자 샘플 데이터

  20. 로그인 백엔드 생성

    1. /signin API 생성

    2. 이메일과 비밀번호를 확인하세요

    3. 토큰 생성

    4. JSON 웹 토큰 설치

    5. dotenv 설치

    6. 토큰 및 데이터 반환

    7. 우편 배달부를 사용하여 테스트

  21. 로그인 화면 디자인

    1. 로그인 화면 생성

    2. 이메일 및 비밀번호 필드 렌더링

    3. 로그인 상수, 액션, 리듀서 생성

    4. 사용자 로그인을 기반으로 헤더 업데이트

  22. 로그인 작업 구현

    1. 로그인 상수, 액션, 리듀서 생성

    2. store.js에 감속기 추가

    3. SigninScreen.js에서 작업 사용

  23. 등록 화면 생성

    1. /api/users/register에 대한 API 생성

    2. 데이터베이스에 새 사용자 삽입

    3. 사용자 정보 및 토큰 반환

    4. RegisterScreen 생성

    5. 필드 추가

    6. 스타일 필드

    7. App.js에 화면 추가

    8. 등록 작업 및 감속기 생성

    9. 유효성 검사를 확인하고 사용자를 생성하세요

  24. 배송 화면 생성

    1. CheckoutSteps.js 구성요소 생성

    2. 배송 필드 생성

    3. 배송 상수, 작업 및 감속기 구현

  25. 결제 화면 생성

    1. 결제 필드 생성

    2. 배송 상수, 작업 및 감속기 구현

  26. 디자인 배치 주문 화면

    1. 디자인 주문 요약 필드

    2. 디자인 주문 작업

  27. 주문하기 API 생성

    1. 생성주문 API

    2. 주문모델 생성

    3. 주문 라우터 생성

    4. 주문 후 경로 생성

  28. PlaceOrder 작업 구현

    1. 주문 처리 버튼 클릭

    2. 주문 상수, 액션, 리듀서 생성

  29. 주문 화면 생성

    1. /api/orders/:id에 대한 빌드 순서 API

    2. OrderScreen.js 생성

    3. 디스패치 주문 세부정보 액션 사용 중Effect

    4. useSelector를 사용하여 데이터 로드

    5. 주문 화면과 같은 데이터 표시

    6. 주문 세부 정보 상수, 동작 및 감속기 생성

  30. PayPal 버튼 추가

    1. 페이팔에서 클라이언트 ID 받기

    2. .env 파일에 설정하십시오.

    3. /api/paypal/clientId 경로 양식 생성

    4. api.js에서 getPaypalClientID를 생성합니다.

    5. OrderScreen.js에 페이팔 결제 스크립트 추가

    6. 페이팔 버튼 보여줘

  31. 주문 결제 구현

    1. 결제 후 주문 업데이트

    2. api.js에서 payOrder 생성

    3. orderRouter.js에서 /:id/pay에 대한 경로를 생성합니다.

    4. 결제 후 재결제

  32. 주문 내역 표시

    1. 고객 주문 API 생성

    2. getMyOrders용 API 생성

    3. 프로필 화면에 주문 표시

    4. 스타일 주문

  33. 사용자 프로필 표시

    1. 사용자 세부정보 API 생성

    2. 사용자 정보 표시

  34. 사용자 프로필 업데이트

    1. 사용자 업데이트 API 생성

    2. 사용자 정보 업데이트

  35. 관리 보기 만들기

    1. 관리자 메뉴 생성

    2. 백엔드에서 관리 미들웨어 생성

    3. 프런트엔드에서 관리 경로 생성

  36. 제품 나열

    1. 상품 목록 화면 생성

    2. 저장소에 감속기 추가

    3. 화면에 제품을 보여주세요

  37. 제품 생성

    1. 빌드 제품 API 생성

    2. 빌드 제품 생성 버튼

    3. 제품 정의 상수, 동작 및 감속기 생성

    4. 제품 목록 화면에서 작업 사용

  38. 제품 편집 화면 구축

    1. 편집 화면 생성

    2. 상태 정의

    3. 필드 생성

    4. 제품 세부정보 로드

    5. 경로에 추가

  39. 제품 업데이트

    1. 업데이트 API 정의

    2. 제품 업데이트 상수, 동작 및 감속기 정의

    3. 제품 편집 화면에서 작업 사용

  40. 제품 이미지 업로드

    1. npm 설치 멀티터

    2. 업로드 라우터 정의

    3. 업로드 폴더 생성

    4. 프런트엔드 처리

  41. 제품 삭제

    1. 백엔드에서 삭제 API 생성

    2. 삭제 상수, 액션, 리듀서 생성

    3. 상품 목록 화면에서 사용하세요

  42. 주문 나열

    1. 주문 목록 API 생성

    2. 주문 목록 화면 생성

    3. 저장소에 감속기 추가

    4. 화면에 제품을 보여주세요

  43. 주문 삭제 2. 주문 삭제 작업 및 감소기 생성 3. 주문 목록에 주문 삭제 작업 추가

  44. 주문 배달

    1. 배송 주문을 위한 상수, 액션, 리듀서 생성

    2. 주문 세부정보 화면에 주문 배송 작업 추가

  45. Heroku에 게시

    1. Git 저장소 생성

    2. 헤로쿠 계정 만들기

    3. Heroku CLI를 설치하세요

    4. 헤로쿠 로그인

    5. heroku 앱:amazona 생성

    6. 빌드 스크립트용 package.json 편집

    7. 프로필 파일 생성

    8. mongodb 아틀라스 데이터베이스 생성

    9. heroku env 변수에 데이터베이스 연결 설정

    10. 커밋 및 푸시

  46. 사용자 나열

    1. 목록 사용자를 위한 API 구축

    2. 사용자 목록 생성 화면

    3. 주문 세부 정보 상수, 동작 및 감속기 생성

  47. 사용자 삭제

    1. 사용자 삭제를 위한 API 구축

    2. 주문 세부 정보 상수, 동작 및 감속기 생성

    3. UserListScreen에서 작업 사용

  48. 사용자 편집

    1. 업데이트 사용자를 위한 API 구축

    2. 편집 화면 UI 생성

  49. 판매자 보기 구현

    1. 판매자 메뉴 추가

    2. 판매자 경로 생성

    3. 판매자에게 제품 나열

    4. 판매자에게 주문 나열

    5. 제품 목록 및 세부 정보 화면에 판매자 추가

  50. 판매자 페이지 만들기

    1. 판매자 페이지 만들기

    2. 제품 구성 요소 및 제품 화면 업데이트

    3. 제품 경로 업데이트

  51. 최고 판매 캐러셀 추가

    1. 반응 캐러셀 설치

    2. 최고 판매자를 위한 작업 및 감소기 구현

    3. 홈 화면의 데이터와 함께 반응 캐러셀 사용

  52. 한 판매자로부터 품목 강제 주문

    1. 주문 시 한 판매자로부터 구매하기 위한 addToCart 작업 업데이트

  53. 검색창 및 검색 화면 만들기

    1. Header.js에 검색창 만들기

    2. 스타일 추가

    3. 제출 양식 처리

    4. 쿼리 문자열을 얻으려면 구문 분석 URL을 편집하십시오.

    5. 이름으로 검색할 수 있는 상품 목록 API 업데이트

  54. 고급 검색 필터 추가 1. 카테고리별 필터링 2. 가격대별 필터링 3. 평균 평점별 필터링

  55. 고급 검색 완료 1. 가격으로 필터링 2. 평점으로 필터링 3. 가격, 평점으로 정렬...

  56. 제품 평가 및 검토 1. 제품 평가 2. 작업 및 감소기 생성

  57. Google 지도에서 주소 선택 1. Google 지도 자격 증명 생성 2. Google API 키로 .env 파일 업데이트 3. Google API를 프런트엔드에 보내기 위한 API 생성 4. 지도 화면 생성 5. Google API 가져오기 6. getUserLocation 7. @react- 설치 google-maps/api 8. 배송화면에서 사용 9. 결제화면에 지도 적용

  58. BugFix: 문제 없이 로컬로 실행

    1. data.js에 판매자 정보 추가

    2. 판매자로서 관리자 정보가 포함된 시드 제품 데이터

    3. 사용자 업데이트 시 isSeller 및 isAdmin 수정

    4. 사용자 세부정보에서 인증 제거

  59. 페이지 매김 구현

    1. 백엔드의 제품 라우터에 페이지 매김 추가

    2. 프론트엔드의 액션과 리듀서에 페이지 번호 적용

    3. 검색 화면에 페이지 번호 표시

  60. mailgun을 통한 이메일 주문 영수증 1. mailgun 계정 생성 2. mailgun에 도메인 추가 및 확인 3. mailgun-js 설치 4. env 파일에 api 키 설정 5. orderRouter에서 지불 순서 변경 6. 이메일 보내기

  61. 대시보드 화면 생성

    1. 백엔드에서 차트 데이터 생성

    2. 차트 작성 화면

  62. 고객과의 실시간 채팅 구현

    1. 소켓 io를 사용하여 백엔드 생성

    2. 채팅 상자 구성 요소 만들기

    3. 지원 화면 만들기

  63. React 17, Router 6, Mongoose 6으로 업그레이드

    1. 백엔드

    2. 모든 패키지 제거 및 설치

    3. 몽구스 연결에서 옵션 제거

    4. 메일건을 순서대로 잡아보세요Router

    5. 프런트엔드

    6. 모든 패키지 제거 및 설치

    7. 검색창에서 삭제

    8. 모두 감싸다

    9. <경로 요소={}>로 대체

    10. <Route 요소={ }/>로 교체

    11. 교체하고 너무

    12. PrivateRoute, AdminRoute 및 SellerRoute 업데이트

    13. useNavigate의 push()를 Navigate()로 교체하세요.

    14. props.match.params.id를 const params = useParams()로 교체하세요.

    15. props.location.search를 const { search } = useLocation();으로 교체하세요. 및 URLSearchParams

    16. props.match.path를 const {pathname} = useLocation()으로 바꾸십시오.

    17. ChatBox, SupportScreen에서 userInfo를 useEffect에 넣습니다.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체