Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
resources	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
align-html-elements-to-3d.html	34.71 KB	-rw-r--r--
backgrounds.html	14.09 KB	-rw-r--r--
billboards.html	16.08 KB	-rw-r--r--
cameras.html	30.68 KB	-rw-r--r--
canvas-textures.html	18.89 KB	-rw-r--r--
cleanup.html	18.02 KB	-rw-r--r--
custom-buffergeometry.html	23.81 KB	-rw-r--r--
debugging-glsl.html	7.45 KB	-rw-r--r--
debugging-javascript.html	31.93 KB	-rw-r--r--
fog.html	14.89 KB	-rw-r--r--
fundamentals.html	31.61 KB	-rw-r--r--
game.html	91.06 KB	-rw-r--r--
indexed-textures.html	31.35 KB	-rw-r--r--
lang.css	589 B	-rw-r--r--
lights.html	30.72 KB	-rw-r--r--
load-gltf.html	35.02 KB	-rw-r--r--
load-obj.html	37.24 KB	-rw-r--r--
material-table.html	1.86 KB	-rw-r--r--
materials.html	21.47 KB	-rw-r--r--
multiple-scenes.html	29.43 KB	-rw-r--r--
offscreencanvas.html	49.49 KB	-rw-r--r--
optimize-lots-of-objects-anima...	23.92 KB	-rw-r--r--
optimize-lots-of-objects.html	27.17 KB	-rw-r--r--
picking.html	22.34 KB	-rw-r--r--
post-processing-3dlut.html	27.84 KB	-rw-r--r--
post-processing.html	17.92 KB	-rw-r--r--
prerequisites.html	23.54 KB	-rw-r--r--
primitives.html	25.21 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
rendering-on-demand.html	12.77 KB	-rw-r--r--
rendertargets.html	8.71 KB	-rw-r--r--
responsive.html	16.99 KB	-rw-r--r--
scenegraph.html	31.44 KB	-rw-r--r--
setup.html	5.14 KB	-rw-r--r--
shadertoy.html	25.15 KB	-rw-r--r--
shadows.html	29.24 KB	-rw-r--r--
textures.html	35.63 KB	-rw-r--r--
tips.html	17.83 KB	-rw-r--r--
transparency.html	19.85 KB	-rw-r--r--
voxel-geometry.html	45.92 KB	-rw-r--r--
webxr-basics.html	21.66 KB	-rw-r--r--
webxr-look-to-select.html	22.26 KB	-rw-r--r--
webxr-point-to-select.html	17.58 KB	-rw-r--r--

Code Editor : prerequisites.html

<!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)">

...

&lt;/script&gt;
</pre>
<p>모듈의 경로는 반드시 상대 경로나 절대 경로여야 합니다. <code class="notranslate" translate="no">&lt;img&gt;</code>, <code class="notranslate" translate="no">&lt;a&gt;</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">&lt;body onload="somefunction()"&gt;
</pre><p>이런 스타일은 더 이상 권장하지 않습니다. script 태그를 페이지의 끝에 삽입하세요.</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;html&gt;
  &lt;head&gt;
    ...
  &lt;/head&gt;
  &lt;body&gt;
     ...
  &lt;/body&gt;
  &lt;script&gt;
    // inline javascript
  &lt;/script&gt;
&lt;/html&gt;
</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;
  };
}

function distFromOrig([x, y]) {
  return Math.sqrt(x * x + y * y);
}

const dist = distFromOrig(position);  // dist = 2.236...

<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>

${this.title}

Code Editor : prerequisites.html