시작

CRA를 사용하지 않고 Vite를 사용하여 프로젝트를 시작하였다.

CRA(Create-React-App)은 손 쉽게 프로젝트를 시작할 수 있다.
리액트 관련 라이브러리와 패키지 등 설치가 다 되어있어 필요로한 라이브러리와 패키지만 다운 받으며 진행이 가능하다.
Vite를 선택한 이유는 내 블로그에 정리 해두었다.

• 우리 나만의 친환경 프로젝트는 React + Vite + TypeScript + ESLint + Prettier를 사용하기로 하였다.

1. Vite설치

npm : npm create vite@latest
yarn : yarn create vite

위 그림과 같이 프로젝트 명, 리액트, 타입스크립트를 선택해준다.
그 후 설치된 프로젝트 폴더에서 관련 패키지들을 설치해준다.

npm i

package.json을 보면 리액트, 타입스크립트, 비트, eslint가 잘 설치되어 있는걸 볼 수 있다.

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

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

2. 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에서 사용하는 Guide를 선택하였다.
npx install-peerdeps --dev eslint-config-airbnb

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

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

typescript와 호환이 되 도록 plugin을 설치한다.
npm i -D eslint-config-airbnb-typescript

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

타입스크립트를 추가 해줬기 때문에 tsconfig.json에서 추가해줘야 한다.
include에 .eslintrc.cjs를 넣어준다.

정리 :

• 타입스크립트 까지 추가가 되면 이제 eslint와 typescript가 서로를 인식되어 잘 작동한다.

• 다 설치하고 reload window를 하면 파일들에 빨간줄로 에러를 뱉어줄 것이다. => 안뜬다면 어디선가 문제가 생겼기에 처음부터 디버깅 필요
  => 뜬다면 : "ESLint: Fix all auto-fixable Problems" 실행해서 eslint설정대로 들여쓰기 등 자동으로 오류를 고쳐준다.

• 그리고 요즘 import React from 'react'를 지워도 상관없기 때문에 .eslintrc.cjs파일에서 rules를 추가 한후 'react/react-in-jsx-scope':false를 추가해주면 된다.
  

3. Prettier 설정

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

prettier를 설치했다면, .prettierrc.cjs파일을 새로 생성을하고 기본으로 많이 사용하는 셋팅을 해주면 된다.

그 다음 처음 설치해준 config와 plugin을 eslint에 추가해준다.

• plugins에 'prettier'추가해주고,
• extends에 'plugin:prettier/recommended' 추가해준다.

prettier는 이렇게 쉽게 끝이다.

4. ESLint와 Prettier사용 이유?

사용 이유는 간단하다. 혼자 개발할때는 크게 상관 없지만 보통 개발은 혼자가 아닌 협업으로 많이 진행된다.

서로서로 코드스타일이 다르고 놓치는 부분이 있기마련이다. 그렇기에 코드 스타일을 일관적으로 유지하면서 코드 퀄리티를 높이기 위해 사용한다.

참고

https://www.youtube.com/watch?v=cchqeWY0Nak
vs코드에서 포맷설정을 prettier로 하기