ESLint 3

Javascript Style Guide 와 ESLint에 대한 이해

Javascript Style Guide 1. 가독성은 좋은 코드의 조건 중 하나 개발에서의 가독성은 사람이 읽기 쉬운 코드를 작성하는 것을 의미합니다. 우리는 왜 가독성이 좋은 코드를 작성해야 할까요? "여러 개발자가 함께 일하기 때문이다"와 같은 표면적 이유들을 넘어 그 본질적 목표는 생산성의 향상에 있습니다. 경제적인 관점에서, 기업은 투입되는 비용을 최소화하여 최대의 효율로 이윤을 내는 것이 굉장히 중요합니다. 투입되는 비용에는 개발 비용 즉, 개발에 투입되는 시간과 노력 등이 포함될 것이고, 가독성이 좋은 코드는 개발자들이 빠르고 쉽게 코드를 읽을 수 있어 코드를 이해하는데 필요한 시간을 줄일 수 있다는 장점이 있기 때문에 가독성이 곧 좋은 코드의 조건 중 하나가 될 수 있는 것이죠. 물론, 개..

import 구문 정리 sort-imports + ESlint rules

1. 이 글은 vscode의 sort-imports extension을 활용하여 import 구문을 정렬하는 방법에 대한 글입니다. - sort-imports extension 활용 방법 - sort-imports 관련 ESLint rules 설정 방법 2. 이 글은 어떤 기준으로 import 구문을 정렬해야하는지 알리는 글이 아닙니다. - 여러 방법 중 어떤 것이 더 좋은 방법인지 명확하게 이야기하지 않습니다. WHY - import sorting은 왜 필요할까요? >> 결론적으로 import 구문 정렬은 개발자 개인 취향입니다. 용도별로 직접 구분하며 정리하는 사람도 있고, 굳이 import를 정리할 필요성을 못 느끼는 사람도 있지만, 다른 개발자들과 함께 개발을 진행하다보면 개발 스타일이 섞이기 마..

[React] 리액트 프로젝트 세팅 (webpack, babel, eslint, prettier)

해당 포스트는 React(v17.0.1) 기준입니다. 오늘은 리액트 프로젝트 설정에 대해 알아보겠습니다. 프로젝트를 시작하는 방법보다는 configuration에 대한 내용이 중점입니다. 0. create-react-app(CRA)을 이용한 자동 설정? - 리액트를 처음 시작하는 분들은 대부분 CRA(create-react-app)을 통해 프로젝트를 시작합니다. create-react-app은 React SPA(single page application)를 만드는 것을 도와주는 공식적인 방법이고, webpack이나 babel 등 프로젝트에 필요한 설정들을 직접 구성할 필요없이 자동으로 설정해줍니다. 올인원 솔루션을 지향하는 Rome이라는 통합 툴체인도 등장하고 있지만, 아직은 베타버전... npx cre..

Development/React 2021.01.21