12주차 - 1

task 앱 만들기

 

파트 1 - 태스크 정리앱 만들기 시작

2 - board list, list container 생성하기

3 - 수정, 삭제 그리고 로그 기능 추가하기

4 - 드래그 앤드 드롭 기능 생성하기

5 - 로그인 페이지 생성하기

 

설치

 npm init vite

 

각각 옵션 선책 후 npm i 까지 해주기

 

 

실행

"scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

 스크립트에 dev라고 되어 있으므로 

 

명령어 dev 사용

npm run dev

 

 

 

- scr 경로 안에 components, types, hooks, store 폴더 생성

 

 

필요한 패키지

npm install @reduxjs/toolkit redux clsx @vanilla-extract/css @vanilla-extract/css-utils @vanilla-extract/vite-plugin  react-icons uuid react-beautiful-dnd

 

 

Redux: 상태 관리 라이브러리 (선택사항)

State, Props    상태를 여러 컴포넌트와 공유

앱이 커지면 => 관리 힘듦, 소스코드 지저분

==> Redux

 - Flow

    : 액션(객체) dispatch(전달, 함수) => Reducer 함수 타입 return => Redux Store State => React Componenet가 리랜더링

 

Toolkit:  Redux 를 위해 슬라이스 필요