JavaScript를 개선하기 위해 해야 할 일과 하지 말아야 할 일 7가지_Javascript 팁

브라우저 성능이 향상되고 새로운 HTML5 프로그래밍 인터페이스가 꾸준히 채택됨에 따라 웹페이지에서 JavaScript의 양이 점차 증가하고 있습니다. 그러나 잘못 작성된 코딩 조각은 전체 웹 사이트를 손상시키고 사용자를 좌절시키고 잠재 고객을 몰아낼 가능성이 있습니다.
개발자는 코드 품질을 향상시키기 위해 원하는 대로 모든 도구와 기술을 사용해야 하며 실행이 매번 예측 가능하다는 확신을 가져야 합니다. 이것은 내 마음에 가까운 주제이며, 나는 최고 품질의 코드만 출시되도록 개발 프로세스에서 따라야 할 일련의 단계를 찾기 위해 수년 동안 노력해 왔습니다.
이 7가지 단계를 따르는 것만으로도 JavaScript 프로젝트의 품질이 크게 향상됩니다. 이 워크플로를 사용하면 오류가 줄어들고 많은 프로세스가 최적화되어 사용자가 즐거운 탐색 경험을 누릴 수 있습니다.

01. 코드

먼저 함수에서 ECMAScript5의 엄격 모드와 "엄격 모드" 선언을 호출하고 모듈의 디자인 패턴을 사용하여 자체 실행 함수 클로저에서 샌드박스 독립 코드 모듈의 전역 영향을 최소화합니다. 외부 종속성을 통해 전역 변수를 명확하고 간결하게 유지합니다. 확립되고 검증되었으며 테스트를 거쳐 입증된 타사 라이브러리 및 프레임워크만 사용하고 기능을 작게 유지하고 모듈 작업 및 기타 뷰 레이어 코드와 분리하세요.
여러 개발자가 참여하는 대규모 프로젝트는 Google의 JavaScript 스타일 가이드와 같이 확립된 코딩 원칙 세트를 따라야 하며, 엄격한 코드 관리를 위해 AMD(패키지 관리 모듈 정의)를 사용하여 RequireJS와 같은 라이브러리를 통한 비동기 사용을 포함하여 더 강력한 코드 관리 규칙을 요구해야 합니다. 종속성 관리, Bower 또는 Jam(클라이언트 라이브러리 관리 도구) 패키징 관리를 사용하여 종속성 파일의 특정 버전을 참조하고 편의를 위해 Observer 패턴과 같은 구조적 디자인 패턴을 채택합니다. 서로 다른 코드 모듈 간의 느슨하게 결합된 통신입니다. 이는 또한 현명한 아이디어입니다. Git 또는 Subversion과 같은 코드 저장소 시스템을 사용하고, 코드를 클라우드에 백업하고, 이전 버전으로 복원하는 기능을 제공하고, Source Code 또는 Beanstalk와 같은 일부 서비스를 통해 고급 프로젝트를 생성합니다. 다양한 기능을 수행하고 완료되기 전에 함께 병합하는 코드 분기입니다.

02.파일

YUIDoc 또는 JsDoc과 같은 구조화된 주석 블록 형식을 사용하여 기능을 문서화하면 모든 개발자가 코드를 연구하지 않고도 목적을 이해할 수 있어 오해가 줄어듭니다. Markdown 구문을 사용하여 더 풍부하고 긴 주석과 설명을 만드세요. 관련 명령줄 도구를 사용하여 사이트에 대한 문서를 자동으로 생성합니다. 이러한 구조적 설명을 기반으로 코드 수정 사항의 최신 상태와 일치합니다.

03. 과거 실적분석

코드에서 JSHint 또는 JSLint와 같은 정적 코드 분석 도구를 정기적으로 실행하세요. 이는 엄격 모드 사용을 잊어버리거나 선언되지 않은 변수를 참조하거나 괄호나 세미콜론이 누락된 등 알려진 코딩 결함과 잠재적인 오류를 검사합니다. 코드 품질을 향상시키기 위해 문제를 해결하는 도구 제어입니다. 각 줄을 공백으로 들여쓰기, 중괄호 배치 위치, 코드 파일 전체에서 사용되는 작은따옴표 또는 큰따옴표 수 등 코딩 표준을 적용할 수 있도록 프로젝트 팀을 위한 기본 옵션을 설정해 보세요.

04. 테스트

단위 테스트는 특정 입력을 사용하여 기본 코드 베이스의 기능 중 하나를 실행하여 예상 값이 출력되는지 확인하는 작고 독립적인 기능입니다. 코드가 예상대로 작동할 것이라는 확신을 높이려면 Jasmine 또는 QUnit과 같은 프레임워크를 사용하여 각 함수에 대해 예상된 입력 매개변수와 예상치 못한 입력 매개변수를 사용하여 단위 테스트를 작성하세요. 하지만 이러한 극단적인 경우도 잊지 마세요.
BrowserStack 또는 Sauce Labs와 같은 서비스를 활용하여 여러 운영 체제의 여러 브라우저에서 이러한 테스트를 실행하면 클라우드에서 가상 머신에 대한 주문형 테스트를 가속화할 수 있습니다. 이 두 서비스는 단위 테스트가 여러 브라우저에서 동시에 자동으로 실행될 수 있도록 하는 API를 제공하며, 테스트가 완료되면 결과가 다시 제공됩니다. 보너스로, 코드가 GitHub에 저장되어 있으면 코드를 커밋할 때 단위 테스트를 자동으로 실행하는 도구인 BrowserSwarm을 활용할 수 있습니다.

05. 측정

이스탄불과 같은 코드 검사 도구는 함수에 대해 단위 테스트를 실행할 때 실행된 코드 줄을 측정하여 전체 코드 줄의 백분율로 보고합니다. 단위 테스트에 대해 코드 검사 도구를 실행하고 추가 테스트를 추가하면 검사 점수가 100%로 높아져 코드에 대한 신뢰도가 높아집니다.
함수의 복잡도는 컴퓨터 과학자 Maurice Halsted가 1970년대에 개발한 방정식인 Halsted Complexity Metric을 사용하여 측정할 수 있습니다. 함수의 복잡도는 정량화를 위한 포함된 함수 호출로 측정됩니다. 복잡성은 Halstead의 복잡성 측정을 사용하여 측정할 수 있습니다. 이 복잡성 점수가 줄어들면 기능을 이해하고 유지하기가 더 쉬워져 오류 가능성이 줄어듭니다. 명령줄 도구 PLATO는 JavaScript 코드 복잡성의 시각화를 측정하고 생성하여 개선할 수 있는 기능을 식별하는 동시에 이전 결과를 저장하여 시간이 지남에 따라 품질 진행 상황을 추적할 수 있도록 돕습니다.

06. 자동화

Grunt와 같은 작업 실행기를 사용하면 문서화, 분석, 테스트, 적용 범위 및 복잡성 보고서 생성 프로세스를 자동화하여 시간과 노력을 절약하고 발생하는 품질 문제를 해결할 가능성을 높일 수 있습니다. 이 기사에서 강조된 대부분의 도구와 테스트 프레임워크는 Grunt와 연결되어 있어 손가락 하나 까딱하지 않고도 작업 흐름과 코드 품질을 향상시키는 데 도움이 됩니다.

07. 예외 처리

어느 시점에서는 코드가 실행될 때 항상 오류가 발생합니다. 런타임 오류를 적절하게 처리하고 사이트 동작의 영향을 제한하려면 "try...catch" 문을 사용하세요. 네트워크 서비스를 사용하여 런타임 오류를 기록합니다. 그리고 이 정보를 사용하여 새로운 단위 테스트를 추가하여 코드를 개선하고 이러한 버그를 하나씩 제거하세요.

성공을 위한 단계

이 7단계를 통해 지금까지의 경력 중 가장 자랑스러운 코드를 만들 수 있었습니다. 그들은 또한 미래를 위한 훌륭한 기반이기도 합니다. 이 단계를 사용하여 자신의 프로젝트에서 고품질 JavaScript 코드를 생성하고 성공을 향해 한 번에 한 단계씩 웹을 개선하기 위해 함께 노력합시다.