협업 (2) 썸네일형 리스트형 [React] React(Typescript)에 ESLint/Prettier/Airbnb Rule 적용하기 + Husky 코딩스타일은 팀마다 다르지만 이를 개인에게 지키도록 하는 것은 한계가 있고, 강제성이 없기에 취약합니다. 그리고 코딩 스타일과 관련한 논쟁이 이어지다 보면 정작 신경 써야 할 프로젝트에 에너지를 쏟지 못하는 상황이 발생합니다. 이러한 불필요한 에너지 소모를 줄이기 위해 코딩 스타일 자동화 툴이 필요합니다. 처음 설정은 복잡하지만 한번 적용해 두면 추후에 적용하기 쉽고, 처음에 적용해 둔 것이 지속적인 개발 생산성 향상에 도움이 됩니다. 협업 시 많이 사용되고 있는 ESLint Airbnb rule 세팅을 해보도록 하겠습니다. 1. CRA 먼저 터미널을 키고 create-react-app을 통해 Typescript 리액트 프로젝트를 만들어 줍니다. npx create-react-app [프로젝트 이름] -.. [Project / React] CRA부터 Prettier, ESLint, Husky 설정 실습(Typescript) 1. CRA 타입스크립트를 기반으로 하는 리액트 프로젝트를 만들기 위해서 터미널을 키고 명령어를 작성해줍니다. npx create-react-app [프로젝트 이름] --template typescript 2. ESLint eslint : eslint 라이브러리 @typescript-eslint/eslint-plugin : TypeScript관련 linting 규칙을 처리하는 플러그인 @typescript-eslint/parser : Typescript 코드에 대한 *AST 생성 ESLint 설정을 위해 세가지 라이브러리를 설치합니다. npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev 그 후 ro.. 이전 1 다음
