구동시키기

1. rootdirectory에서 터미널에npm install을 입력 하려 패키지를 인스톨
2. npm run start으로 스크립트를 실행시켜주세요!

파일구조를 나눈 원칙

1. itemList폴더 : 아이템리스트/장바구니에 사용되는 콤포넌트들을 정리
2. main폴더 : 렌딩페이지와 기본적으로 화면에 나타나야되는 sideBar,header콤포넌트를 정리
3. 각각 콤퍼넌트에 쓰이는 타입과 유틸 펑션들을 각각의 폴더에저장
4. 그외 전역에서 쓰거나 쓸법한 utils은 utils폴더에 저장(redux, getquery, colors 등등)

사용한 패키지와 사용이유

reduxjs/toolkit (+redux-logger)

1. 리덕스를 더욱더 쉽게 사용할 수 있도록 만들어진 라이브러리입니다.
2. Promise Middleware와 Thunk가 내장되어있습니다.
3. 때문에 리덕스환경을 너무나도 쉽게 만들수 있습니다.

redux 를 채택한이유
redux를 사용하면 logger를 사용하여 현제 어떤 액션이 일어났고
그로인해 바뀌기전에 state와 바뀐 state를 확인할 수있습니다.
이는 규모가 커지고 컴포넌트 트리구조가 복잡해질경우 꼭 필요한
기능이라고생각합니다.
사실 이번 과제 규모로는 context API가 적당하지만
29cm의 프로젝트는 분명 규모가 클것이라고 생각했기에 거기에 맞춰
채택하였습니다

react-icons

1. 많은 수의 아이콘들을 제공해줍니다.

react-router-dom (v6)

1. 콤포넌트들을 라우팅하기위해 사용했습니다

tailwind.css

1. 클래스기반의 css툴입니다 jit모드를 사용하여 생산성을 높였습니다.

craco (+cross-env)

1. tailwindcss를 사용하기위해 cra에서 webpack설정을 사용할 수있도록 하는 craco를 설치하였습니다.
2. cross-env는 테일윈드를 jit모드를 사용하려면 설치해주어야합니다.
   • sciprt에"start": "cross-env TAILWIND_MODE=watch craco start",

Convention을위한 툴/언어

1. eslint
2. prettier
3. typescript