msw 관련 커밋 issue4번에 3개 들어있음

• msw 셋팅
• 신규,인기,캐릭터,카테고리,검색api mocking
• 상세페이지api mocking

cra에서 nextjs로 마이그레이션 후 msw를 적용하는데 msw 내부 모듈 문제가 발생함

• browser 환경에서 setupWorker호출을 못함
• 호출 못하는 이유는 msw 내부 모듈에 있는 isNodeProcess()함수의 리턴값이 에러를 반환하기 때문.....

=> cna로 생성한 프로젝트에서는 정상 작동함.

해결 방법을 못찾아서 cna( create-next-app )을 사용하여 새로운 nextjs프로젝트를 만들고 여기에 msw를 적용함

• 신규 상품 api
• 인기 상품 api
• 캐릭터 상품 api
• 카테고리 상품 api
• 키워드 검색 상품 api
• 상품 상세 api
• 장바구니 api
• 좋아요 기능 api
• 결제 api
• 주문내역 api
• 주문내역 상세 api
• 좋아요내역 api

여러 state를 사용하여 form요소를 제어하지 않고
ref를 사용하여 제어하기 -> 잦은 state 변화로 인한 리랜더링을 방지할 수 있다.

form필드에 대한 데이터를 new FormData(formRef.current)로 formData형식으로 생성하면
[ { [element name]: element value }, ...... ] 형태의 값으로 출력된다.

위의 값을 가지고 해당 요소의 값을 참조하여 제어할 수 있다.

  const formRef = useRef();

  const handleFormChange = (e) => {
    const data = new FormData(formRef.current);
    const { classList, name, value } = e.target;
    console.dir([...data]);
    console.log(data.has('payCard'));
    console.log('c', classList);
    console.log('n', name);
    console.log('v', value);
  };

  // jsx
  <form ref={formRef} onChange={handleFormChange}>
    <input name="first" />
  </form>

• 캐릭터 페이지 상품 데이터를 2차원 배열로 수정함에 따른 로직 수정
  • 정렬 로직
  • 좋아요 기능
  • 장바구니 추가 기능

인기 상품 페이지는 좋아요,장바구니 기능 수정해서 commit함

• 신규 상품 페이지
• 인기 상품 페이지
• 캐릭터 페이지
• throttle 적용
• 무한스크롤 모듈화

• nextjs 설치 및 node-sass, react-scripts, react-router-dom 제거
• npm scripts 수정 ( "next dev", "next start", "next build" )
• 전역 css 적용 (page/_app.js)
• css module 적용
• react-router-dom 제거 및 next/link & next/router 적용
• mypage페이지 레이아웃 하위- 장바구니(cart), 주문(order), 결제(payment), 주문내역(orderlist)
• 신규 상품, 인기 상품 페이지
• 상품 상세페이지
• 장바구니(cart) 페이지, 결제(payment) 페이지 연동
• 각 페이지 fetch 데이터 연동
• 캐릭터 페이지
• 카테고리 페이지 -> 캐릭터 페이지랑 레이아웃이 똑같은 관계로 안함
• #8
• 사이드 메뉴
• nav
• 검색바
• 각 페이지에 있는 라우팅
• 각 페이지 기능 함수(좋아요, 장바구니 등등)
• #11
• #9
• next.config.js 페이지 라우팅 설정
• pages폴더에 있는 파일들을 페이지랑 컴포넌트로 분리
• #10
• ssr 적용
• 주문내역
• 주문 상세
• 주문 상세 스타일링
• 좋아요 내역

products의 형태가 [ [ ],[ ],[ ] ] 2중 배열이고 전체 그리드를 2개의 그리드로 나누어서
2중 map으로 홀짝(oddOrEven)에 대한 각각의 그리드를 적용

  <div className='odd'></div>
  <div className='even'></div>
  .... 반복

각 그리드 셀에서 사진의 크기가 넘치는 문제가 있었는데 a 링크에 height값을 부모의 값으로 상속시켜 해결