<git bash>
필수 설치
- node/npm: https://nodejs.org  (by NVM / Volta)
 $> nvm install --lts
 $> nvm use v20.10.0
 $> nvm alias default v20.10.0
- npx: $> npx -v     # 없다면..
-      $> npm i npx -g
- vscode: https://code.visualstudio.com/download

기타
- React DevTools           # 리액트 개발자 도구
- yarn: npm i yarn -g      # brew install yarn
- vite: https://vitejs-kr.github.io/      
- git: https://git-scm.com/download 

<git bash>

vite    >= node v14.18 or LTS
$> yarn create vite <rbvite>
 # yarn create vite rbvite --template react-ts
 # npm init vite@latest rbvite  # in rb

$> cd rbvite
$> yarn          # npm i
$> yarn build    # npm run build
$> yarn dev //으로 실행

<vscode>
prettier
ESLint

<git bash>
$> yarn add -D eslint-plugin-react 
$> yarn add -D eslint-plugin-jsx-a11y # 접근성


<.eslintrc.cjs>

.eslintrc.cjs     bold 부분 수정!
module.exports = {
  env: { browser: true, es2021: true, node: true },
  extends: [
    'eslint:recommended', 'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:jsx-a11y/recommended',
  ],
  overrides: [],
  parserOptions: {      
    ecmaFeatures: { jsx: true },
    ecmaVersion: 'latest', sourceType: 'module',
  },
  plugins: ['react-refresh', 'react-hooks', 'jsx-a11y'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/jsx-uses-react': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    'react/no-array-index-key': 'error',
  },
  settings: {
    react: { version: 'detect' }, // for react version warnning
  },
};

<git bash>
install
$> yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
$> yarn prettier  # package.json > script > "prettier": "prettier --write .",


.eslintrc.cjs     bold 부분 추가!
export default {
  env: { browser: true, es2021: true, },
  extends: [
    …,
    'plugin:prettier/recommended',
  ],
  overrides: [],
  parserOptions: {      
    …
  },
  plugins: ['react', 'react-hooks', 'jsx-a11y', 'prettier']],
  rules: {
    …,
    'prettier/prettier': 'error',
    quotes: ['error', 'single', { allowTemplateLiterals: true }],
  },
  …
};

///
.prettierrc   파일 생성!
{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}
// prettier 기타
"endOfLine": "auto",
"tabWidth": 2,
"useTabs": false,
"printWidth": 100

<eslint.config.js>

import js from '@eslint/…
import react from 'eslint-plugin-react';
import prettier from 'eslint-plugin-prettier';
import eslintConfigPrettier from 'eslint-config-prettier';

export default tseslint.config(
    …
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      react, prettier,
    },
    settings: {
     react: { version: '18.3' }, // React version for react plugin
   },
    rules: {
      ...js.configs.recommended.rules, // ESLint rules
      ...react.configs.recommended.rules, // React rules
      ...react.configs['jsx-runtime'].rules, // JSX rules

      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'prettier/prettier': 'error',
    },
  },
  eslintConfigPrettier
);

<eslint.config.js>
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    …
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      react,
      prettier,
      'jsx-a11y': jsxA11y,
    },
    settings: {
      react: { version: '18.3' }, 
    },
    rules: {
      ...
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'prettier/prettier': 'error',
      'jsx-a11y/alt-text': 'error',
    },
  },
  eslintConfigPrettier
);