-
-
Notifications
You must be signed in to change notification settings - Fork 35.7k
/
Copy pathprerequisites.html
321 lines (304 loc) · 23.4 KB
/
prerequisites.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!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="../resources/lesson.css">
<link rel="stylesheet" href="../resources/lang.css">
<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="../resources/prettify.js"></script>
<script src="../resources/lesson.js"></script>
</body></html>