React의 매력은 Virtual Dom, Component기반 개발
Typescript
일단 nodejs와 npm 혹은 yarn을 설치해야 한다. node와 npm이 설치된 지 확인하기 위해서는 -v 옵션으로 확인할 수 있다.(npm은 node 설치 시 함꼐 설치된다.)
node(npm)이 설치되었다면 npm i -g create-react-app
명령어를 통해 create-react-app을 설치한 후 아래의 명령어를 통해 프로젝트를 생성한다.
//typescript 사용 시
npx create-react-app [프로젝트명] --template=typescript
//Typescript를 미사용
npx create-react-app [프로젝트 명]
프로젝트 생성 성공 시 출력
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint
eslint + @typescript-eslint/parser + @typescript-eslint/eslint-plugin 설치
플러그인 | 설명 |
---|---|
eslint-plugin-import | ES6+ import지원 플러그인 |
eslint-plugin-html | html파일에 포함된 인라인 자바스크립트 지원 플러그인 |
@typescript-eslint/parser | ESTree호환 AST를 생성하는 타입스크립트 파서 |
@typescript-eslint-plugin | Typescript-eslint의 규치을 사용할 수 있는 플러그인 |
설치 후 npx eslint --init
명령어를 실행하여 eslint 설정파일을 추가한다. 명령어 실행 시 여러 문답사항이 나온다.
How would you like to use ESLint?
To check syntax only //문법 체크만
To check syntax and find problems //문법 체크 받고 문제점 발견까지
To check syntax, find problems, and enforce code style // 문제점 발견 받고 개발 스타일 수정까지
What type of modules does your project use? //프로젝트에서 사용 할 모듈 타입
JavaScript modules (import/export)
CommonJS (require/exports)
None of these
Which framework does your project use? //프로젝트에서 사용할 프레임워크
React
Vue.js
None of these
Does your project use TypeScript? › No / Yes //타입스크립트 사용 시 YES!!
Where does your code run? //node 혹은 브라우저 어디에서 코드가 돌아가는 지
Browser
Node
How would you like to define a style for your project? //프로젝트 스타일 선택
Use a popular style guide //보편적인 스타일 가이드
Answer questions about your style //자신의 커스탐 스타일
What format do you want your config file to be in? //config파일 확장자 선택
JavaScript
YAML
JSON
생성된 .eslintrc.js파일
아까 설치한 parser 및 eslint-plugin 설정 추가
(선택)package.json 파일의 script 내 요소 추가
"lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
"lint:fix": "eslint --fix \"./src/**/*.{ts,tsx,js,jsx}\""
설정한 lint 실행 시 eslint 문법에 어긋난 코드를 알려준다.
코드 컨벤션 중 airbnb를 사용하기 위해 eslint-config-airbnb (Typescript를 사용해야하는 경우 eslint-config-airbnb-typescript 포함)를 설치한 후 .eslintrc.js의 extends 내 airbnb, airbnb-typescript를 추가한다.
플러그인 | 특징 |
---|---|
eslint-config-airbnb | airbnb의 .eslintrc를 제공하는 플러그인(React 플러그인 포함) |
eslint-config-airbnb-base | airbnb의 .eslintrc를 제공하지만 React 플러그인이 포함되지 않는다. |
eslint-config-airbnb-typescript | Typescript를 지원하는 airbnb의 ESLint를 제공 |
npm i --save-dev eslint-config-airbnb eslint-config-airbnb-typescript
추가한 후 npm run lint 실행 시 airbnb 가 적용된다.
prettier와 eslint를 사용하기 위해서는 prettier와 eslint와 설정이 같아 발생하는 충돌을 방지하기 위해 eslint-config-prettier을 다운받은 후 extends에 prettier을 추가한다.
플러그인 | 설명 |
---|---|
eslint-config-prettier | ESLint와 Prettier 설정 중 출동하는 부분을 비활성화하는 플러그인 |
eslint7.0 이하일 경우 오류가 발생하기 때문에 npm i eslint@7 --save-dev 명령어로 eslint7을 설치해야 한다. | |
eslint-plugin-prettier | Prettier가 ESLint규칙으로 검사를 하다가 발생한 오류를 ESLint오류로 출력하는 기능을 가진 플러그인 |
eslint-plugin-prettier의 공식문서를 보면 이 플러그인을 완벽하게 작동하기 위해서는 eslint의 모든 formatting 규칙을 꺼야한다. |
setting에서 default Formatter을 prettier로 설정해준다.
공식문서에서 https://github.com/prettier/eslint-plugin-prettier
프리티어 규칙과 충돌하는 기존 ESLint 규칙을 비활성화 하는 설정을 활성하 하기 위해
["plugin:prettier/recommended"] 이렇게 바꾸는걸 권장하네요
extends: ["plugin:react/recommended"]
⇒
["plugin:prettier/recommended"]
이렇게 변경되야 할것 같습니다.