1. 프로젝트 생성
npm create vite@latest
2. 프로젝트 생성 선택
react -> typescript + swc 선택
3. 테일윈드 설치
<https://tailwindcss.com/docs/installation/using-vite> (참조)
index.css 에
@import "tailwindcss"; <- 테일윈드 등록
@custom-variant dark (&:where(.dark, .dark *)); <- 다크모드 등록
@layer base { .dark{ color-schema: dark; } } <- 다크모드 (시스템UI) 적용
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 설치
npx eslint --init (이미 기본적으로 eslint 가 설치되어 있으므로 초기화 명령어를 수행)
✔ How would you like to use ESLint? · problems -> 최대한 체크 해주는 걸 선택
✔ What type of modules does your project use? · esm -> 모듈 방식을 선택(최신 문법)
✔ Which framework does your project use? · react -> 프래임워크 선택
✔ Does your project use TypeScript? · typescript -> typescript 는 항상 사용 하므로
✔ Where does your code run? · browser -> 브라우저 실행 선택
✔ Would you like to install them now? · No / **Yes**
✔ Which package manager do you want to use? · npm
5. prettier 설치
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
+ 리덕스, axios 의존성 설치
npm install @reduxjs/toolkit react-redux axios jwt-decode react-router-dom
yarn add --dev @types/react-redux @types/redux-persist @types/react-router-dom
+ 바이트 테스트 설치
npm install --save-dev vitest
///////////// airbnb 버전 이슈로 사용 x ////////////////
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 파일 생성 후 기본 설정
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
"quoteProps": "as-needed",
"overrides": [
{
"files": "*.ts",
"options": {
"parser": "typescript"
}
},
{
"files": "*.tsx",
"options": {
"parser": "typescript"
}
}
]
}
.eslint.cjs 기본설정(신)
import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginPrettier from 'eslint-plugin-prettier';
import configPrettier from 'eslint-config-prettier';
/** @type {import('eslint').Linter.Config[]} */
export default [
{ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
{ languageOptions: { globals: globals.browser } },
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
{
rules: {
// 리액스 19.0 이상에서는 기본 문법에 리액트 import 가 없다 19.0 대응
'react/react-in-jsx-scope': 'off',
},
},
// Prettier 플러그인을 설정에 추가
{
plugins: {
prettier: pluginPrettier,
},
rules: {
'prettier/prettier': 'error',
},
},
// Prettier와 충돌할 수 있는 ESLint 규칙을 비활성화
configPrettier,
];
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 디렉터리를 기준으로 절대 경로로 설정
},
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}