Vite로 React 시작하기

Vite에 대한 설명 은 이글에서 확인

 

Vite 템플렛 프로젝트 생성

---

템플릿 타입은 아래 그림 및 여기 참조

 

yarn

yarn create vite [프로젝트 이름] --template [템플릿 이름]
yarn create vite test-app --template react-ts

 

npm

npm create vite [프로젝트 이름] --template [템플릿 이름]
npm create vite test-app --template react-ts

 

vite로 react 템플릿으로 프로젝트 생성 후 모듈 설치후 react 실행

 

yarn

yarn install
yarn dev

 

npm

npm install
npm dev

 

실행 화면

 

환경 설정(VS code)

---

ESLint 적용

---

ESLint는 Vite로 프로젝트를 생성하면 자동으로 .eslintrc.cjs 파일을 만들어주는 듯 하다.

여기에 플러그인 하나를 추가하고 Extension에 추가해주면 된다.

yarn add -D @typescript-eslint/parser eslint-import-resolver-typescript

 

위 명령어로 설치 후 .eslintrc.cjs파일에 extends, plugins에 추가해주면 된다.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended' // plugin 추가
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh', 'import'], // import 추가
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

 

VS code Extension 추가

 

*ESLint v9.0.0 부터는 eslint.config.js라고 합니다. 만약 .eslintrc.* 파일을 사용중이라면 마이그레이션이 필요합니다.

공식 가이드에 따르면 아래 명령어로 마이그레이션 할 수 있다고 합니다.

npx @eslint/migrate-config .eslintrc.*

 

마이그레이션 공식 가이드

Configuration Migration Guide - ESLint - Pluggable JavaScript Linter

아래 명령어로 eslint에 따르지 않는 목록을 확인할 수 있습니다.

npx eslint .

 

또한 해당 마이그레이션 진행 후 발생한 버그에 대해서 저는 추가로 아래 패키지를 설치하고 추가한 플러그인(import/recommended)을 제거했습니다.

yarn add -D @eslint/compat
yarn add -D eslint-plugin-prettier

 

Prettier 적용

---

아래 명령어로 설치하면 된다.

 

yarn add -D @typescript-eslint/parser eslint-import-resolver-typescript

 

이후 .prettierrc 라는 파일을 생성 후 원하는 설정을 추가하면 된다 필자는 아래와 같이 작성했다.

설정 값은 여기 참고

{
  "printWidth": 120,
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false
}

 

Prettier를 ESLint와 같이 사용할 경우 .eslintrc.cjs파일에 plugins에 추가해주어야 한다.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended'
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh', 'import', 'prettier'], // prettier 추가
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

VS code Extension 추가

Extension 추가 후 Ctrl + , 키를 눌러 설정 창을 열어 default formatter를 검색해 Prettier - code formatter로 변경

 

하지만 언어별로 설정하고 싶은데 ctrl + shift + p 로 ">settings json" 를 검색해서 settings.json을 열고 아래와 같이 설정해주면 된다, 필자는 Python을 black formatter로 했었기에 따로 설정해줬다.

자세한건 검색하면 잘 나온다.

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  ...

  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    }
  },
  
  ...

 

공식 설명 페이지에 잘 나와 있다.

 

마지막

---

해당 기능들을 자동화하기 위해 package.json에 format, lint와 같은 코드를 삽입합니다.

이러한 스크립트를 추가함으로써 자동으로 코드 포맷팅, 린팅 작업을 자동으로 진행할 수 있습니다.

 

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    
    ...
    
    "format": "prettier --write --cache .",
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint src/**/*.{ts,tsx,js,jsx} --fix"
  },