initial commit

1 files changed, 156 insertions, 0 deletions

diff --git a/files/ko/web/javascript/reference/statements/import/index.html b/files/ko/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..ce3a1536cb
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,156 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+tags:
+  - ECMAScript6
+  - Modules
+  - import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>정적 <strong><code>import</code></strong> 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.</p>
+
+<p>가져오는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. HTML 안에 작성한 스크립트에서는 <code>import</code>를 사용할 수 없습니다.</p>
+
+<p>함수형 구문을 가진 동적 <strong><code>import()</code></strong>도 있으며, <code>type="module"</code>을 필요로 하지 않습니다.</p>
+
+<p>{{htmlelement("script")}} 태그의 <code>nomodule</code> 속성을 사용해 하위호환성을 유지할 수 있습니다.</p>
+
+<p>동적 가져오기는 모듈을 조건적으로 가져오고 싶거나, 필요할 때에만 가져올 때 유용합니다. 반면 초기 의존성을 불러올 때엔 정적 가져오기가 더 좋고, 정적 코드 분석 도구와 {{glossary("Tree shaking", "트리 셰이킹")}}을 적용하기 쉽습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">import defaultExport from "module-name";
+import * as name from "module-name";
+import { export1 } from "module-name";
+import { export1 as alias1 } from "module-name";
+import { export1 , export2 } from "module-name";
+import { foo , bar } from "module-name/path/to/specific/un-exported/file";
+import { export1 , export2 as alias2 , [...] } from "module-name";
+import defaultExport, { export1 [ , [...] ] } from "module-name";
+import defaultExport, * as name from "module-name";
+import "module-name";
+var promise = import("module-name");</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>모듈에서 가져온 기본 내보내기를 가리킬 이름.</dd>
+ <dt><code>module-name</code></dt>
+ <dd>가져올 대상 모듈. 보통, 모듈을 담은 <code>.js</code> 파일로의 절대 또는 상대 경로입니다. 번들러에 따라 확장자를 허용하거나, 필요로 할 수도 있으므로 작업 환경을 확인하세요. 따옴표와 쌍따옴표 문자열만 사용 가능합니다.</dd>
+ <dt><code>name</code></dt>
+ <dd>가져온 대상에 접근할 때 일종의 이름공간으로 사용할, 모듈 객체의 이름.</dd>
+ <dt><code>exportN</code></dt>
+ <dd>내보낸 대상 중 가져올 것의 이름.</dd>
+ <dt><code>aliasN</code></dt>
+ <dd>가져온 유명 내보내기를 가리킬 이름.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 <font face="Courier New, Andale Mono, monospace">name</font> 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p>
+
+<p>모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 <code>myModule</code> 로 바인딩되어 들어갑니다.</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from "my-module.js";
+</pre>
+
+<p>모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 <code>myMember</code> 이 들어갑니다.</p>
+
+<pre class="brush: js">import {myMember} from "my-module.js";</pre>
+
+<p>모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 <code>foo</code> 와 <code>bar</code> 이 들어갑니다.</p>
+
+<pre class="brush: js">import {foo, bar} from "my-module.js";</pre>
+
+<p>멤버를 가져올 때 좀 더 편리한 별명을 지정해줍니다. 현재 범위 내에 <code>shortName</code> 이 들어갑니다.</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";</pre>
+
+<p>모듈에서 여러 멤버들을 편리한 별명을 지정하며 가져옵니다.</p>
+
+<pre>import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";</pre>
+
+<p>어떠한 바인딩 없이 모듈 전체의 사이드 이펙트만 가져옵니다.</p>
+
+<pre class="brush: js">import "my-module.js";</pre>
+
+<h3 id="기본값_가져오기">기본값 가져오기</h3>
+
+<p>default export 를 통해 내보낸 것을 기본값으로 가져올 수 있습니다. (object, function, class 등). export 와 상반된 <code>import</code> 명령어를 통해 기본값을 가져오는 것이 가능합니다.</p>
+
+<p>기본값으로 바로 가져오는 가장 간단한 버전:</p>
+
+<pre class="brush: js">import myModule from "my-module.js";</pre>
+
+<p>위와 함께 기본 구문도 같이 사용할 수 있습니다 (namespace 가져오기 또는 이름 지정하여 가져오기). 이러한 경우, 기본값 가져오는 부분을 먼저 선언해야 할 것입니다. 예를 들어:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from "my-module.js";
+// myModule used as a namespace</pre>
+
+<p>또는</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from "my-module.js";
+// specific, named imports
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>AJAX JSON 리퀘스트 처리를 돕는 보조 파일을 가져옵니다.</p>
+
+<pre class="brush: js; highlight: [14]">// --file.js--
+function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open("GET", url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}
+
+// --main.js--
+import { getUsefulContents } from "file.js";
+getUsefulContents("http://www.example.com", data =&gt; {
+  doSomethingUseful(data);
+});</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>