1) 프로젝트 설계

1. 작업 순서

대략적인 작업 순서를 잡고 순서에 맞춰 진행할 예정이다.
일단 프론트 먼저 진행한다.
아직 React 가 익숙하지 않기 때문에, 보여지는 부분에서 틀을 잡고 추가로 필요한 부분이 있는지 확인한다.
그 이후에 Express + MongoDB 로 데이터를 보내주는 것을 구현할 예정이다.
그 이전까지는 더미 파일을 만들어 리액트에서 fetch 해가면서, 백엔드 구현이후 url 만 바꿔주면 동작하도록 만들 것이다.
이후에 추가적인 기능이 구현되면 프론트를 수정해가며 마무리한다.

2. 프론트 계획

예상 : 3일~5일 소요
일단 쇼핑몰에 필수적인 기능부터 틀을 잡을 것이다.
bootstrap, react-bootstrap 을 이용하여 만들어져있는 컴포넌트를 최대한 활용하여 빠르게 제작할 예정이다.
react-router-dom 을 사용하여 라우팅한다.
redux 가 필요하다고 판단되면 이후에 추가한다.
메인화면에 carousel (이미지 슬라이더)를 만들고 쇼핑몰 메인 이미지를 뿌려준다.
카테고리별로 상품 목록을 보여주고, 상품에 들어가면 상세 정보를 보여준다.
장바구니창, 주문창을 만든다.
회원 가입, 로그인, 회원 정보 수정창을 만든다.
관리자 페이지를 만든다.

3. 백엔드 계획

예상: 일주일정도 소요
기능을 구현하며 리액트에서 테스트한다.
회원 가입,로그인 등 인증에 필요한 요소 먼저 구현한다.
상품 등록에 필요한 요소들을 최종 선택하여 mongoose 모델을 만든다.
dummy 상품들을 추가한다.
장바구니 담기, 구매하기(주문) 을 구현한다.
결제,배송을 제외하고 실제로 작동하는지 확인한다.

4. 예상되는 collection들

users:{
  id, //unique
  password,
  name,
  contact:{email,phone},
  address:[{집 주소}, {회사 주소}, {등등..}],
  coupons:[],role // 구현 안 할 가능성 높음
},

categories:{
  title,
  description,
  seq, //주소에 쓸 식별자. 숫자 or 영어
},

products:{
  title,
  description,
  category,
  option:[{name: small, stock: 10, isStock: true}, 
           {name: medium, stock: 0 ,isStock: false},..],
  cost, //원가
  price:{ normal:원래 판매하려던 가격, 
         now:현재 판매가, isSale:true or false},
  event:[],
  display:[categories id], //진열할 카테고리(신상품, 추천상품 등)
  image:{main: 메인이미지, dscription: 상세 이미지},
  reviews,
  qna,
  guide,
  
},

carts:{
  userid,
  cart:[{product, option, quantity}, {...}],
},

orders:{
}