1. nodejs
nodejs 을 직접적으로 사용하지는 않을 것이지만, 자바스크립트에 개발에 여러 유용한 도구들이 nodejs 플랫폼 위에서 동작하는 것이 많다. 일단 node js 을 설치하자. 대부분의 환경에서는 nodejs 홈페이지에서 바이너리를 다운받아 쉽게 설치할 수 있다.리눅서 서버 (Ubuntu 14.04.02 LTS) 에는 아래와 같은 방법으로 설치할 수 있다.
node-install.sh 다운받기
wget https://github.com/taaem/nodejs-linux-installer/releases/download/v0.3/node-install.sh
실행권한 추가
chmod +x node-install.sh
실행
./node-install.sh
2. npm 과 package.json
npm 은 자바스크립트 개발자가 쉽게 코드를 공유하고, 재사용할 수 있게 만드는 도구이다. 이 코드들은 패키지 또는 모듈이라고 불리우는데, npm 레지스트리에 등록되어서 공유된다. npm 레지스트리는 패키지들의 정보를 담고 있는 데이터베이스이다. 패키지는 일종의 모듈 폴더이다. 패키지는 package.json 이라는 파일이 있는데, 이 파일이 패키지에 대한 메타 정보를 포함하고 있다. 자바스크립트 애플리케이션을 만들때, 이런 패키지(모듈)들을 사용해서 애플리케이션을 구축하게 된다. npm 과 package.json 을 이용해서 이런 모듈들을 쉽게 구성할 수 있고, 동료 개발자와도 환경공유도 쉽게 도와준다.3. package.json
아래 명령어를 통해서 package.json 을 만들 수 있다. 메뉴얼로 만들어도 상관없다. 이 동영상을 참고하자.
npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (myjavascriptproject) hellojavascript
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Some/Pth/package.json:
{
"name": "hellojavascript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
4. karma & jasminie
karma 는 구글의 AnuglarJS 팀에서 만든 테스트 자동으로 실행하는 도구이다. 아래의 명령어를 통해서 설치할 수 있다.npm install karma --save-dev
실제 테스트 코드는 jasmine 라는 자바스크립트 테스트 프레임워크를 사용할 것이다. 자스민의 사용법에 대해서는 따로 정리한 포스트을 참고하자.
npm install karma-jasmine --save-dev
--save-dev 옵션을 주면, 필요한 모듈들의 의존성을 package.json 에 자동으로 업데이트 한다.
자, 이제 karma 설정 파일을 만들자.
karma init my.conf.js
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
[라인 17] 에서 브라우저에서 읽어올 소스 파일과 테스트 케이스 파일을 설정해준다.
5. grunt
grunt 라는 자바스크립트 빌드 툴을 설치한다. grunt 을 설치하면 여러모로 유용하게 사용할 수 있다. 아래 3개 모듈을 설치하자.grunt 설치
npm install grunt --save-dev
grunt-karma plugin
npm install grunt-karma --save-dev
테스트 케이스을 크롬에서 실행하기 위해, 아래 플러그인도 설치해준다.
npm install karma-chrome-launcher --save-dev
몇 가지 플러그인도 추가적으로 설치하자. jshint 는 자바스크립트의 문법오류나 경고를 표시해주는 플러그인다.
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev
Grunt 설정
Gruntfile.js 에서 설정을 해주자.
[라인 4] 에서 package.json 을 읽어오게 한고 있다. 그 다음라인부터 각각, jshint, watch, karma 타스크(task) 을 설정하고 있다. [라인 21] 에서 karma 의 설정파일을 읽어오게 하고 있다. 특정 task의 실행을 아래와 같이 진행할 수 있다.
grunt [task name]
karma 타스크를 실행하자.
grunt karma
6. 폴더 구조 및 package.json
전체 폴더 구조는 아래와 같은 모습을 보이게 된다.
실제로 node_modules 폴더 자체는 소스 관리 툴(git or svn...) 로 관리할 필요가 없다. 왜냐하면 package.json 만 있으면, npm을 언제든지 동일한 모듈들을 install 함으로 같은 구조로 만들 수 있기 때문이다. jenkins 과 같은 CI 툴을 이용해서 빌드 및 테스트를 수행할 때도 이 점은 매우 편리하게 적용된다. package.json 을 특정 폴더로 복사한 다음에 아래 명령어를 수행해보자.
npm install
그러면 npm 이 package.json 기술된 메타정보를 읽어, 필요한 모듈들을 설치할 것이다.
자바스크립트 개발 및 테스트 환경을 구성하는 방법에 대해서 알아보았다. 이 포스트에 기술된 내용은 로컬 환경에서 사용할 용도이다. Jenkins CI 을 이용하여 빌드 및 테스트를 자동화 할때에도 npm 과 grunt 모듈들이 유용하게 사용된다. 이것과 관련된 내용은 다른 포스트에서 따로 정리할 예정이다.
댓글 없음:
댓글 쓰기