1. 프로젝트 생성
npm create vite@latest

2. 프로젝트 생성 선택
react -> typescript + swc 선택

3. 테일윈드 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
postcss.config.js 파일 생성 및 기본설정 수정
tailwind.config.js 기본설정 수정

OR

리액트부트스트랩 설치
npm install react-bootstrap bootstrap
먼저 App.js 또는 index.js 에 bootstrap 라이브러리를 import합니다.
main.tsx OR app.tsx 상단에 import 'bootstrap/dist/css/bootstrap.min.css'

4. eslint 버전 변경
지금은 8.53.0 으로 하니까 된다.

5. airbnb 설치 (vite 에 이미 eslint 가 설치되어 있음)
npm install eslint-config-airbnb
npm install eslint-config-airbnb-typescript --save-dev
npm info "eslint-config-airbnb@latest" peerDependencies 후 의존성들 데브 디펜던시에 추가

6. eslint-plugin-prettier 설치
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

6. .prettierrc 파일 생성 후 기본 설정

.prettierrc 기본 설정

{
  "printWidth": 100,
  "tabWidth": 2,
  "tabs": false,
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

.eslintrc.cjs 기본설정

module.exports = {
  parser: '@typescript-eslint/parser', // ESLint 파서를 지정
  parserOptions: {
    ecmaVersion: 2021, // ECMAScript 12 버전을 사용
    sourceType: 'module', // ES 모듈 시스템을 사용
    ecmaFeatures: { jsx: true } // JSX 문법을 사용
  },
  extends: [
    'airbnb', // Airbnb에서 제공하는 ESLint 규칙을 추가
    'airbnb/hooks', // Airbnb에서 제공하는 ESLint 규칙을 추가
    'plugin:import/errors', // import 시 발생하는 오류에 대한 ESLint 규칙을 추가
    'plugin:import/warnings', // import 시 발생하는 경고에 대한 ESLint 규칙을 추가
    'plugin:import/typescript', // import 시 발생하는 오류에 대한 ESLint 규칙을 추가
    'plugin:@typescript-eslint/recommended', // @typescript-eslint/eslint-plugin에서 제공하는 규칙을 추가
    'plugin:react/recommended', // eslint-plugin-react에서 제공하는 규칙을 추가
    'plugin:jsx-a11y/recommended', // eslint-plugin-jsx-a11y에서 제공하는 규칙을 추가
    'plugin:prettier/recommended', // eslint-plugin-prettier에서 제공하는 규칙을 추가
  ],
  plugins: [
    "@typescript-eslint", // @typescript-eslint/eslint-plugin에서 제공하는 규칙을 추가
    "react", // eslint-plugin-react에서 제공하는 규칙을 추가
    "jsx-a11y", // eslint-plugin-jsx-a11y에서 제공하는 규칙을 추가
    "import", // eslint-plugin-import에서 제공하는 규칙을 추가
    "react-hooks", // eslint-plugin-react-hooks에서 제공하는 규칙을 추가
    "prettier", // eslint-plugin-prettier에서 제공하는 규칙을 추가
    "react-refresh" // eslint-plugin-react-refresh에서 제공하는 규칙을 추가
  ],
  env: {
    browser: true, // 브라우저 환경에서 사용되는 전역 변수를 사용하도록 ESLint 규칙을 추가
    es2021: true, // ES12 환경에서 사용되는 전역 변수를 사용하도록 ESLint 규칙을 추가
    node: true // Node.js 환경에서 사용되는 전역 변수를 사용하도록 ESLint 규칙을 추가
  },
  rules: {
    'prettier/prettier': 'error', // Prettier에 의한 포맷 오류는 ESLint 오류로 표시
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }], // tsx, jsx 확장자 파일에 대한 ESLint 규칙을 추가
    'import/extensions': [ // import 시 확장자를 붙이지 않아도 되도록 ESLint 규칙을 추가
      'error', // 오류 수준으로 설정
      'ignorePackages', // node_modules의 패키지들은 확장자를 붙이지 않아도 되도록 설정
      {
        ts: 'never', // ts, tsx 파일은 확장자를 붙이지 않아도 되도록 설정
        tsx: 'never', // ts, tsx 파일은 확장자를 붙이지 않아도 되도록 설정
        js: 'never', /// js, jsx 파일은 확장자를 붙이지 않아도 되도록 설정
        jsx: 'never', // js, jsx 파일은 확장자를 붙이지 않아도 되도록 설정
      },
    ],
    'react/jsx-props-no-spreading': 'off', // props로 전달받은 객체를 컴포넌트의 props로 전달할 때 spread 연산자를 사용할 수 있도록 ESLint 규칙을 무시
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 함수의 반환 타입을 명시하지 않아도 되도록 ESLint 규칙을 무시
    '@typescript-eslint/no-explicit-any': 'off', // any 타입을 사용할 수 있도록 ESLint 규칙을 무시
    'react/prop-types': 'off', // props의 타입을 명시하지 않아도 되도록 ESLint 규칙을 무시
    'react/react-in-jsx-scope': 'off', // React를 import하지 않아도 되도록 ESLint 규칙을 무시
    'react/jsx-uses-react': 'off', // React를 import하지 않아도 되도록 ESLint 규칙을 무시
    'react/jsx-uses-vars': 'off', // 사용되지 않는 변수를 허용하지 않는 ESLint 규칙을 무시
    'no-use-before-define': 'off', // 선언 전에 변수를 사용할 수 있도록 ESLint 규칙을 무시
    '@typescript-eslint/no-use-before-define': ['error'], // 선언 전에 변수를 사용할 수 있도록 ESLint 규칙을 무시
    'import/prefer-default-export': 'off', // export default를 사용하지 않아도 되도록 ESLint 규칙을 무시
    'react-refresh/only-export-components': [ // React Fast Refresh를 사용하기 위한 설정
      'warn', // 경고 수준으로 설정
      { allowConstantExport: true }, // 상수 형태로 export 허용
    ],
    'no-unused-vars': 'off', // 사용되지 않는 변수를 허용하지 않는 ESLint 규칙을 무시
    '@typescript-eslint/no-unused-vars': 'warn', // 사용되지 않는 변수에 대한 경고를 허용
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // 개발 의존성 패키지를 import할 수 있도록 ESLint 규칙을 무시
    'import/no-unresolved': 'off', // import 시 경로를 분석하지 못하는 경우가 있어서 ESLint 규칙을 무시
    'no-shadow': 'off', // 변수의 중복 선언을 허용하지 않는 ESLint 규칙을 무시
  },

  root: true, // root:true 설정을 추가하면 해당 설정 파일이 루트 설정 파일임을 명시

  ignorePatterns: ['dist', '.eslintrc.cjs'], // ESLint에서 무시할 파일을 설정

  settings: { // ESLint에게 사용되는 환경을 설정
    react: { version: 'detect' }, // React의 버전을 자동으로 감지하도록 설정
    'import/resolver': { node: { paths: ['src'] } }, // import 시 src 디렉터리를 기준으로 절대 경로로 설정
  },

}

postcss.config.cjs 기본설정

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js 기본설정

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

현재 package.json

{
  "name": "react-vite",
  "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": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.53.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

리액트네이티브