기술 스택

Untitled

{
  "name": "billage",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@splidejs/react-splide": "^0.7.12",
    "@splidejs/splide": "^4.1.4",
    "apexcharts": "^3.42.0",
    "axios": "^1.5.0",
    "firebase": "^10.4.0",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-datepicker": "^4.18.0",
    "react-dom": "^18.2.0",
    "react-modal": "^3.16.1",
    "react-router-dom": "^6.16.0",
    "recoil": "^0.7.7",
    "recoil-persist": "^5.1.0",
    "styled-components": "^6.0.8"
  },
  "devDependencies": {
    "@types/node": "^20.6.2",
    "@types/react": "^18.2.22",
    "@types/react-datepicker": "^4.15.0",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-tsconfig-paths": "^4.2.1"
  }
}

설치

0. Node 설치(맞는 버전 설치)

Node.js

1. Vite 설치

Vite

2. React + TypeScript

npm create vite@latest [프로젝트 명] --template react-ts

Untitled

3. Router, Recoil, Styled-Component, Axios