You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
8.4 KiB
251 lines
8.4 KiB
2 years ago
|
<!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 three@0.84.0 --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>
|