[01.20] 리액트를 이용한 Task 생성 앱 만들기

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

 - Board List, Llist Container 생성

 - 수정, 삭제, 로그 기능 추가

 - Drag And Drop 기능 생성

 - 로그인 페이지 생성

이렇게 생긴 Task 정리 앱을 만들어보려고 한다!

마치 Trello 같이 생겼다..!

리액트를 이용해서 만들 예정이기 때문에 저번 Todolist 만든 것과 같이 vite 엔진을 이용할 것이다.

1) npm init vite
2) React 선택 / typescript 선택
3) npm i
4) npm run dev

이 순서대로하면 문제없이 잘 만들어진다!

전체적인 구조는 이렇게 생겼다. 저번 todolist 보다 좀 더 큰 규모의 프로젝트가 될 것 같은 느낌이다..

 

그리고 필요한 패키지들이 꽤나 많은 편이라 다 설치해야만 했다.

1) reduxjs/toolkit
2) redux
3) clsx
4) @vanilla-extract/css
5) @vanilla-extract/css-utils
6) @vanilla-extract/vite-plugin
7) react-icons
8) uuid
9) react-beautiful-dnd
10) react-redux

총 10개의 패키지를 설치했다.

 

Redux는 상태관리 라이브러리이다. (선택사항)

State와 Props를 이용해서 상태를 여러 컴포넌트와 공유가 가능하다.

앱이 점점 커지다보면 관리가 힘들어지고, 소스코드가 지저분해진다.

이런 걸 해결하기 위해 Redux를 사용한다고 한다.

 

Redux의 Flow는,

Action, Dispatch => Reducer 함수 type return => Redux Store State => React Component Rerendering

Redux는 흐름이 한 방향으로만 흐른다. 즉, UniDirectioanl 하다. 라고 말한다.

Toolkit에서는 Reducer를 생성하려면 Slice가 있어야한다.

그래서 boardSlice와 loggerSlice, modalSlice 파일을 만들었다.

 

그리고 전역에서 사용이 가능한 스타일을 생성해주었다.

@vanilla-extract/css를 사용한 스타일이다.

이렇게 만들어두면 vars.color.main 이런 식으로 스타일 지정이 가능하다.

굳이 해당 색상을 외우고 있지 않아도, 미리 지정한 main 또는 mainDarker 를 골라서 사용할 수 있다.

폰트사이즈를 바꾸고싶다면 vars.fontSize.T1 이렇게 사용이 가능한 것이다.

App.tsx 파일은 일단 간단하게 이렇게 수정을 해주었다.

위의 App.css.ts에서 export 해줬기 때문에 appContainer, board, buttons를 사용할 수 있게 된다.