보다 좋은 자바스크립트 코드를 작성하기 위한 7단계

코드 작성 -> 문서화 -> 분석 -> 테스트 -> 측정 -> 자동화 -> 예외 처리를 통해 고품질 코드를 작성해봅시다.

http://www.creativebloq.com/netmag/7-steps-better-javascript-51411781?utm_source=javascriptweekly&utm_medium=email 의 내용을 번역한 내용입니다. 일부 내용은 원문과 다르게 표현했습니다. (특히 코드작성 부분)
오역은 내용 좌측의 댓글에 남겨주시면 감사하겠습니다.

Den Odell은 완벽한 코드를 작성하기위한 자신의 7단계를 제시하고 프로세스를 간소화하기 위한 유용한 도구를 요약했습니다.

http://youtu.be/HwOfj0krPlQ

브라우저 성능 개선과 함께 새로운 HTML5 API가 꾸준히 채택되면서 웹에서 자바스크립트의 비중이 커지고 있습니다. 하지만 잘못 작성한 코드의 한 라인이 웹 서비스를 멈추게하고 사용자와 잠재 고객의 유입을 끊을 수 있습니다.

개발자들은 작성한 코드가 예상대로 동작하기 위해 코드 품질을 향상 시킬 수 있는 도구와 기술을 사용합니다. 이 주제는 저와 밀접한 관계가 있었고 몇 년 동안 일하면서 최고의 품질을 가진 코드를 작성하기위한 ‘단계’를 찾았습니다.

당신의 자바스크립트 프로젝트의 품질을 극적으로 향상시키기 위한 7단계가 여기 있습니다. 7단계를 통해서 기존 프로젝트 보다 적게 오류가 발생할 것이고 유저가 떠나는 일이 줄어들 것입니다.

01. 코드 작성

1. 당신의 함수에서 “use strict”를 사용하여 ECMAScript5의 strict 모드를 시작합시다.
2. 모듈 디자인 패턴을 사용합시다.
3. 분산된 코드 모듈을 자기 실행 클로저에 집어넣어 전역 변수 사용을 최소화합시다.
4. 명확하고 간결한 모듈을 유지하기 위해 모든 외부 종속성을 전달합시다.
5. 로직과 데이터를 분리하여 제작합니다.
6. 충분히 검증된 라이브러리 및 프레임워크를 사용하여 코드를 작성합니다.

여러 명의 개발자가 투입된 큰 프로젝트의 경우 다음과 같은 규칙을 따르는 것이 좋습니다.

1. 구글의 자바스크립트 스타일 가이드와 같은 코딩 가이드라인을 따르는 것이 좋습니다.
2. Asynchronous Module Definition (AMD)을 따르는 RequireJS 같은 라이브러리를 사용하여 스크립트의 의존성을 관리합니다.
3. 당신이 사용하는 종속적인 라이브러리의 특정 버전을 Bower 혹은 Jam을 이용하여 패키지 관리를 합니다.
4. 옵저버 패턴 같은 구조적 디자인 패턴을 사용하여 당신의 각각 다른 모듈을 느슨하게 연결하여 상호작용 할 수 있도록 합니다.
5. 코드 관리 시스템인 Git이나 Subversion을 사용하는 GitHub 또는 Beanstalk와 같은 서비스는 당신의 코드를 웹에 백업하고 지켜줍니다. 이전 버전으로 돌아가는 것이 가능하고 기능 단위로 브랜치를 생성하여 작업한 후 나중에 합치는 것도 가능합니다.

02. 문서화

어떤 개발자는 커뮤니케이션 오해를 줄이고 코드를 뜯어볼 필요가 없도록 YUIDoc 또는 JSDoc으로 구조화된 블록 주석을 이용합니다. 마크다운 문법을 사용하여 긴 의견과 주석을 달 수 있습니다. 관련된 커맨드 라인 툴을 사용하여 구조에 대한 주석과 최신 코드에 대한 변경 사항에 대한 웹사이트 기반 문서를 자동으로 만들 수 있습니다.

03. 분석

정기적으로 코드에 JSHint와 JSLint 같은 정적 코드 분석 도구를 사용합시다. strict mode를 사용하는 것을 잊었거나 변수 선언을 까먹었거나 괄호 짝이 맞지 않게 코딩하거나 세미콜론을 빼먹는 것과 같은 흔히 하기 쉬운 코딩 실수를 검사해줍니다. 당신의 코드 품질을 향상시키기 위해 도구(JSHint, JSLint)의 설정을 변경할 수 있습니다. 설정 변경을 통해 인덴트 스페이스 수, 중괄호의 위치, 큰 따옴표를 사용할지 작은 따옴표를 사용할지 팀 프로젝트의 코딩 표준을 정할 수 있습니다.

04. 테스트

유닛 테스트(단위 테스트)는 특정 입력을 통해 예상하는 결과를 확인하기 위해 함수 하나를 실행하는 독립적인 기능입니다. (예를 들어 function sum에서 1+1을 입력했을 때 2라는 결과가 나오는지 검사하는 함수 입니다) QUnit 혹은 Jasmine과 같은 프레임워크를 사용하여 여러 유닛 테스트를 작성하여 코드가 예상대로 작동하는지 확인할 수 있고 이러한 행위를 통해 자신감을 향상시킬 수 있습니다.

클라우드 가상 머신을 이용하여 테스트를 할 수 있도록 도와주는 BrowserStack와 Sauce Labs와 같은 서비스를 사용한다면 여러 운영체제, 여러 브라우저에서 코드가 잘 동작하는지 테스트할 수 있습니다. 두 서비스는 자동으로 유닛 테스트를 여러 브라우저에서 실행하고 당신에게 피드백이 갈 수 있도록 API를 제공합니다. 만약 당신의 코드가 Github에 저장되어 있다면 BrowerSwarm을 사용할 수 있습니다. BrowerSwarm은 당신이 코드를 커밋 할 때 자동으로 유닛 테스트를 실행하는 도구입니다.

05. 측정

Istanbul과 같은 코드 커버리지 도구(소프트웨어의 테스트가 충분한지 나타내는 도구)는 유닛 테스트가 함수를 실행할 때 함수의 총 라인 수와 실행되는 라인의 수를 퍼센트로 당신에게 보여줍니다. 코드 커버리지 도구를 함께 사용하여 유닛 테스트를 하면 당신의 코드에 더 큰 신뢰성을 주고 100퍼센트에 도달하기 위해 추가 테스트를 할 수 있습니다.

함수 복잡도는 Halstead의 소프트웨어 복잡성 척도를 사용해 측정할 수 있습니다. 루프와 분기, 기능 호출의 갯수에 따른 함수의 복잡도를 정량화하는 방법은 1970년대에 컴퓨터 사이언티스트 Maurice Halstead가 고안했습니다. 복잡성 점수가 감소하면 오류가 날 가능성을 줄일 수 있습니다. 커맨드 라인 툴인 Plato는 자바스크립트 코드의 복잡성을 측정하고 개선 할 수 있도록 시각화하여 보여줍니다.

06. 자동화

Grunt 같은 task runner를 사용한다면 문서화, 분석, 테스트, 커버리지, 복잡한 보고서 생성과 같은 작업을 자동화할 수 있으므로 당신의 시간과 노력을 줄이면서 품질 문제를 해결할 수 있는 기회가 늘어납니다. 이 문서에 나온 대부분의 도구와 테스트 프레임워크들은 Grunt와 연동이 가능합니다. Grunt를 사용하면 당신이 손가락 하나 까닥하지 않아도 워크플로우와 코드 품질을 향상 시키기 위한 귀찮은 작업을 연결할 수 있습니다.

07. 예외 처리

어플리케이션을 실행시켜보면 어김 없이 어느 시점에서 오류가 나기 마련입니다. (완벽해보여도 어떤 말도 안되는 오류가 발생할 수 있습니다) try … catch 구문을 사용하면 우아하게 런타임 오류를 처리하고 웹 서비스의 동작에 미치는 영향을 줄일 수 있습니다. 당신의 코드를 개선하거나 에러를 하나하나 제거하기 위해 새로운 유닛 테스트를 만들기 위해서는 이 try … catch 구문을 사용합시다.

모든 단계를 마치셨습니다

이 7단계는 제가 지금까지 제가 작성한 코드 중 가장 자랑스럽다고 생각하는 코드를 만드는데에 도움이 되었습니다. 우리의 프로젝트에서 고품질의 자바스크립트 코드를 생산하여 웹 서비스를 같이 개선해 나갑시다.