# es-lint
ES Lint
ES Lint 소개 ES Lint는 자바스크립트 코드의 품질을 유지하기 위한 툴이다. 코드에서 잠재적인 오류나 버그, 스타일 가이드, 컨벤션 설정에 대한 위반을 찾아내어 개발자들이 이를 수정할 수 있도록 도와준다. ES Lint는 많은 린팅 툴 가운데 가장 많이 사용되고 있는 툴이다. ES Lint의 장점 ES Lint를 사용 시 장점으로는 첫째, 코드 품질을 향상시킨다. ES Lint 를 설정해놓으면 알아서 틀린 부분을 찾아내기 때문에, 개발자는 컨벤선 오류에 신경쓰지 않고 작업을 할 수 있다. 둘째, 코드 리뷰를 향상시킨다. 팀 문화에 맞춰 ES Lint를 설정해놓으면 작업시 팀의 모든 코드의 일관성과 가독성이 향상된다. 따라서 팀에 소속되는 경우, 개발자들은 일반적으로 ES Lint 사용하여 이를 준수하여 코드를 작성할 것을 권고 받는다. Prettier와 차이 ES Lint와 유사한 기능을 하는 Prettier도 있다. Prettier는 코드의
CRA에 ESLint 와 Prettier 적용하기
CRA를 이용해 프로젝트 시작하기 CRA 란? CRA는 페이스북에서 지원해주는 보일러플레이트를 이용해 리액트 앱을 만들어주는 아주 유용한 도구임 (CRA가 나오기 이전에는 웹팩과 바벨등의 설정을 해주는 것에 많은 시간을 소비했다고 함) ※ But, 웹팩이나 바벨 설정이 추가적으로 필요한 경우에는 프로젝트를 eject하거나 craco(Create React App Configuration Override)와 같은 라이브러리를 사용해 설정을 추가해줘야함 CRA로 프로젝트 시작하기 위의 방법으로 프로젝트 시작시 typescript를 사용하는 리액트 앱이 만들어짐 (뒤의 '.'은 현재 경로를 의미함, 원하는 경로 입력시 그 경로에 프로젝트 생성) ES Lint 적용하기 ES lint 란? ESLint는 ES 와 Lint의 합성어 ES는 Ecma Script로서, 표준 Javascript를 의미하고 Lint는 에러 표시를 의미함. 따라서, ESLint
React Basic : Prettier
ES Lint에 이어서, 내 코드의 포맷팅을 도와주는 Prettier를 자세하게 다뤄봅니다. CRA에 포함된 ESLint와 조합되면 강력한 위력을 지닌 포맷터입니다. 코드 포맷터(Code Formatter) 코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 미리 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다. 언뜻 생각하면 저번 글에서 다루었던 린터와 비슷한 기능을 하는 것 같기도 합니다. 린터는 주로 코드 내의 에러를 검출하고 코드 문법을 강제하는 등 코드 품질을 향상시키는 것이 주요한 기능입니다. (ESLint 같은 경우에는 기본적인 포맷팅 기능도 같이 탑재되어 있습니다.) 포맷터는 indent 길이, 따옴표 종류, 한 줄 안에서 코드의 최대 길이 등 코드의 모양새를 미리 정해진 규칙에 따라 손질해주는 것입니다. 따라서 실제 코드의 오류를 잡아주거나 하지는 못합니다. 
React Basic : ES Lint
CRA에는 ES Lint 기능이 내장되어 있습니다. 코드의 안정성을 높히고 퀄리티를 보장해주는 유용한 도구입니다. ES Lint의 개념을 살펴보고, 사용법도 다뤄볼 생각입니다. Linter는 무엇인가 위키에서 린트를 한번 검색해보았습니다. 다음과 같은 설명이 나오는군요. > 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 린트는 쉽게 말해서, 코드의 문법 오류나 패턴에서 벗어난 코드를 지적해줍니다. 결과적으로 일관된 스타일로 코드를 작성할 수 있게 해주는 도구입니다. Lint라는 단어가 영어로 '보푸라기'를 뜻합니다. 그래서 문법이나 컨벤션에 어긋난 코드를 찾아