3 고품질 React 코드를 작성하기 위해 NPM 패키지를 설치해야 함

3 고품질 React 코드를 작성하기 위해 NPM 패키지를 설치해야 함

반응형

React 개발자로서, 당신은 당신의 시간을 자바스크립트 코드를 쓰는데 소비한다. 프로그래밍은 쉬운 일이 아닙니다. 실제로 고품질 코드를 작성하면서 버그 없이 코드를 작성해야 합니다. 모든 프로젝트에서 항상 이러한 NPM 패키지를 설치하여 React 코드를 개선합니다.

유형 확인 TypeScript

저는 자바스크립트와 같은 매우 관대한 프로그래밍 언어인 PHP로 프로그래밍을 시작했습니다. 처음에는 쉬운 언어였지만 응용 프로그램이 증가하기 시작할 때 유지 관리하거나 프로그래밍하는 것은 악몽이었습니다.

나는 C/C++나 Java와 같은 강력한 타입의 언어를 가진 새로운 세계를 발견한다. 강하게 타이핑된 언어의 한 가지 주요한 장점은 개발 과정의 초기에 오류를 잡는 것이다. 결국, 응용 프로그램의 버그 수를 줄이면서 더 나은 코드를 작성할 수 있습니다.

유감스럽게도 C/C++, Java 또는 PHP는 브라우저에서 실행할 수 없습니다. 현재 브라우저는 자바스크립트 프로그래밍 언어만 지원합니다. 하지만, 좋은 소식은, 자바스크립트로 변환될 수 있는 강력한 타입의 프로그래밍 언어인 TypeScript를 사용하는 것에 대한 대안이 있다는 것이다. 따라서 자바스크립트와 100% 호환되며 브라우저는 문제 없이 실행할 수 있습니다.

최근 JS 커뮤니티에서 TypeScript의 인기가 높아지고 있다. 이제 거의 모든 NPM 패키지는 TypeScript를 지원합니다. 대부분의 NPM 패키지 설명서에서는 TypeScript를 설치하고 사용하는 방법에 대한 참조를 찾을 수 있습니다.

이제 모든 리액트 프로젝트가 TypeScript로 작성되어 없이는 살 수 없습니다.

JS 린터 ES린트

TypeScript와 함께 사용하는 또 다른 종속성은 자바스크립트 린터인 ESLint입니다. TypeScript와도 호환됩니다. 코드에서 오류, 버그 및 스타일 문제를 탐지하는 도구입니다.

ESLint는 코드가 따라야 하는 자바스크립트에 대한 수많은 규칙을 생각해냅니다. 예를 들어 소스 코드에 공백 대신 탭이 있을 때 ESLint를 지정하여 오류를 발생시킬 수 있습니다.

모든 규칙을 하나씩 정의할 수 있지만 직접 정의하려면 시간이 많이 걸립니다. 다행히도 ESLint에 대해 이미 구성된 규칙을 가장 유명한 공유 ESLint 구성 중 하나인 ESLint 구성 Airbnb와 함께 사용할 수 있습니다.

코드 포맷터 더 예쁘다

ESLint에서는 JS 코드 스타일에 대한 기본 설정을 적용할 수 있지만 옵션이 제한됩니다. 코드를 일관되게 찾는 가장 좋은 방법은 ESLint 위에 Beatter를 사용하는 것입니다.

예뻐지면 자바스크립트 코드를 파싱하고 코드를 다시 포맷할 수 있습니다. 코드 논리는 변경되지 않지만 코드를 더 읽기 쉽게 만듭니다.

이제, 여러분의 팀과 여러분은 같은 코딩 스타일을 가지고 있습니다. 코드를 작성하는 것이 개발 경험을 훨씬 더 즐겁게 합니다. 코드베이스의 신규 개발자의 경우 더 빠르게 확장할 수도 있습니다.

TypeScript, ESLint 및 Beauter로 반응하는 보일러플레이트

이 기사가 이러한 도구를 사용하도록 설득하기를 바랍니다. 만약 당신이 그것들을 구성하는데 시간을 낭비하고 싶지 않다면, 나는 GitHub에 있는 내 반응 보일러플레이트를 열어봤다. Next JS 및 Tailwind CSS로 React 프로젝트를 시작할 수 있는 완벽한 템플릿입니다.

동일한 원리로, 현재 SaaS를 구축 중이라면, React SaaS 보일러 플레이트 템플릿을 구축했습니다.

반응형

from http://issue-disk.tistory.com/10 by ccl(A) rewrite - 2021-09-29 13:00:46