123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- <!DOCTYPE html>
- <html lang="ko">
- <head>
- <meta charset="utf-8">
- <base href="../../../" />
- <script src="page.js"></script>
- <link type="text/css" rel="stylesheet" href="page.css" />
- </head>
- <body>
- <h1>NPM 테스트([name])</h1>
- <p class="desc">
- 이 문서에서는 [link:https://nodejs.org/en/ node.js] 환경에서 three.js를 사용해 자동 테스트를 진행해보는 방법을 알려드립니다.
- 테스트는 커맨드 라인으로 실행이 가능하며 [link:https://travis-ci.org/ Travis]같은 CI 툴을 통해 자동으로 실행이 가능합니다.
- </p>
- <h2>간단한 버전</h2>
- <p>
- node와 npm이 친숙하다면,
- <code>
- $ npm install three --save-dev
- </code>
- 그리고 여기에
- <code>
- const THREE = require('three');
- </code>
- 를 추가합니다.
- </p>
- <h2>scratch에서 테스트 가능한 예제 만들기</h2>
- <p>
- 이 툴들에 익숙치 않다면, 아래의 간단한 가이드(리눅스 기반으로, 윈도우에서의 설치 절차와는 조금 다릅니다. 하지만 NPM 커맨드는 같습니다)를 따라주세요.
- </p>
- <h3>기본 설치</h3>
- <div>
- <ol>
- <li>
- [link:https://www.npmjs.org/ npm] 과 nodejs를 설치합니다. 가장 짧은 설치 명령어는 다음과 같습니다.
- <code>
- $ sudo apt-get install -y npm nodejs-legacy
- # 기본 레지스트리 URL에서 SSL 문제가 생기면 수정해주세요
- $ npm config set registry http://registry.npmjs.org/
- </code>
- </li>
- <li>
- 새 프로젝트 폴더를 만듭니다.
- <code>
- $ mkdir test-example; cd test-example
- </code>
- </li>
- <li>
- npm에게 새 프로젝트 파일을 만들게 합니다:
- <code>
- $ npm init
- </code>
- 엔터를 계속 쳐서 기본 설정으로 동의 후 진행하세요.
- 이 절차가 끝나면 package.json 파일이 생길 것입니다.
- </li><br />
- <li>
- 다음 코드로 테스트를 시작해 보세요
- <code>
- $ npm test
- </code>
- 아마 실패가 뜰 것입니다.
- package.json 파일을 보면, test 스크립트의 경로가 다음과 같이 되어 있을 것입니다.
- <code>
- "test": "echo \"Error: no test specified\" && exit 1"
- </code>
- </li>
- </ol>
- </div>
- <h2>mocha 추가하기</h2>
- <div>
- [link:https://mochajs.org/ mocha]를 사용할 것입니다.
- <ol>
- <li>
- mocha는 아래 명령어로 설치합니다.
- <code>
- $ npm install mocha --save-dev
- </code>
- node_modules/이 생성되어 있고 파일들이 있어야 합니다.
- 그리고 package.json의 내용이 업데이트 되었는지도 확인해봐야 합니다.
- --save-dev를 통해 devDependencies 속성에 업데이트가 되어있어야 합니다.
- </li><br />
- <li>
- mocha가 동작하는지 확인하기 위해 package.json을 수정합니다. 우리가 하고자 하는 것은 test를 치면 mocha를 동작하고 여러 리포터를 확인하는 것입니다.
- 기본적으로 이 명령어는 test/ 의 모든 것을 실행할 것입니다.
- (test/ 폴더가 없다면 npm ERR!가 나올 것입니다, mkdir test로 만들어주세요)
- <code>
- "test": "mocha --reporter list"
- </code>
- </li>
- <li>
- test를 다시 실행시킵니다.
- <code>
- $ npm test
- </code>
- 아마 성공 메세지가 뜨고 0 passing (1ms)와 비슷한 문구가 뜰 것입니다.
- </li>
- </ol>
- </div>
- <h2>three.js 추가</h2>
- <div>
- <ol>
- <li>
- three.js를 다음과 같이 추가합니다.
- <code>
- $ npm install three --save-dev
- </code>
- <ul>
- <li>
- 다른 three 버전을 사용하려면, 아래 명령어를 입력하고
- <code>
- $ npm show three versions
- </code>
- 사용 가능한 버전을 확인해, npm에게 특정 버전을 사용하라고 합니다.
- <code>
- $ npm install [email protected] --save
- </code>
- (이 예제에서는 0.84.0 버전을 사용했습니다.). --save 는 dev 설정이 아닌 이 프로젝트의 의존성으로 추가하는 명령어입니다.
- 여기([link:https://docs.npmjs.com/cli/v8/configuring-npm/package-json link])에서 더 많은 내용을 확인하세요.
- </li>
- </ul>
- </li>
- <li>
- Mocha 는 test/에서 test를 찾을 것이기 때문에, 아래 명령어를 입력합니다.
- <code>
- $ mkdir test
- </code>
- </li>
- <li>
- 이제 마지막으로 JS 테스트가 남았습니다. three.js가 잘 작동하는지 간단한 테스트를 통해 확인해 봅시다.
- test/verify-three.js 파일을 만들고 안에 다음 내용을 넣어주세요:
- <code>
- const THREE = require('three');
- const assert = require('assert');
- describe('The THREE object', function() {
- it('should have a defined BasicShadowMap constant', function() {
- assert.notEqual('undefined', THREE.BasicShadowMap);
- }),
- it('should be able to construct a Vector3 with default of x=0', function() {
- const vec3 = new THREE.Vector3();
- assert.equal(0, vec3.x);
- })
- })
- </code>
- </li>
- <li>
- 마지막으로 $ npm test로 확인해봅시다. 위의 테스트 파일을 성공적으로 실행시키고 다음과 같은 내용이 나올 것입니다.
- <code>
- The THREE object should have a defined BasicShadowMap constant: 0ms
- The THREE object should be able to construct a Vector3 with default of x=0: 0ms
- 2 passing (8ms)
- </code>
- </li>
- </ol>
- </div>
- <h2>자신의 코드 추가하기</h2>
- <div>
- 세 가지를 수행해야 합니다:
- <ol>
- <li>
- 자신의 코드의 예상 결과가 들어있는 예제를 만들어, test/ 폴더 안에 두세요.
- 여기([link:https://github.com/air/encounter/blob/master/test/Physics-test.js link])에서 진짜 프로젝트의 예제를 확인할 수 있습니다.
- </li>
- <li>
- nodeJS에서 알아볼 수 있는, require를 사용해 기능들을 내보내기 하세요.
- 여기([link:https://github.com/air/encounter/blob/master/js/Physics.js link])를 참고하세요.
- </li>
- <li>
- 테스트 파일에서 코드를 불러오세요. 같은 방식으로 우리는 위의 예제에서 require('three')를 불러왔습니다.
- </li>
- </ol>
- <p>
- 2번과 3번 과정은 자신의 코드를 어떻게 관리하는지에 따라 달려 있습니다. 위의 Physics.js 예제에서는 내보내기 부분이 맨 마지막에 있습니다.
- module.exports에 할당했습니다.
- </p>
- <code>
- //=============================================================================
- // make available in nodejs
- //=============================================================================
- if (typeof exports !== 'undefined')
- {
- module.exports = Physics;
- }
- </code>
- </div>
- <h2>의존성 관리</h2>
- <div>
- <p>
- require.js나 browserify같은 현명한 방법을 사용하고 있다면 이 부분은 넘어가세요.
- </p>
- <p>
- 일반적으로 three.js 프로젝트는 브라우저에서 돌아가게 하기 위한 목적입니다. 따라서 모듈 로딩은 브라우저가 스크립트 태그를 실행함으로써 이루어집니다.
- 개인 파일은 의존성에 대해 걱정하지 않아도 됩니다. 하지만 nodejs 환경에서는 모든 것을 묶어놓은 index.html이 없기 때문에, 분명히 해 둘 필요가 있습니다.
- </p>
- <p>
- 다른 파일에 의존하는 모듈을 내보내기 할 때에는, node에 같이 내보내기하라고 알려줘야 합니다.
- 그 방법 중 하나는 다음과 같습니다:
- </p>
- <ol>
- <li>
- 모듈의 시작 부분에서 nodejs 환경인지 체크합니다.
- </li>
- <li>
- 만약 그렇다면 의존성을 명확하게 선언해줍니다.
- </li>
- <li>
- 그렇지 않다면 브라우저 환경일 것이기 때문에 아무것도 할 것이 없습니다.
- </li>
- </ol>
- Physics.js의 예제입니다:
- <code>
- //=============================================================================
- // 서버사이드 테스트 설정
- //=============================================================================
- if (typeof require === 'function') // nodejs 환경 테스트
- {
- const THREE = require('three');
- const MY3 = require('./MY3.js');
- }
- </code>
- </div>
- </body>
- </html>
|