Vite로 React 프로젝트 시작하기 (ESLint, Prettier, tsconfigPaths)

💡 CRA 아닌 Vite 사용한 이유

리액트 프로젝트를 시작하는 가장 간결한 방법은 `CRA(Creat-React-App)`일 것이다.

기존에 번들러(여러 파일을 하나로 묶어주는 도구) 기반 개발은 소스 코드 업데이트 시 번들링 과정을 다시 거쳐야 한다. 때문에 소스 코드 갱신 시간이 오래 걸린다.

CRA의 webpack 기반이고, react 이외의 webpack, babel, eslint 등 복잡한 패키지를 알 필요가 없이 사용할 수 있어 간편하다.
CRA는 각 설정 파일들이 숨겨져 있어, eject 하지 않고 overriding 하려면 `craco`라는 패키지가 필요하다.

`Vite`는 ESbuild라는 자바스크립트 빌드 툴을 사용하는데, 이것이 webpack을 대체한다.
브라우저에서 제공하는 ES Module 및 네이티브 언어로 작성된 자바스크립트 도구 등을 활용해 문제를 해결해서 훨씬 빠르다.

1. Vite 프로젝트 생성

npm init vite 
cd [폴더명]
code .

`npm init vite`는 vite 프로젝트를 생성하는 간편한 명령어다!
순차적으로 프로젝트 이름, 프레임워크(VanillaJS, React, ...), variant(TypeScript 선택O/X)를 설정해준다.
프로젝트 이름을 설정하면 프로젝트명의 파일이 생성되므로 해당 폴더로 가서 vscode를 실행해준다.

2. 환경 설정

2.1 ESLint

• 파일 확장자 변경(json) : `.eslintrc` or `.eslintrc.json`
• 쌍따옴표도 읽으란 말이다! : `"quotes"`에 `"double"` 추가
• React를 선언했는데 사용하지 않았다는 오류 : `"react/react-in-jsx-scope": "off"` 추가

{
  "rules": {
        "quotes": ["error", "double", "single"],
        "no-duplicate-imports": "error",
        "no-console": ["warn", { "allow": ["warn", "error", "info"] }],
        "no-unused-vars": "error",
        "no-multiple-empty-lines": "error",
        "react/react-in-jsx-scope": "off"
  },
}

2.2 Prettier

• 패키지 설치 : `yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks`
• config 파일 생성 : `touch .prettierrc`
• 아래 내용을 추가해주자

  {
    "printWidth": 100,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "es5",
    "useTabs": false,
    "arrowParens": "always",
    "bracketSpacing": true,
    "bracketSameLine": false
  }

2.3 tsconfig paths

`tsconfigPaths`는 타입스크립트에서 경로 alias를 설정하기 위해 필요한 패키지다. 
타입스크립트를 Vite와 함께 사용할 때 타입스크립트 모듈을 확인하는 동작이 tsconfig.json의 baseUrl 및 paths 구성에 의존하는데, ESLint는 기본적으로 이 구성을 읽지 않는다.
ESLint가 프로젝트의 모듈 경로를 올바르게 확인하도록 Vite 구성 파일에서 `vite-tsconfig-paths` 플러그인을 사용할 수 있다.

• 패키지 설치 : `yarn add -D vite-tsconfig-paths`
• tsconfig.json : 기본적으로 내가 지정하지 않아도 src 폴더 내의 파일을 읽어오도록 설정하고,
  `@`가 있다면 해당 폴더 내 모든 파일을 의미하는 것임을 알 수 있도록 alias를 설정해주었다.

{
  "compilerOptions": {
   ...
      "jsx": "react",
      "baseUrl": "./src",
      "paths": {
        "@/*": ["./*"]
      },
   }
}

• vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
plugins: [react(), tsconfigPaths()],
});

 

3. Git Commit

환경 설정을 마쳤다면 잘 돌아가는지 확인해보자.
우선 내가 설치한 패키지들이 잘 굴러가는지 확인하기 위해 패키지를 다운받는다.
나는 npm 대신 yarn으로 패키지를 설치해주었다.

yarn install

 

 

패키지 설치 완료

설치가 완료되었다! 이제 스크립트를 실행시켜보자.

yarn run dev
// 혹은 yarn dev

 

정상적으로 실행된다면 내 repository에 커밋을 시켜주자.

Git CLI 

Github에서 repository를 생성하면 친절하게도 다음과 같은 명령어를 입력하라고 알려준다. 
나는 이미 md 파일이 있으니, 일부 명령어를 제거하고 실행해주었다.

echo "# test" >> README.md // 테스트 겸 실행
git init
git add README.md // 생략
git commit -m "first commit"
git branch -M main
git remote add origin [URL]
git push -u origin main

<Git CLI 참고>

• `echo "# test" >> README.md` : README 파일에 `# list-of-countries` 문자열 생성
• `git init` : 현재 디렉토리를 Git 저장소로 초기화
• `git add README.md` : README 파일 생성
• `git commit -m "first commit"` : `-m` 플래그는 커밋 메시지를 작성하기 위한 옵션
• `git branch -M main` : Git 저장소의 기본 브랜치를 "main"으로 변경
• `git remote add origin [URL]` : 원격 저장소 추가. Github에 있는 [URL] 저장소를 "origin(원격 저장소의 별칭)"이라는 이름으로 연결
• `git push -u origin main` : 현재 저장된 커밋을 원격 저장소로 업로드

참고 링크

• 차세대 번들러 비교 및 분석 (feat. webpack, rollup, esbuild, vite)]
• [Craco] Craco란?
• [React] vite로 react 프로젝트 설치
• [Vite] typescript 환경에서 path 설정하기