Vite + React + Zustand + Eslint Boilerplate

Getting Started

 > npx react-vite-todo-boilerplate my-project
 > yarn && yarn install
 > yarn dev && vite 

or

> git clone https://github.com/GDSC-Daejin/react-vite-todo-boilerplate
> yarn && yarn install
> yarn dev && vite

TODO의 추가, 삭제, 업데이트 같은 함수는 모두 구현이 되어있으나 수정기능의 경우 Component에 적용해두지 않았습니다.

Stack

• React.js + TypeScript
• Vite
• Eslint
• Prettier
• Styled-Components (CSS in JS)
• Zustand (상태관리)

Folder Structure

├── package-lock.json //프로젝트 초기
├── package.json // 프로젝트 정보가 담긴 공간입니다.
├── src
│   ├── App.tsx
│   ├── README.md
│   ├── apis //서버 통신을 위한 파일을 두는 폴더입니다.
│   ├── assets //사진, 아이콘을 저장하는 폴더입니다.
│   ├── components //버튼, 인풋 같은 재사용을 해야하는 컴포넌트를 저장하는 폴더입니다.
│   │   └── TodoCard.tsx
│   ├── fonts //폰트 저장소입니다.
│   ├── layout //페이지 레이아웃을 저장하는 폴더입니다.
│   │   ├── home.styled.ts // 홈 레이아웃 스타일을 저장하는 파일입니다.
│   │   ├── home.tsx //홈 레이아웃 파일입니다.
│   │   └── index.tsx //route를 위한 파일입니다.
│   ├── main.tsx
│   ├── pages // 페이지를 저장하는 폴더입니다.
│   │   └── Home
│   │       └── index.tsx
│   ├── store // 상태를 저장하는 폴더입니다.
│   │   └── todoStore.ts
│   ├── styles // 스타일을 저장하는 폴더입니다.
│   │   ├── declare.ts //커스텀 스타일을 사용하기 위한 파일입니다.
│   │   ├── fontSize.ts // 폰트 크기를 저장하는 파일입니다.
│   │   ├── globalStyles.ts // 전역 스타일을 저장하는 파일입니다.
│   │   ├── layouts.ts // 레이아웃을 저장하는 파일입니다.
│   │   ├── lightColors.ts // 색상을 저장하는 파일입니다.
│   │   ├── theme.ts // 각 에셋을 합쳐주는 파일입니다.
│   │   └── windowSize.ts // 윈도우 크기를 저장하는 파일입니다.
│   ├── types // 타입을 저장하는 폴더입니다.
│   │   └── todo.d.ts
│   ├── utils // 기타 커스텀 파일을 저장하는 폴더입니다.
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts