강좌 & 팁
2014.06.09 13:45:50 (*.134.169.166)
40718
혹시 여러분들은 인터넷에 떠 도는 자바스크립트에 보면 이런 것 보셨나요?
"use strict";
이건 그냥 문자열인데.. 주석도 아니고 하여간.... 뭐지?
예.... 궁금하셨던 분들이 많을 텐데요..
우선 이것을 알기 전에 ECMAScript 5 를 알아야 합니다.
뭐 별거는 아니고요 다음과 같이 설명할 수 있습니다.
ECMAScript 5 란?
HTML5와 규정되면서 관련된 자바스크립트도 같이 규정됩니다.
이 자바스크립트 표준안을 ECMAScript 5 라고 부릅니다.
그리고 "use strict"; 는 ECMAScript 5에서 규정된 자바스크립트 명령입니다..
단 자바스크립트를 실행하는 놈에게 전달하는 것이죠..
뭐하는 거냐고요?
자바스크립트의 문법을 좀 엄하게 검사하고 실행해 달라는 겁니다.
이전 시간에 말했듯이 자바스크립트가 강력하기는 한데 버그에 약하다고 했죠?
그래서 이런 버그와 관련된 실행 사항은 아예 실행하지 말라고 주문하는 겁니다.
여러분 소스 코드에 이거 넣는 것이 만수 무강에 도움이 됩니다.
그냥 의식적으로 넣으세요 ㅋㅋ
자 그런데 이 문장에 대해서 JSHint 로 검사해 봅시다.
그런데 웃기게도 이것도 지들이 좋아 하는 형태가 있습니다.
우선 초 간단 자바 스크립트를 만들고 실험해 봅시다.
만들 자바 스크립트 이름은 다음과 같습니다.
[C001_empty.js]------------------------------------------------------
---------------------------------------------------------------------
흐흐 빈 파일 만들라는 이야기 입니다.
이것을 JSHint 를 돌리면 아무런 불만을 쏟아내지 말아야 한다는 겁니다.
왜 틀릴 것이 없으니까..
JSHint 로 검사해 봅시다. [ckw 사용하세요 ^^]
jshint --verbose C001_empty.js
아무런 메세지를 내 보내지 않습니다. 당연히 그래야 하지 않겠어요?
자 여기서 다음과 같은 소스를 만들어 봅시다.
[C002_strict.js]------------------------------------------------------
"use strict";
---------------------------------------------------------------------
그리고 JSHint 로 검사해 봅시다.
> jshint --verbose C002_strict.js
C002_strict.js: line 1, col 1, Use the function form of "use strict". (W097)
1 error
맙소사! 에러 랍니다.
다른거 하나도 하지 않고 단지 "use strict"; 만 썼는데 에러 랍니다. ㅠㅠ
뭐 이따위가..
하지만 이건 다 이유가 있답니다.
JSHint 는 "use strict"; 의 사용을 각 함수별로 하기를 원합니다.
전체 적용은 좋은 습관이 아니라고 보는 겁니다.
우린 이 룰을 따르는 것이 좋습니다.
그렇다면 이 소스는 어떻게 다듬은 것이 좋을 까요?
다음과 같이 다시 작성해 봅시다.
[C003_strict_good.js]------------------------------------------------------
(function(){
"use strict";
})();
---------------------------------------------------------------------
그리고 JSHint 로 검사해 봅시다.
> jshint --verbose C003_strict_good.js
아무런 에러 메세지가 나오지 않습니다.
여기서 strict 모드에 대해서 좀 더 살펴 봅시다.
strict 모드에서는 변수를 선언하지 않고 사용하면 실행 중 에러가 나고 자바 스크립트 동작이 멈추어 버립니다.
당연히 이런 경우에 JSHint 를 사용하여 이런 경우를 찾아서 고쳐야 겠죠..
뭐 가장 흔한 버그 중 하나니까요..
그래서 앞으로 우리는 다음과 같은 두개의 쌍으로 이루어진 파일을 만들 겁니다.
[C004_strict_var.html]------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head></head>
<body>
</body>
<script src="C004_strict_var.js"></script>
</html>
--------------------------------------------------------------------------------
[C004_strict_var.js]------------------------------------------------------
/* jshint undef: true */
(function(){
"use strict";
변수 = 1;
})();
--------------------------------------------------------------------------------
우선 크롬 부라우저에서 C004_strict_var.html 를 로드하여 C004_strict_var.js 를 실행합니다.
이때 크롬 브라우저 디버그 창의 콘솔 메세지를 보면 ( 다음부터는 이 과정을 콘솔 메세지를 보면으로 쓸겁니다. ^^ )
다음과 같이 내용이 나옵니다.
Uncaught ReferenceError: 변수 is not defined C004_strict_var.js:4
자 이제 JSHint 를 사용하여 잡아 봅시다.
이것은 정의 되지 않은 변수의 사용을 검출하는 것인데 옵션으로 지정해 주어야 합니다.
디폴트는 검사 하지 않습니다.
옵션을 지정하는 방법은 옵션 파일을 지정하는 방법과 소스에 지정하는 방법이 있습니다.
강좌의 진행의 편의성을 위해서 일단은 소스에서 지정하는 것으로 하겠습니다.
C004_strict_var.js 에 다음 문장이 정의 되지 않은 변수에 대한 검사를 하라는 것은
/* jshint undef: true */
형태가 되겠습니다.
다음과 같이 검사 명령을 수행해 봅시다.
> jshint C004_strict_var.js
C004_strict_var.js: line 4, col 5, '변수' is not defined.
1 error
보시는 것과 같이 변수가 정의 되지 않았는데 사용하고 있다고 나옵니다. ^^
참고로 전 새로 정의하는 변수명이나 함수명은 한글로 쓸 겁니다.
대한민국 사람이 한글을 사랑해야 하지 않겠습니까?
제 경험상 한글로 변수와 함수를 정의해서 사용하면 가독성이나 추후 유지 보수가 무척 편하고
한국에서 만든 소스를 외국인 특히 중국분들이 보시기 무척 어렵습니다. ^^
저작권 개념이 약하신 중국분들을 조금 고생시키는 방법중 하나 입니다. ^^
이제 위 문자에서 문제가 된
변수 = 1;
문장을 다음과 같이 고치고 검사해 봅니다.
var 변수 = 1;
아무런 에러 메세지가 나오지 않습니다.
자 이렇게 변수 선언이 되지 않는 것들에 대해서 에러를 잡을 수 있는데..
이것이 또 다른 복병을 만듭니다.
[C005_JSHint_console.html]------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head></head>
<body>
</body>
<script src="C005_JSHint_console.js"></script>
</html>
--------------------------------------------------------------------------------
[C005_JSHint_console.js]------------------------------------------------------
/* jshint undef: true */
(function(){
"use strict";
var 변수 = 1;
console.log( '변수 = ' , 변수 );
})();
--------------------------------------------------------------------------------
위에 내용을 크롭 브라우저로 보면 실제로 아무런 문제가 없습니다.
그렇지만 JSLint 로 검사 하면 다음과 같이 나옵니다.
>jshint C005_JSHint_console.js
C005_JSHint_console.js: line 5, col 5, 'console' is not defined.
1 error
console 은 선언한 적이 없는데 사용 했다고 나오는 거죠..
이건 내장된 것이므로 이런 것은 예외 처리 해야 겠죠?
이런 경우에는 다음과 같이 devel 옵션을 주면 에러로 처리 되지 않습니다.
/* jshint devel: true */
이제 마지막으로 이렇게 소스에 옵션 주석을 사용하지 않고 JSHint 옵션을 주는 방법을 알아 봅시다.
첫번째 방법은 실행 옵션으로 환경 설정 파일을 지정하는 방법입니다.
다음과 같이 세가지 파일을 만들어 봅시다.
[C006_JSHint_option.html]------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head></head>
<body>
</body>
<script src="C006_JSHint_option.js"></script>
</html>
--------------------------------------------------------------------------------
[C006_JSHint_option.js]------------------------------------------------------
(function(){
"use strict";
변수 = 1;
console.log( '변수 = ' , 변수 );
})();
--------------------------------------------------------------------------------
[C006_jshintrc]------------------------------------------------------
{
"undef": true,
"devel": true
}
--------------------------------------------------------------------------------
이제 검사해 봅니다.
당연히 변수와 관련된 에러는 나오고 console.log 에 대해서는 에러가 나오지 않아야 겠죠?
>jshint -c C006_jshintrc --verbose C006_JSHint_option.js
C006_JSHint_option.js: line 3, col 5, '변수' is not defined. (W117)
C006_JSHint_option.js: line 4, col 28, '변수' is not defined. (W117)
2 error
에러 메세지를 보면 변수는 선언 없이 사용했고 해당 변수를 사용했다는 것을 알 수 있습니다.
이제 조금 JSHint 의 사용법을 아시겠죠?
이제 이렇게 지정하는 것도 귀찮으므로 아예 설정 파일을 고정적으로 하는 법을 알아 봅시다.
아주 간단합니다. 실행 위치에 다음 파일이 있으면 됩니다.
.jshintrc
위의 파일 중 C006_jshintrc 을 .jshintrc 로 바꾸어 보고 다음과 같이 실행해 봅시다.
>jshint --verbose C006_JSHint_option.js
C006_JSHint_option.js: line 3, col 5, '변수' is not defined. (W117)
C006_JSHint_option.js: line 4, col 28, '변수' is not defined. (W117)
2 error
동일한 에러 메세지가 나옵니다.
지금까지 JSHint 의 아주 기초적인 사용법과 strict 모드에 대해서
쬐끔 알아 보았습니다.
앞으로 강좌는 JSHint 와 strict 모드도 다루면서
다른 것들을 이것 처럼 이야기 할 겁니다.
아 이번 편은 너무 무리 한 것 같네요 ^^
