우파루파의 개발 기록 우파루파의 개발 기록

안녕하세요. 오늘은 제가 가장 최근까지 좋아하는, 빡센 규정은 아니지만 적당한 규정의 ESLint/Prettier 설정에 대해 공유하려고 합니다. 프로젝트를 시작할 때 린터와 포매터를 설정하는 것이 의외로 오래 걸리는 과정 중 하나인데요. 그래서 겸사겸사 저도 기록하는 용도로 간단하게 적어보고자 합니다. 참고로 린터와 포매터의 개념에 대한 글은 이전에 적어둔 글이 있어 달아두기만 하겠습니다. 1. Package install 가장 우선적으로 prettier와 eslint의 본체와 플러그인을 다운 받아야 합니다. 다만 CRA로 만들어진 React 프로젝트의 경우, 본 링크에서 확인할 수 있듯이 기본적인 eslint plugin들을 이미 포함하고 있습니다. 보통 CRA로 프로젝트를 생성하는 경우가 많기 때문..

들어가며 프로젝트를 진행할 때 꼭 필요한 Lint 설정을 진행합니다. Lint란 무엇이고, 왜 필요한 지에 대해서 학습합니다. 최종적으로Prettier, ESLint를 사용하여 VSCode에서 저장 할 때마다 자동으로 원하는 스타일로 Auto formating 해주는 설정 방법에 대해서 알아봅니다. 본 글에서는 React + Typescript 설정을 기준으로 하며, JS 설정을 하고 계신다면 typescript 관련된 내용을 제외하고 적용하시면 됩니다. Lint가 필요한 이유 설명에 들어가기 앞서, Lint/Linter의 개념부터 알아봅니다. Lint, Linter란 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을..