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.
325 lines
24 KiB
325 lines
24 KiB
<!DOCTYPE html><html lang="ko"><head>
|
|
<meta charset="utf-8">
|
|
<title>먼저 알아야 할 것들</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@threejs">
|
|
<meta name="twitter:title" content="Three.js – 먼저 알아야 할 것들">
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
|
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
|
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
|
|
|
|
<link rel="stylesheet" href="/manual/resources/lesson.css">
|
|
<link rel="stylesheet" href="/manual/resources/lang.css">
|
|
<!-- Import maps polyfill -->
|
|
<!-- Remove this when import maps will be widely supported -->
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "../../build/three.module.js"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/manual/ko/lang.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="lesson-title">
|
|
<h1>먼저 알아야 할 것들</h1>
|
|
</div>
|
|
<div class="lesson">
|
|
<div class="lesson-main">
|
|
<p>이 시리즈는 Three.js에 입문하는 초심자를 위한 튜토리얼입니다. 이 시리즈는
|
|
독자가 최소한 자바스크립트 기본 프로그래밍에 익숙하며, DOM이 무엇인지 설명할
|
|
수 있고, HTML과 자바스크립트로 DOM 요소를 조작할 수 있다는 전제 하에 작성하였습니다.
|
|
또한 <code class="notranslate" translate="no"><script type="module"></code> 태그로 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import">ES2015 모듈</a>을
|
|
불러올 수 있으며, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS 셀렉터가 무엇인지</a>도
|
|
알고, ES5, ES2015, 약간의 ES2016도 알며, 브라우저가 자바스크립트를 이벤트와 콜백으로만
|
|
실행한다는 것도 알고, 클로저가 무엇인지까지 안다고 가정했죠.</p>
|
|
<p>이번 글에서는 시리즈를 읽는 데 필요한 이런 기본 전제에 대해 간단히 환기하고
|
|
넘어가겠습니다.</p>
|
|
<h2 id="es2015-">ES2015 모듈</h2>
|
|
<p>ES2015 모듈은 스크립트 안에서 <code class="notranslate" translate="no">import</code> 키워드나, 인라인 <code class="notranslate" translate="no"><script type="module"></code>
|
|
태그로 불러올 수 있습니다. 두 가지 예시를 동시에 써보죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-html" translate="no"><script type="module">
|
|
import * as THREE from 'three';
|
|
|
|
...
|
|
|
|
</script>
|
|
</pre>
|
|
<p>모듈의 경로는 반드시 상대 경로나 절대 경로여야 합니다. <code class="notranslate" translate="no"><img></code>, <code class="notranslate" translate="no"><a></code> 태그, CSS 경로와
|
|
달리 여기서 상대 경로란 <code class="notranslate" translate="no">./</code>이나 <code class="notranslate" translate="no">../</code>로 시작하는 경로를 말합니다.</p>
|
|
<p>더 자세한 것은 <a href="fundamentals.html">이 글</a>의 마지막 부분을 참고하세요.</p>
|
|
<h2 id="-document-queryselector-document-queryselectorall-"><code class="notranslate" translate="no">document.querySelector</code>와 <code class="notranslate" translate="no">document.querySelectorAll</code></h2>
|
|
<p>요소를 선택할 때는 <code class="notranslate" translate="no">document.querySelector</code>나 <code class="notranslate" translate="no">document.querySelectorAll</code>을
|
|
사용하면 됩니다. 첫 번째는 CSS 셀렉터와 일치하는 첫 번째 요소를 반환하고, 두 번째는
|
|
CSS 셀렉터와 일치하는 모든 요소를 반환하죠.</p>
|
|
<h2 id="-onbody-"><code class="notranslate" translate="no">onbody</code>를 쓰지 마세요</h2>
|
|
<p>옛날에 개발된 많은 페이지가 body 태그의 onload 속성을 사용합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"><body onload="somefunction()">
|
|
</pre><p>이런 스타일은 더 이상 권장하지 않습니다. script 태그를 페이지의 끝에 삽입하세요.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-html" translate="no"><html>
|
|
<head>
|
|
...
|
|
</head>
|
|
<body>
|
|
...
|
|
</body>
|
|
<script>
|
|
// inline javascript
|
|
</script>
|
|
</html>
|
|
</pre>
|
|
<p>또는 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/script"><code class="notranslate" translate="no">defer</code> 속성을 사용</a>하는
|
|
것이 좋습니다.</p>
|
|
<h2 id="-closure-">클로저(closure)란?</h2>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function a(v) {
|
|
const foo = v;
|
|
return function() {
|
|
return foo;
|
|
};
|
|
}
|
|
|
|
const f = a(123);
|
|
const g = a(456);
|
|
console.log(f()); // 123 출력
|
|
console.log(g()); // 456 출력
|
|
</pre>
|
|
<p>위 예제에서 함수 <code class="notranslate" translate="no">a</code>는 매번 호출할 때마다 새로운 함수를 반환합니다. 이는 상수 <code class="notranslate" translate="no">foo</code>에
|
|
대한 <em>클로저</em>이죠. 자세한 건 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures">여기</a>를
|
|
참고하기 바랍니다.</p>
|
|
<h2 id="-this-"><code class="notranslate" translate="no">this</code> 이해하기</h2>
|
|
<p><code class="notranslate" translate="no">this</code>는 마법이 아닙니다. <code class="notranslate" translate="no">this</code>는 다른 인자들처럼 자동으로 함수에 넘겨지는 일종의 변수이죠.
|
|
간단히 함수를 직접 호출하는 경우를 예로 들어보겠습니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">somefunction(a, b, c);
|
|
</pre><p>여기서 <code class="notranslate" translate="no">this</code>는 <code class="notranslate" translate="no">null</code>입니다(엄격(strict) 모드나 모듈 안에서). 반면 <code class="notranslate" translate="no">.</code> 연산자를 붙여 메서드로
|
|
호출하는 경우,</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">someobject.somefunction(a, b, c);
|
|
</pre><p><code class="notranslate" translate="no">this</code>는 <code class="notranslate" translate="no">someobject</code>로 지정될 겁니다.</p>
|
|
<p>많은 사람들이 헷갈리는 부분은 메서드를 콜백 처리할 때이죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> const callback = someobject.somefunction;
|
|
loader.load(callback);
|
|
</pre><p>자바스크립트에 능숙하지 않은 사람이 보기에는 문제가 없을지 모르나, <code class="notranslate" translate="no">loader.load</code>는 콜백 함수를
|
|
<code class="notranslate" translate="no">.</code> 연산자를 써서 호출하지 않으므로-loader가 별도로 <code class="notranslate" translate="no">this</code>를 지정하지 않는 한-<code class="notranslate" translate="no">this</code>는 null이
|
|
됩니다. 콜백 함수를 호출할 때 <code class="notranslate" translate="no">this</code>를 <code class="notranslate" translate="no">someobject</code>로 지정하려면 명시적으로 <code class="notranslate" translate="no">this</code>를 종속시켜야(binding)
|
|
합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> const callback = someobject.somefunction.bind(someobject);
|
|
loader.load(callback);
|
|
</pre><p><code class="notranslate" translate="no">this</code>를 이해하기 어렵다면, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this"><em>this</em>에 관한 문서</a>를
|
|
한 번 읽어보길 권합니다.</p>
|
|
<h2 id="es5-es2015-es2016">ES5/ES2015/ES2016</h2>
|
|
<h3 id="-var-const-let-"><code class="notranslate" translate="no">var</code> 대신 <code class="notranslate" translate="no">const</code>와 <code class="notranslate" translate="no">let</code> 사용하기</h3>
|
|
<p><code class="notranslate" translate="no">const</code>와 <code class="notranslate" translate="no">let</code>을 쓸 수 있는 환경에서 <code class="notranslate" translate="no">var</code>를 써야할 이유는 <em>전혀</em> 없고, 지금 <code class="notranslate" translate="no">var</code>를 사용하는
|
|
것은 실력 향상에 전혀 도움이 되지 않습니다. 변수를 재할당할 일이 없을 경우 <code class="notranslate" translate="no">const</code>를 사용하세요.
|
|
변수를 재할당하는 것은 흔치 않은 일이니, 주로 <code class="notranslate" translate="no">const</code>를 더 많이 쓰게 될 겁니다. 변수의 값을 바꿔야
|
|
한다면 <code class="notranslate" translate="no">let</code>을 사용하세요. 이런 습관을 들이면 버그를 훨씬 더 많이 줄일 수 있습니다.</p>
|
|
<h3 id="-for-elem-in-collection-for-elem-of-collection-"><code class="notranslate" translate="no">for(elem in collection)</code> 대신 <code class="notranslate" translate="no">for(elem of collection)</code> 사용하기</h3>
|
|
<p><code class="notranslate" translate="no">for of</code>는 <code class="notranslate" translate="no">for in</code>의 문제를 해결하기 위해 새로 추가된 문법입니다.</p>
|
|
<p>예를 들어 객체의 키/값 쌍을 반복문으로 돌릴 경우 다음과 같이 쓸 수 있죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">for (const [key, value] of Object.entries(someObject)) {
|
|
console.log(key, value);
|
|
}
|
|
</pre>
|
|
<h3 id="-foreach-map-filter-"><code class="notranslate" translate="no">forEach</code>, <code class="notranslate" translate="no">map</code>, <code class="notranslate" translate="no">filter</code> 등을 적절히 활용하기</h3>
|
|
<p>ES5에서 배열에 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code class="notranslate" translate="no">forEach</code></a>,
|
|
<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code class="notranslate" translate="no">map</code></a>
|
|
메서드 등이 추가되었고, ES2015에서는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"><code class="notranslate" translate="no">filter</code></a>
|
|
메서드 등 여러 유용한 메서드가 추가되었습니다.</p>
|
|
<h3 id="-destructuring-">구조분해할당(destructuring) 사용하기</h3>
|
|
<p><code class="notranslate" translate="no">const dims = { width: 300, height: 150 }</code>. 이런 객체가 있다고 해보죠. 객체의
|
|
각 속성을 별도의 변수에 할당하고자 합니다.</p>
|
|
<p>기존 방법</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const width = dims.width;
|
|
const height = dims.height;
|
|
</pre>
|
|
<p>새로운 방법</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const { width, height } = dims;
|
|
</pre>
|
|
<p>구조분해할당은 배열에도 적용할 수 있습니다. <code class="notranslate" translate="no">const position = [1, 2, 3, 4]</code>.
|
|
이런 배열이 있다고 해보죠.</p>
|
|
<p>기존 방법</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const x = position[2];
|
|
const y = position[1];
|
|
</pre>
|
|
<p>새로운 방법</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const [ , y, x ] = position;
|
|
</pre>
|
|
<p>또한 매개변수에도 구조분해할당을 적용할 수 있습니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const dims = { width: 300, height: 150 };
|
|
const position = [1, 2, 3, 4];
|
|
|
|
function distFromOrig([x, y]) {
|
|
return Math.sqrt(x * x + y * y);
|
|
}
|
|
|
|
const dist = distFromOrig(position); // dist = 2.236...
|
|
|
|
function area({ width, height }) {
|
|
return width * height;
|
|
}
|
|
const a = area(dims); // a = 45000
|
|
</pre>
|
|
<h3 id="-">객체 선언 시 축약 문법 사용</h3>
|
|
<p>기존 방법</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no"> const width = 300;
|
|
const height = 150;
|
|
const obj = {
|
|
width: width,
|
|
height: height,
|
|
area: function() {
|
|
return this.width * this.height
|
|
},
|
|
};
|
|
</pre>
|
|
<p>새로운 방법</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no"> const width = 300;
|
|
const height = 150;
|
|
const obj = {
|
|
width,
|
|
height,
|
|
area() {
|
|
return this.width * this.height;
|
|
},
|
|
};
|
|
</pre>
|
|
<h3 id="-">전개 연산자 <code class="notranslate" translate="no">...</code> 사용하기</h3>
|
|
<p>전개 연산자는 매우 유용합니다. 예를 들어보죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no"> function log(className, ...args) {
|
|
const elem = document.createElement('div');
|
|
elem.className = className;
|
|
elem.textContent = args.join(' ');
|
|
document.body.appendChild(elem);
|
|
}
|
|
</pre>
|
|
<p>또 배열을 인자로 넘겨줄 때도 유용합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const position = [1, 2, 3];
|
|
somemesh.position.set(...position);
|
|
</pre>
|
|
<p>배열을 얕은 복사할 때 사용할 수도 있고</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const copiedPositionArray = [...position];
|
|
copiedPositionArray.push(4); // [1,2,3,4]
|
|
console.log(position); // [1,2,3] 기존 배열은 영향을 받지 않음
|
|
</pre>
|
|
<p>객체를 합칠 때도 사용할 수 있죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">const a = { abc: 123 };
|
|
const b = { def: 456 };
|
|
const c = { ...a, ...b }; // c = { abc: 123, def: 456 }
|
|
</pre><h3 id="-class-"><code class="notranslate" translate="no">class</code> 사용하기</h3>
|
|
<p>ES5 이하의 문법으로 클래스 스타일의 객체를 만드는 방법은 다른 개발자들에게 낯선 요소
|
|
중 하나였습니다. ES2015부터는 C++/C#/Java 등 다른 객체지향 언어처럼 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes"><code class="notranslate" translate="no">class</code> 키워드를 사용</a>해
|
|
클래스를 생성할 수 있습니다.</p>
|
|
<h3 id="getter-setter">getter와 setter</h3>
|
|
<p>모던 프로그래밍 언어에는 대부분
|
|
<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a>와
|
|
<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a>가
|
|
있습니다. ES2015의 <code class="notranslate" translate="no">class</code> 문법을 사용하면 훨씬 쉽게 getter와 setter를 설정할 수 있죠.</p>
|
|
<h3 id="-arrow-function-">화살표 함수(arrow function) 활용하기</h3>
|
|
<p>화살표 함수는 특히 콜백과 프로미스를 처리할 때 유용합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">loader.load((texture) => {
|
|
// 불러온 텍스처를 사용
|
|
});
|
|
</pre>
|
|
<p>화살표 함수는 <code class="notranslate" translate="no">this</code> 값을 지정하지 않습니다.</p>
|
|
<p>(※ 원문에서는 "Arrow functions bind <code class="notranslate" translate="no">this</code>.(화살표 함수는 <code class="notranslate" translate="no">this</code>를 바인딩한다.)"라고 적었지만,
|
|
표준에 기재된 바 화살표 함수는 익명 함수로 <code class="notranslate" translate="no">this</code>, <code class="notranslate" translate="no">arguments</code>, <code class="notranslate" translate="no">super</code> 또는 <code class="notranslate" translate="no">new.target</code>을 지정하지
|
|
않습니다. 혼돈을 막기 위해 달리 번역하였으니 참고 바랍니다. 역주. 출처: <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">MDN</a>)</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const foo = (args) => {/* code */};
|
|
</pre>
|
|
<p>위 예제는 다음과 과 같죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const foo = (function(args) {/* code */}).bind(this));
|
|
</pre>
|
|
<h3 id="-promise-async-await">프로미스(Promise)와 async/await</h3>
|
|
<p>프로미스는 비동기 처리를 도와줍니다. async/await는 프로미스를 좀 더 쉽게 쓰도록 도와주죠.</p>
|
|
<p>이 둘은 짧게 다루기 어려우므로 다른 글(<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises">프로미스</a>,
|
|
<a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>)을
|
|
참고하기 바랍니다.</p>
|
|
<h3 id="-template-literals-">템플릿 리터럴(Template Literals)</h3>
|
|
<p>템플릿 리터럴은 따옴표 대신 백틱(backticks, 억음 부호)을 사용한 문자열입니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">const foo = `템플릿 리터럴 문자열입니다`;
|
|
</pre><p>템플릿 리터럴은 문자열에 2가지 기능을 더한 것인데요. 하나는 여러 줄에 걸쳐 쓸 수
|
|
있는 기능입니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const foo = `템플릿
|
|
리터럴
|
|
문자열입니다`;
|
|
const bar = "템플릿\n리터럴\n문자열입니다";
|
|
</pre>
|
|
<p>예제의 <code class="notranslate" translate="no">foo</code>와 <code class="notranslate" translate="no">bar</code>는 같은 문자열이죠.</p>
|
|
<p>다른 하나는 문자열 중간에 자바스크립트 표현식을 끼워넣을 수 있는 기능으로,
|
|
<code class="notranslate" translate="no">${ 자바스크립트 표현식 }</code>처럼 사용합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const r = 192;
|
|
const g = 255;
|
|
const b = 64;
|
|
const rgbCSSColor = `rgb(${r},${g},${b})`;
|
|
</pre>
|
|
<p>함수를 실행하거나</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = [ 192, 255, 64 ];
|
|
const rgbCSSColor = `rgb(${ color.join(',') })`;
|
|
</pre>
|
|
<p>계산식을 넣을 수도 있습니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const aWidth = 10;
|
|
const bWidth = 20;
|
|
someElement.style.width = `${ aWidth + bWidth }px`;
|
|
</pre>
|
|
<h1 id="-coding-convection-">자바스크립트 네이밍 컨벤션(coding convection, 코딩 스타일 규약) 지키기</h1>
|
|
<p>코드를 작성하는 것은 여러분의 자유지만, 웬만하면 한 가지 규약은 지키는 것이 좋습니다.
|
|
자바스크립트의 변수, 메서드, 함수 이름은 전부 lowerCamelCase이죠. 생성자나, 클래스의
|
|
이름은 UpperCamelCase입니다. 이 규약만 따른다면 자바스크립트의 세계에서 크게 문제될
|
|
것은 없죠. 대부분의 <a href="https://eslint.org">린터(linter)</a>나 린팅 프로그램이 위 네이밍
|
|
컨벤션을 지키지 않는 코드에 대해 에러나 경고를 던집니다.</p>
|
|
<p>(※ 문서에 따라 lower camel case는 camelCase, upper camel case는 PascalCase로 부르기도
|
|
합니다. 역주.)</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const v = new vector(); // 모든 클래스가 대문자로 시작할 경우 에러
|
|
const v = Vector(); // 모든 함수가 소문자로 시작할 경우 에러
|
|
</pre>
|
|
<h1 id="visual-studio-code-">Visual Studio Code 사용해보기</h1>
|
|
<p>이 세상에는 훌륭한 에디터가 많습니다. 자신이 좋아하는 에디터를 쓰는 것이 가장
|
|
좋죠. 하지만 아직 마음에 드는 자바스크립트 에디터가 없다면 <a href="https://code.visualstudio.com/">Visual Studio Code</a>를
|
|
써보세요! 에디터를 설치하고 <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">eslint를 설정</a>
|
|
하면-환경에 따라 시간이 좀 걸릴지 모르나-무수한 자바스크립트 코드의 버그를
|
|
잡는 데 도움이 될 겁니다.</p>
|
|
<p>예를 들어 <a href="https://eslint.org/docs/rules/no-undef"><code class="notranslate" translate="no">no-undef</code> 규칙</a>을 활성화하면
|
|
VSCode는 ESLint를 통해 변수의 값이 지정되지 않은 경우 경고를 출력할 겁니다.</p>
|
|
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-not-defined.png"></div>
|
|
|
|
<p>위 예시에서 작성자는 <code class="notranslate" translate="no">doTheThing</code> 함수를 <code class="notranslate" translate="no">doThing</code>로 잘못 적었습니다. 그러자 <code class="notranslate" translate="no">doThing</code>
|
|
아래에 밑줄이 생겼죠. 그리고 그 위에 커서를 올리면 해당 함수를 선언하지 않았다고
|
|
알려줍니다. 미리 에러를 하나 줄인 셈이죠.</p>
|
|
<p><code class="notranslate" translate="no">THREE</code>를 쓸 때도 경고가 나타날 것이므로 코드 상단에 <code class="notranslate" translate="no">/* global THREE */</code>를 선언해
|
|
<code class="notranslate" translate="no">THREE</code>가 미리 선언되었음을 알려줄 수 있습니다.</p>
|
|
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-not-a-constructor.png"></div>
|
|
|
|
<p>위 이미지에서 ESLint는 <code class="notranslate" translate="no">대문자로 시작하는 이름</code>은 생성자이니 <code class="notranslate" translate="no">new</code> 키워드를 사용하라고
|
|
알려줍니다. <a href="https://eslint.org/docs/rules/new-cap"><code class="notranslate" translate="no">new-cap</code> 규칙</a> 덕에 에러를 하나
|
|
더 줄였네요.</p>
|
|
<p>이 외에도 <a href="https://eslint.org/docs/rules/">설정할 수 있는 규칙</a>이 거의 100개 정도 더
|
|
있습니다. 아까 <code class="notranslate" translate="no">var</code> 대신 <code class="notranslate" translate="no">const</code>와 <code class="notranslate" translate="no">let</code>을 쓰라고 했었죠.</p>
|
|
<p>아래 이미지에서 작성자는 <code class="notranslate" translate="no">var</code>를 썼는데, <code class="notranslate" translate="no">let</code>이나 <code class="notranslate" translate="no">const</code>를 쓰라는 경고를 받았습니다.</p>
|
|
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-var.png"></div>
|
|
|
|
<p>또 <code class="notranslate" translate="no">let</code>을 쓰고 재할당을 하지 않자 <code class="notranslate" translate="no">const</code>를 쓰라고 제안합니다.</p>
|
|
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-let.png"></div>
|
|
|
|
<p>물론 <code class="notranslate" translate="no">var</code>가 더 좋다고 생각하면 이 규칙을 꺼버리면 됩니다. 이 규칙을 쓰는 건 제가 성능과
|
|
버그 예방 면에서 <code class="notranslate" translate="no">var</code>보다 <code class="notranslate" translate="no">let</code>과 <code class="notranslate" translate="no">const</code>를 쓰는 걸 더 좋아하기 때문이죠.</p>
|
|
<p>일부 파일이나 코드의 일부분에서 규칙을 덮어 씌워야 할 경우, <a href="https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments">주석을 추가해 규칙을 끌 수
|
|
있습니다</a>.</p>
|
|
<h1 id="-">구형 브라우저를 지원해야 한다면 트랜스파일러를 쓰세요</h1>
|
|
<p>대부분의 모던 브라우저가 자동 업데이트 기능을 사용하기에 최신 문법을 사용해 생산성과
|
|
버그 예방 두 마리의 토끼를 동시에 잡을 수 있습니다. 만약 꼭 구형 브라우저를 지원해야
|
|
한다면 <a href="https://babeljs.io">ES5/ES2015 등의 최신 문법을 구형 문법으로 변환시켜주는 트랜스파일러</a>를
|
|
사용하길 권장합니다.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/manual/resources/prettify.js"></script>
|
|
<script src="/manual/resources/lesson.js"></script>
|
|
|
|
|
|
|
|
|
|
</body></html>
|