JSHint를 사용한 JavaScript 코드 검사

JSHint란

MyClass.prototype.myMethod = function() {
  return 42;
}  // No semicolon here.

(function() {
  // Some initialization code wrapped in a function to create a scope for locals.
})();

위 코드는 구글 JavaScript 코딩 가이드에 포함된 예제 코드 중 하나입니다. 윗 부분은 프로토타입을 이용하여 개체의 함수를 정의하는 방법이며 아래 부분은 코드의 이름 공간을 감싸 실행하는 방법으로 모두 흔히 사용되는 기법입니다. 하지만 메서드 정의 마지막에 세미콜론을 빠뜨려 실행될 때 전혀 예상치 못했던 결과를 야기합니다.

TypeError: number is not a function

규모가 큰 JavaScript 프로그램 코드가 이런 의도치 않은 오류가 다수 포함된 상태로 production 환경에 배포되는 상황은 생각만해도 끔찍합니다. JSHint는 JavaScript 코드의 문법 오류, 잠재적 문제를 검출하고 개발팀의 코딩 가이드를 준수할 수 있도록 도와주는 도구입니다.

실습

설치 및 실행

간단한 Node.js 응용프로그램을 사용해 JSHint의 기본적인 사용법을 살펴보겠습니다. 우선 JSHint를 설치합니다.

npm install –g jshint

아래 코드는 간단한 api를 제공하는 서버 프로그램입니다.

// server.js
var express = require('express');
var app = express();
var config = require('./config.json');

app.get('/api/contacts', function (req, res) {
    res.json([
        { name: "Tony Stark", email: "ironman@avengers.com" },
        { name: "Bruce Banner", email: "hulk@avengers.com" }
    ]);
})

app.listen(config['app_port']);
 console.log("Listening on port " + config.app_port);

이 코드를 JSHint를 사용해 분석해 보겠습니다.

$ jshint server.js
server.js: line 10, col 3, Missing semicolon.
server.js: line 12, col 18, ['app_port'] is better written in dot notation.

2 errors

2개의 오류가 검출되었습니다. 세미콜론이 빠진 부분이 한군데 있고 ‘app_port’ 속성에 접근할 때 멤버 연산자를 사용하도록 권유합니다.

검사 규칙

오류를 수정하기 전에 개발 팀의 코딩 가이드에 적용 받도록 해보겠습니다. 개발팀은 JavaScript 코드의 들여쓰기는 2로 하고 식별자는 camel-case를 사용하기로 결정했습니다. 파일의 시작에 아래 코드를 추가합니다.

/* jshint indent: 2, camelcase: true */

다시 server.js 파일을 분석하면 결과는 다음과 같습니다.

$ jshint server.js
server.js: line 10, col 5, Expected ']' to have an indentation at 7 instead at 5.
server.js: line 11, col 1, Expected '}' to have an indentation at 3 instead at 1.
server.js: line 11, col 3, Missing semicolon.
server.js: line 13, col 18, ['app_port'] is better written in dot notation.
server.js: line 14, col 2, Expected 'console' to have an indentation at 1 instead at 2.
server.js: line 14, col 0, Identifier 'app_port' is not in camel case.

6 errors

들여쓰기에 대한 오류와 ‘app_port’ 속성이 camel-case를 준수하지 않는다는 메시지가 추가되었습니다.

규칙 예외

다른 오류는 코드를 수정하기로 했으나 ‘app_port’는 설정 파일에 정의된 속성으로 camel-case 규칙을 적용하지 않고 싶습니다. 이것 때문에 JSHint 설정을 변경하면 다른 식별자까지 영향을 받습니다. 코드의 특정 부분에 대해서 특정 오류만 무시하도록 설정하는 것이 좋을 것입니다. --verbose 플래그와 함께 검사하면 오류 코드를 볼 수 있습니다.

$ jshint server.js --verbose
server.js: line 14, col 0, Identifier 'app_port' is not in camel case. (W106)
server.js: line 15, col 0, Identifier 'app_port' is not in camel case. (W106)

2 errors

-/+ 기호와 오류 코드를 사용해 설정 속성을 사용하는 부분에 대해서만 camel-case 검사를 하지 않도록 지정할 수 있습니다.

/* jshint -W106 */
app.listen(config.app_port);
console.log("Listening on port " + config.app_port);
/* jshint +W106 */

규칙 파일(.jshintrc)

파일의 시작에 주석을 추가하는 규칙 적용 방법은 프로젝트 범위로 규칙을 정의하고 다수의 파일을 검사하는 데에 적합하지 않습니다. JSHint는 .jshintrc 파일을 사용해서 디렉터리의 모든 파일에 같은 규칙이 적용되도록 할 수 있습니다.

{
  "camelcase": true,
  "indent": 2
}

결론

JSHint는 좀 더 안전하고 일관성 있는 JavaScript 프로그램을 작성하도록 도와주며 Grunt 등의 자동화 프로세스에서 사용됩니다. http://www.jshint.com/docs/에 방문하면 더 자세한 내용을 볼 수 있습니다.

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중