profile
Frontend Developer
post-thumbnail

React Basic : Prettier

ES Lint에 이어서, 내 코드의 포맷팅을 도와주는 Prettier를 자세하게 다뤄봅니다. CRA에 포함된 ESLint와 조합되면 강력한 위력을 지닌 포맷터입니다. 코드 포맷터(Code Formatter) 코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 미리 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다. 언뜻 생각하면 저번 글에서 다루었던 린터와 비슷한 기능을 하는 것 같기도 합니다. 린터는 주로 코드 내의 에러를 검출하고 코드 문법을 강제하는 등 코드 품질을 향상시키는 것이 주요한 기능입니다. (ESLint 같은 경우에는 기본적인 포맷팅 기능도 같이 탑재되어 있습니다.) 포맷터는 indent 길이, 따옴표 종류, 한 줄 안에서 코드의 최대 길이 등 코드의 모양새를 미리 정해진 규칙에 따라 손질해주는 것입니다. 따라서 실제 코드의 오류를 잡아주거나 하지는 못합니다. ![](https://images.velog.io/ima

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

React Basic : ES Lint

CRA에는 ES Lint 기능이 내장되어 있습니다. 코드의 안정성을 높히고 퀄리티를 보장해주는 유용한 도구입니다. ES Lint의 개념을 살펴보고, 사용법도 다뤄볼 생각입니다. Linter는 무엇인가 위키에서 린트를 한번 검색해보았습니다. 다음과 같은 설명이 나오는군요. > 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 린트는 쉽게 말해서, 코드의 문법 오류나 패턴에서 벗어난 코드를 지적해줍니다. 결과적으로 일관된 스타일로 코드를 작성할 수 있게 해주는 도구입니다. Lint라는 단어가 영어로 '보푸라기'를 뜻합니다. 그래서 문법이나 컨벤션에 어긋난 코드를 찾아

2022년 2월 9일
·
0개의 댓글
·