프로젝트 시작하기: Vite + React in TypeScript + ESLint + Prettier

첫 팀 프로젝트에서 CRA를 사용하지 않고 Vite를 사용하여 프로젝트를 세팅해보았다.

 

CRA(Create-React-App)는 여러 라이브러리나 패키지 설치 및 설정을 따로 할 필요 없이 바로 시작할 수 있는 환경을 제공해주기 때문에 간편하다는 장점이 있다. 하지만 사용하지 않는 모듈들도 많이 담고 있어 앱 자체가 크고 무겁다는 단점이 있다. 또한 번들러로 webpack을 사용하는데, webpack은 다른 번들러에 비해 속도가 느리다.

반면 Vite는 CRA보다 더 빠른 개발 환경과 효율적인 프로덕션 빌드를 제공한다.

https://juhyojin.tistory.com/2

Vite를 사용하는 이유

 

우리팀은 React와 TypeScript로 개발하고, 매끄러운 협업을 위해 ESLint와 Prettier를 사용하기로 했다.

 

 

Vite로 React in TypeScript 프로젝트 생성

npm create vite@latest

yarn을 쓴다면 yarn create vite.

위와 같이 프로젝트 이름 입력해주고, React, TypeScript를 선택해주면 프로젝트가 생성된다.

그럼 이제 프로젝트 폴더로 가서 패키지들을 설치해준다.

npm i

package.json을 보면 dependencies에 react, react-dom, 그리고 devDependencies에 typescript, eslint, vite가 있는 것을 확인할 수 있다.

나머지 파일들을 잠깐 살펴보자면,

• tsconfig.json: 우리가 작성하는 React 코드가 웹 브라우저에서 동작할 수 있도록 JavaScript로 변환하기 위한 TypeScript 설정 파일
• tsconfig.node.json: 컴퓨터에서 Node.js를 통해 실행되는 Vite가 TypeScript로 설정될 수 있게 한다.
• vite.config.ts: Vite의 설정 파일로, Vite의 동작 수정, 플러그인 설정 등의 여러 설정을 할 수 있다.

 

그다음은 프로젝트 나름, 개인 기호 나름이지만, 

index.css 파일 내용(글로벌 스타일링)을 지우고, App.tsx에서도 쓸데없는 부분을 지울 수 있다.

function App() {
  return (
    <div>
      Hello World
    </div>
  )
}

export default App

 

또 App.css, assets 폴더에 있는 react.svg 파일, index.html에 있는 <link rel="icon" ... / > 파비콘, public 폴더에 있는 vite.svg를 삭제할 수 있다.

참고로 asset은 번들링 되어야 한다면, 즉 로더를 통해서 압축되거나 변환되거나 해야 한다면 assets 폴더에, 그게 아닌 어떠한 processing도 필요하지 않으면 바로 public 폴더에 넣어도 된다.

 

 

ESLint 설정

npx eslint --init

ESLint를 초기 실행해서 다음과 같이 선택하여 설정해줄 수 있다.

• How would you like to use ESLint? To check syntax and find problems
• What type of modules does your project use? JavaScript modules (import/export)
• Which framework does your project use? React
• Does your project use TypeScript? Yes
• Where does your code run? Browser
• What format do you want your config file to be in? JavaScript
• The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest. Would you like to install them now? Yes
• Which package manger do you want to use? npm

 

ESLint에는 여러 스타일 가이드들이 있는데, Airbnb Style Guide가 대표적이다.

npx install-peerdeps --dev eslint-config-airbnb

eslintrc.cjs파일로 가서, extends에 "eslint:recommended"를 지우고 "airbnb", "airbnb/hooks"를 넣는다.

그럼 바로 빨간줄이 많이 생기는 것을 볼 수 있다. 들여쓰기 등 airbnb 스타일과 맞지 않아서 그렇다.

"eslint:recommended",를 지우고

Command + Shift + p 를 눌러 "ESLint: Fix all auto-fixable Problems"를 실행해주면 airbnb 설정대로 바뀌면서 빨간줄이 사라진다.

 

그 다음은 typescript에도 적용이 될 수 있도록 plugin을 설치해준다.

npm i -D eslint-config-airbnb-typescript

eslintrc.cjs 파일에서 extends에 'airbnb-typescript'를 넣고, parserOptions에 project: './tsconfig.json'를 넣어준다.

그 다음 tsconfig.json 파일로 가서 "include"에 ".eslintrc.cjs"를 넣어준다.

이로써 eslintrc.cjs파일은 typescript를, typescript는 eslintrc.cjs 파일을 서로 인식하며 같이 동작할 수 있다.

깔끔한 마무리를 위해 reload window를 하고, main.tsx 등 파일을 들어가서 빨간줄이 있다면 그때마다

Command + Shift + p, "ESLint: Fix all auto-fixable Problems"를 실행해줌으로써 오류들을 자동적으로 고칠 수 있다.

 

다만 App.tsx 파일은 여전히 빨간줄이 남아있는 것을 볼 수 있는데, 아까 App.tsx 파일 초기화 하면서  import React from 'react';를 지웠기 때문에 생기는 오류이다. 요즘 React에서는 안 해도 되는데 eslint는 그걸 모르기 때문에 따로 그 규칙을 무효화해줘야 한다. 

이때 Command + . 을 눌러주면 그 라인 안에서만 규칙 무효화, 그 파일 전체에서 규칙 무효화, 등을 선택할 수 있는데, 만약 프로젝트 전체에 적용하고 싶다면, eslintrc.cjs 파일에서 rules에 'react/react-in-jsx-scope': 0을 넣어주면 된다.

그럼 ESLint 기본 설정은 끝!

 

 

Prettier 설정

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

설치 후 .prettierrc.cjs 파일을 새로 만들어 준다음 기본 prettier 세팅을 넣어준다.

들여쓰기는 얼마나 할 건지, 세미콜론 넣을지 말지, 작은 따옴표할지 큰 따옴표 할지 등 취향대로 설정할 수 있다.

 

그 다음 prettier 플러그인을 추가해준다.

eslintrc.cjs 파일에 plugins에 'prettier'을 넣어주고, extends에 'plugin:prettier/recommended'를 맨 밑에 넣어준다.

최종 eslintrc.cjs 파일 모습! 

 

이로써 세팅 끝! 

앞으로 빨간줄을 본다면, Command + Shift + p 로 ESLint 오류들을 고쳐주거나, reload window를 해주면 대부분 고쳐질 것이다.

 

 

 

 

참고

https://www.youtube.com/watch?v=cchqeWY0Nak 

https://www.npmjs.com/package/eslint-config-airbnb

eslint-config-airbnb

https://www.npmjs.com/package/eslint-config-airbnb-typescript

eslint-config-airbnb-typescript