seminseminsemin / open-market Goto Github PK

Description

개발/빌드를 위한 웹팩과 구형 브라우저 지원을 위한 바벨을 설치 및 설정하고자 함.

Todo

• 웹팩 공용
• 웹팩 dev
  • SPA 개발 편의성을 위해 webpack-dev-server 이용하기
  • style-loader
  • devtool: inline-source-map
• 웹팩 prod
  • MiniCssExtractPlugin
  • devtool: source-map
  • 캐시 무효화
• 바벨
• .gitignore

Description

자바스크립트 청크 파일을 불러올 때 로딩 인디케이터를 보여주고자 함.
https://cssload.net/en/spinners 사이트를 이용하여 로딩 인디케이터를 사용할 것임.

Todo

• 자바스크립트 청크 파일을 불러올 때 로딩 인디케이터 보여주기

Todo

• 구매, 판매 탭 클릭에 따라 보여지는 HTML 다르게 하기
• 구매 회원 가입
  • 유효성 검사 및 아이디 중복 체크
  • 회원가입 요청 전 인풋 유효 여부 확인
  • 회원가입 요청 및 포커스 아웃시 유효성 검사에서 미처 잡아내지 못한 것과 휴대폰 중복 체크 처리
• 판매 회원 가입
  • 유효성 검사(사업자 등록번호, 스토어 이름)
  • 회원가입 요청 전 인풋 유효 여부 확인
  • 회원가입 요청
• 인풋에 placeholder로 입력 조건 보여주기
• 회원가입 성공시 로그인 페이지로 이동

Todo

• 탑바 컴포넌트
• 상품 리스트 컴포넌트: 무한 스크롤
• 푸터
• 탭 순서: 탑바 → 푸터 → 상품 리스트
• 상품 이미지 너비 높이 미리 정해두기
• 데스크탑 CSS

Description

라우터 기능을 구현하고 Netlify에 배포해 잘 작동하는지 확인하고자 함

Todo

• 라우터 기능
  • 상품 리스트(홈): Home.js
  • 로그인: Login.js
  • 회원가입: SignUP.js
  • 장바구니: Cart.js
  • 제품 상세: Detail.js
  • 주문 및 결제: Order.js
  • 판매자 대쉬보드: DashBoard.js
  • 에러: Error.js
• Netlify 배포 잘 되는지 확인

Description

• 기존: .main이 없을 때 상품 리스트를 .main 내 렌더링하는 것으로 함

  constructor($main) {
      if (!$main) {
          this.render();
      }
  }

• 기존 방식의 문제점: 만약 사용자가 회원 가입 페이지만 다른 사람한테 공유받아, 처음 보는 페이지가 회원 가입 페이지라고 하자. 그러면 회원 가입 페이지에는 .main이 있을거임. 그럼 위의 조건대로라면, 이미 .main이 있기 때문에 메인 페이지로 다시 옮겨도 상품 리스트가 렌더링 되지 못함

• 해결: .main -> .main 내 .product-list가 없으면 상품 리스트를 렌더링하는 것으로