프로젝트 세팅

• vite + React + TS
• yarn create vite hit --template react-ts

• emotion + tailwind → daisy UI(추천, 프로젝트 시간없어서 좋을듯)
• yarn add @emotion/react @emotion/styled
• yarn add -D tailwindcss postcss autoprefixer
• yarn tailwindcss init -p
• yarn add daisyui
• <h1>, <li>와 같은 시멘틱 태그의 스타일 적용이 안되는 이유 : https://tailwindcss.com/docs/preflight

• recoil
• yarn add recoil

• prettier eslint
• yarn add prettier eslint-plugin-prettier eslint-config-prettier
eslint-typescript-react recommend 세팅법
eslint-plugin-react
React 문법 규칙들을 사용
typescript-eslint/parser
TypeScript 파서를 사용
typescript-eslint/eslint-plugin
typescript-eslint의 규칙들을 사용
 
eslint-config-prettier
ESLint가 원래 formatting 기능이 있기 때문에 prettier와 겹칠 수 있음 → 충돌을 피하기 위해 이 패키지를 통해 ESLint의 formatting 기능을 삭제함
---
참고
• https://yrnana.dev/post/2021-09-02-eslint
• https://gingerkang.tistory.com/98

• nvm - node lts버전으로 확정
• 각자 버전 적기
• 건오: v16.18
• 수화: v16.16.0
• 명재, 별: v18.13.0
• 천욱: v18.2.0

• husky lint-staged (자동화 붙이는 것: git pre-commit) → (제안) lint CI

🛠️ 기술 스택

1. 타입스크립트

2. React - vite

3. 상태관리 → recoil

4. API → Axios

5. CSS → tailwindCSS + emotion + DaisyUI

6. 코딩스타일 → eslint, prettier, husky, lint-staged

7. 배포 → netilfy