강좌 & 팁
글 수 2,412
2014.06.07 17:06:00 (*.134.169.166)
40918
자바 스크립트는 생각보다 막강한 언어 입니다.
그런데 치명적인 단점이 있습니다.
버그에 매우 취약하다는 것입니다.
그 중 가장 고약한 것은 실제 실행 중에 문제점이 발견되는 경우가 많다는 겁니다.
컴파일러는 사전에 많은 경고를 해 줍니다.
인터프린터는 이런 것에 취약 할 수 밖에 없죠..
그렇다면
이런 문제를 개발자들이 그냥 두었을까요?
아니죠..
그래서 JSLint 가 나오게 됩니다.
이것은 사전에 소스의 예상되는 문제점이나 기타 잘못된 습관을 찾아 줍니다.
여러분은 나름대로 코딩 스타일이 있겠지만
어느정도 실력이 늘다보면 어느새 고수들과 비슷한 코딩 룰이나 형태를 갖게 됩니다.
그래서 에초에 초보 때부터 이런 습관을 들여 주는 것이 좋죠...
이런 것들을 지적해 주고 문법 에러도 미리 잡아 주고 하는 것이
JSLint 입니다.
그런데 이놈은 좀 심하게 엄격합니다.
그래서 나온 것이
JSHint 입니다.
현재는 많은 자바 스크립트 작성 프로그래머가 이것을 사용 합니다.
그래서 오늘은 JSHint 를 사용하는 것을 알아 보려 합니다.
우선 게으른 저의 특성상 윈도우즈 환경에서 사용하는 것만 알아 보려 합니다.
리눅스환경에서 사용하는 것은 여기서 안 다룰 겁니다.
귀찮잖아요..
그쵸?
그런데 JSHint 는 안탑깝게도 Node.js 기반 유틸리티 입니다.
이 이야기는 윈도우즈에 먼저 Node.js 를 설치해야 한다는 것이죠..
이걸 여기서 또 알려 드리자니 무척 귀찮아요..
그래서 저희 회사 포럼에 이와 관련된 강좌가 있습니다.
장태성님이 쓴 글입니다.
윈도우즈에서 node.js 를 설치하는 방법을 기술한 것이죠..
http://forum.falinux.com/zbxe/index.php?document_srl=572233&mid=lecture_tip
물론 버전을 틀리겠지만 이것을 참조 하셔서 최신 버전을 설치하면 됩니다.
이 강좌를 진행하기 위해서 설치한 버전은 다음과 같습니다.
c:\>node -v
v0.10.28
JSHint 홈페이지는 다음에 있습니다.
http://www.jshint.com/docs/options/
이곳에서는 자바스크립트를 직접 검사해 볼 수 있습니다.
따로 설치하고 귀찮으신 분은 이 홈페이지를 이용해서 검사 하셔도 괜찮습니다.
영어로 된 옵션 사용법은 다음을 참조 하시면 됩니다.
JSHint 문서
http://www.jshint.com/docs/options/
참! 검사를 윈도우 환경에서 명령창으로 하려면 기본 커맨드 창 무척 불편합니다.
그래서 이전에 포럼에 ckw 이라는 것을 소개 한 적이 있습니다.
전 이 놈을 사용할 것을 강력 하게 권장합니다.
이 강좌는 다음에 있습니다.
http://forum.falinux.com/zbxe/index.php?document_srl=783289&mid=lecture_tip
그리고 한국 사람은 아무래도 한글로 된 글들이 편하겠지요?
다음 강좌를 강력 추천합니다.
제 글 역시 이 글을 다시 쓰는 정도 수준으로 끝날 것 같습니다.
자 이제 JSHint 와 관련된 괜찮은 강좌글 몇개 소개 하겠습니다.
JSHint 사용법
http://justhackem.wordpress.com/2013/11/16/jshint/
JS 힌트의 옵션 정리
http://blog.outsider.ne.kr/1007
한글로 된 글이죠.. 이 분들에게 축복이 있으라....
자 이제 우선 위 강좌를 보면서 설치 해 봅시다.
윈도우즈 커맨드 창에서 다음을 실행 합니다.
npm install -g jshint
물론 node.js 가 윈도우즈에 설치 되어 있는 가정 하에 시작합니다.
c:\>npm install -g jshint
npm http GET https://registry.npmjs.org/jshint
npm http 304 https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/htmlparser2
npm http GET https://registry.npmjs.org/shelljs
npm http GET https://registry.npmjs.org/console-browserify
npm http GET https://registry.npmjs.org/exit
npm http GET https://registry.npmjs.org/cli
npm http GET https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/strip-json-comments
npm http 304 https://registry.npmjs.org/exit
npm http 304 https://registry.npmjs.org/console-browserify
npm http 304 https://registry.npmjs.org/shelljs
npm http 304 https://registry.npmjs.org/htmlparser2
npm http 304 https://registry.npmjs.org/underscore
npm http 304 https://registry.npmjs.org/cli
npm http 304 https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/strip-json-comments
npm http GET https://registry.npmjs.org/date-now
npm http GET https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/date-now
npm http GET https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz
npm http 304 https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/domutils
npm http GET https://registry.npmjs.org/domhandler
npm http GET https://registry.npmjs.org/domelementtype
npm http GET https://registry.npmjs.org/readable-stream
npm http GET https://registry.npmjs.org/entities
npm http 200 https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz
npm http 304 https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/glob
npm http 304 https://registry.npmjs.org/readable-stream
npm http GET https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/domutils
npm http 304 https://registry.npmjs.org/domelementtype
npm http 304 https://registry.npmjs.org/domhandler
npm http 304 https://registry.npmjs.org/entities
npm http 304 https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/isarray
npm http GET https://registry.npmjs.org/core-util-is
npm http GET https://registry.npmjs.org/string_decoder
npm http 304 https://registry.npmjs.org/string_decoder
npm http 200 https://registry.npmjs.org/isarray
npm http GET https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz
npm http 304 https://registry.npmjs.org/core-util-is
npm http 200 https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz
C:\Users\frog\AppData\Roaming\npm\jshint -> C:\Users\frog\AppData\Roaming\npm\node_modules\jshint\bin\jshint
jshint@2.5.1 C:\Users\frog\AppData\Roaming\npm\node_modules\jshint
├── strip-json-comments@0.1.3
├── underscore@1.6.0
├── exit@0.1.2
├── shelljs@0.3.0
├── minimatch@0.3.0 (sigmund@1.0.0, lru-cache@2.5.0)
├── console-browserify@1.1.0 (date-now@0.1.4)
├── cli@0.6.3 (glob@3.2.11)
└── htmlparser2@3.7.2 (domelementtype@1.1.1, entities@1.0.0, domutils@1.5.0, domhandler@2.2.0, readable-stream@1.1.13-1)
c:\>
잘 설치되죠?
만약 안된다면 대부분 버전 문제 입니다. ^^