aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/javascript/guide/modules
diff options
context:
space:
mode:
authoralattalatta <urty5656@gmail.com>2021-12-16 02:01:24 +0900
committerKyle <mkitigy@gmail.com>2021-12-27 07:54:38 +0900
commit06bc06d023186d8d36f90c88e76a9e4c03446534 (patch)
treee50d797ff0a10a0b6153f77630a459776f70730a /files/ko/web/javascript/guide/modules
parentf2fe09baf63c96c009dd7348a34d2032b993433e (diff)
downloadtranslated-content-06bc06d023186d8d36f90c88e76a9e4c03446534.tar.gz
translated-content-06bc06d023186d8d36f90c88e76a9e4c03446534.tar.bz2
translated-content-06bc06d023186d8d36f90c88e76a9e4c03446534.zip
Remove notranslate from JS guides
Diffstat (limited to 'files/ko/web/javascript/guide/modules')
-rw-r--r--files/ko/web/javascript/guide/modules/index.html74
1 files changed, 37 insertions, 37 deletions
diff --git a/files/ko/web/javascript/guide/modules/index.html b/files/ko/web/javascript/guide/modules/index.html
index b52283a0fc..b64319b4da 100644
--- a/files/ko/web/javascript/guide/modules/index.html
+++ b/files/ko/web/javascript/guide/modules/index.html
@@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Guide/Modules
<p>첫 번째 예제(<a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>)를 보면 다음과 같은 파일 구조가 있습니다.</p>
-<pre class="notranslate">index.html
+<pre>index.html
main.js
modules/
canvas.js
@@ -77,7 +77,7 @@ modules/
<p>이를 사용하는 가장 쉬운 방법은 모듈 밖으로 내보내려는 항목 앞에 (export를) 배치하는 것입니다. 예를들면 다음과 같습니다.</p>
-<pre class="brush: js notranslate">export const name = 'square';
+<pre class="brush: js">export const name = 'square';
export function draw(ctx, length, x, y, color) {
ctx.fillStyle = color;
@@ -95,13 +95,13 @@ export function draw(ctx, length, x, y, color) {
<p>여러 항목을 내보내는 더 편리한 방법은 모듈 파일 끝에 하나의 export 문을 사용하는 것입니다. 그 다음에 내보내려는 기능들을 쉼표로 구분하여 나열하고 중괄호로 묶습니다.</p>
-<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
<h2 id="Importing_features_into_your_script">Importing features into your script</h2>
<p>모듈에서 일부 기능을 내보낸 후에는, 이를 사용할 수 있도록 우리가 사용할 스크립트로 가져와야 합니다. 가장 간단한 방법은 다음과 같습니다.</p>
-<pre class="brush: js notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 문(statement)을 사용하고, 가져올 목록을 쉼표로 구분하여 나열한 뒤 괄호로 묶습니다. 그 뒤에는 from을 쓰고 모듈 파일의 경로를 작성합니다. (사이트 루트에 연관된 경로로, 우리의 <code>basic-modules</code> 예제는 <code>/js-examples/modules/basic-modules</code> 입니다) <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>에서 이러한 코드를 볼 수 있습니다.</p>
@@ -109,11 +109,11 @@ export function draw(ctx, length, x, y, color) {
<p>예를들면,</p>
-<pre class="notranslate"><code>/js-examples/modules/basic-modules/modules/square.js</code></pre>
+<pre><code>/js-examples/modules/basic-modules/modules/square.js</code></pre>
<p>이렇게 쓸 수 있습니다.</p>
-<pre class="notranslate"><code>./modules/square.js</code></pre>
+<pre><code>./modules/square.js</code></pre>
<p><code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>에서 이러한 코드를 볼 수 있습니다.</p>
@@ -123,7 +123,7 @@ export function draw(ctx, length, x, y, color) {
<p>우리의 스크립트에 기능을 가져오면 동일한 파일 내에 정의한 것처럼 기능을 사용할 수 있습니다. 다음은 <code>main.js</code> 의 import 행 아래에 있습니다.</p>
-<pre class="brush: js notranslate">let myCanvas = create('myCanvas', document.body, 480, 320);
+<pre class="brush: js">let myCanvas = create('myCanvas', document.body, 480, 320);
let reportList = createReportList(myCanvas.id);
let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
@@ -137,7 +137,7 @@ reportPerimeter(square1.length, reportList);
<p>이 스크립트를 모듈로 선언하려면 {{htmlelement("script")}} 요소(element)에 <code>type="module"</code> 을 포함시켜야 합니다.</p>
-<pre class="brush: js notranslate">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+<pre class="brush: js">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
<p>기본적으로 모듈 기능을 가져오는 스크립트는 최상위 모듈로 작동합니다. 이를 생략하면 파이어폭스로 예를들면, "SyntaxError: import declarations may only appear at top level of a module"라는 오류를 줍니다.</p>
@@ -164,23 +164,23 @@ reportPerimeter(square1.length, reportList);
<p>예제를 가지고 어떻게 작동하는지 살펴보겠습니다. 예제 중 basic-modules 프로젝트의 <code>square.js</code> 파일에서 임의의 색상, 크기, 위치로 갖는 사각형을 만드는 <code>randomSquare()</code> 라는 함수를 찾을 수 있습니다. 이것을 기본값으로 export하려고 하므로, 파일의 맨 아래에 다음과 같이 씁니다.</p>
-<pre class="brush: js notranslate">export default randomSquare;</pre>
+<pre class="brush: js">export default randomSquare;</pre>
<p>중괄호가 없음에 주의하세요.</p>
<p>대신 함수 앞에 <code>export default</code> 를 추가하고, 다음과 같이 익명함수로 선언할 수 있습니다.</p>
-<pre class="brush: js notranslate">export default function(ctx) {
+<pre class="brush: js">export default function(ctx) {
...
}</pre>
<p><code>main.js</code> 파일에서 다음 코드처럼 사용하면, default function이 import 됩니다.</p>
-<pre class="brush: js notranslate">import randomSquare from './modules/square.js';</pre>
+<pre class="brush: js">import randomSquare from './modules/square.js';</pre>
<p>다시 말하지만, 중괄호가 없다는 점에 유의하세요. 하나의 모듈은 하나의 default export만 허용하기 때문에 우리는 <code>randomSquare</code> 가 해당 모듈임을 알 수 있습니다. 위의 코드는 아래의 코드를 단축하여 사용한 것입니다.</p>
-<pre class="brush: js notranslate">import {default as randomSquare} from './modules/square.js';</pre>
+<pre class="brush: js">import {default as randomSquare} from './modules/square.js';</pre>
<div class="blockIndicator note">
<p><strong>주의</strong>: export한 항목의 이름을 바꾸는 구문은 {{anch("Renaming imports and exports")}} 섹션에서 설명합니다.</p>
@@ -198,7 +198,7 @@ reportPerimeter(square1.length, reportList);
<p>예를들어 다음 두 가지 방법은 약간의 차이가 있지만, 두 방법 모두 동일한 작업을 수행하고 있습니다.</p>
-<pre class="brush: js notranslate">// inside module.js
+<pre class="brush: js">// inside module.js
export {
function1 as newFunctionName,
function2 as anotherNewFunctionName
@@ -207,7 +207,7 @@ export {
// inside main.js
import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre>
-<pre class="brush: js notranslate">// inside module.js
+<pre class="brush: js">// inside module.js
export { function1, function2 };
// inside main.js
@@ -218,11 +218,11 @@ import { function1 as newFunctionName,
<p>이 모듈듈 각각에는 내부적으로 동일한 이름의 기능이 있습니다. 따라서 각각 하단에 동일한 export 문(statement)이 있습니다.</p>
-<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
<p>이것들을 <code>main.js</code>에 가져올 때 우리는 다음과 같이 시도할 수 있습니다.</p>
-<pre class="brush: js notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
@@ -230,7 +230,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
<p>대신 import가 고유하도록(식별 가능하도록) 이름을 변경해야 합니다.</p>
-<pre class="brush: js notranslate">import { name as squareName,
+<pre class="brush: js">import { name as squareName,
draw as drawSquare,
reportArea as reportSquareArea,
reportPerimeter as reportSquarePerimeter } from './modules/square.js';
@@ -247,13 +247,13 @@ import { name as triangleName,
<p>다음과 같이 import하는 파일 대신 모듈 파일에서 문제를 해결할 수도 있습니다.</p>
-<pre class="brush: js notranslate">// in square.js
+<pre class="brush: js">// in square.js
export { name as squareName,
draw as drawSquare,
reportArea as reportSquareArea,
reportPerimeter as reportSquarePerimeter };</pre>
-<pre class="brush: js notranslate">// in main.js
+<pre class="brush: js">// in main.js
import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre>
<p>그리고 이것은 똑같이 작동 할 것입니다. 사용하는 스타일은 개인의 취향이지만, 모듈 코드를 그대로 두고 import 를 변경하는 것이 더 합리적입니다. 특히 제어 권한이 없는 써드 파티 모듈에서 import를 사용하는 경우에 특히 유용합니다.</p>
@@ -262,21 +262,21 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from
<p>위의 방법은 정상적으로 작동하지만, 다소 지저분하고 길어질 수 있습니다. 보다 나은 해결책은 각 모듈의 기능을 모듈 객체 내부로 가져오는 것입니다. 다음과 같은 구문을 사용합니다.</p>
-<pre class="brush: js notranslate">import * as Module from './modules/module.js';</pre>
+<pre class="brush: js">import * as Module from './modules/module.js';</pre>
<p>이 모듈은 <code>module.js</code> 내에서 사용할 수 있는 모든 export를 가져옵니다. 그리고 그것들을 객체 <code>Module</code> 의 멤버로 만들고 우리 임의의 효과적인 네임스페이스를 제공합니다.</p>
-<pre class="brush: js notranslate">Module.function1()
+<pre class="brush: js">Module.function1()
Module.function2()
etc.</pre>
<p>다시 한 번 실제 사례를 살펴보겠습니다. <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> 디렉토리로 가면 같은 예제를 볼 수 있지만, 새로운 구문을 이용하기 위해 다시 작성합니다. 모듈에서 export는 모두 다음과 같은 간단한 형식으로 이루어집니다.</p>
-<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
<p>반면에 import는 다음과 같습니다.</p>
-<pre class="brush: js notranslate">import * as Canvas from './modules/canvas.js';
+<pre class="brush: js">import * as Canvas from './modules/canvas.js';
import * as Square from './modules/square.js';
import * as Circle from './modules/circle.js';
@@ -284,7 +284,7 @@ import * as Triangle from './modules/triangle.js';</pre>
<p>각각의 경우에, 지정한 객체 이름 아래에 있는 모듈의 import에 접근할 수 있습니다. 다음은 그 예시입니다.</p>
-<pre class="brush: js notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+<pre class="brush: js">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
Square.reportArea(square1.length, reportList);
Square.reportPerimeter(square1.length, reportList);</pre>
@@ -296,7 +296,7 @@ Square.reportPerimeter(square1.length, reportList);</pre>
<p>우리의 <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> 디렉토리에서 ES 클래스로 다시 작성된 도형 그리기 모듈의 예를 볼 수 있습니다. 예를들어 <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> 파일에는 모든 기능이 단일 클래스에 포함되어 있습니다.</p>
-<pre class="brush: js notranslate">class Square {
+<pre class="brush: js">class Square {
constructor(ctx, listId, length, x, y, color) {
...
}
@@ -310,15 +310,15 @@ Square.reportPerimeter(square1.length, reportList);</pre>
<p>우리는 다음과 같이 export 합니다.</p>
-<pre class="brush: js notranslate">export { Square };</pre>
+<pre class="brush: js">export { Square };</pre>
<p><code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code> 에서 우리는 다음과 같이 import 합니다.</p>
-<pre class="brush: js notranslate">import { Square } from './modules/square.js';</pre>
+<pre class="brush: js">import { Square } from './modules/square.js';</pre>
<p>그런다음 클래스를 이용하여 사각형을 그립니다.</p>
-<pre class="brush: js notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+<pre class="brush: js">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();
square1.reportArea();
square1.reportPerimeter();</pre>
@@ -327,7 +327,7 @@ square1.reportPerimeter();</pre>
<p>모듈을 모아야 할 때가 있을 것입니다. 여러 서브 모듈을 하나의 부모 모듈로 결합하여 여러 단계의 종속성을 가질 수 있습니다. 상위 모듈에서 다음 양식의 export 구문을 사용하할 수 있습니다.</p>
-<pre class="brush: js notranslate">export * from 'x.js'
+<pre class="brush: js">export * from 'x.js'
export { name } from 'x.js'</pre>
<div class="blockIndicator note">
@@ -336,7 +336,7 @@ export { name } from 'x.js'</pre>
<p>예를들어 <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> 디렉토리를 참조하겠습니다. 이 예제에서는 이전 클래스 예제를 기반으로 <code>circle.js</code>, <code>square.js</code>, <code>triangle.js</code> 의 모든 기능을 함께 모으는 <code>shapes.js</code>라는 추가 모듈이 있습니다. 또한 우리는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">shapes</span></font> <code>모듈</code> 디렉토리 안에 있는 서브 디렉토리 내에서 서브 모듈을 이동 시켰습니다. 이제 모듈 구조는 다음과 같습니다.</p>
-<pre class="notranslate">modules/
+<pre>modules/
canvas.js
shapes.js
shapes/
@@ -346,11 +346,11 @@ export { name } from 'x.js'</pre>
<p>각 하위 모듈에서 export 형태는 같습니다. 예)</p>
-<pre class="brush: js notranslate">export { Square };</pre>
+<pre class="brush: js">export { Square };</pre>
<p>다음은 집합(aggregation) 부분입니다. <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code> 안에는 다음과 같은 내용이 포함되어 있습니다.</p>
-<pre class="brush: js notranslate">export { Square } from './shapes/square.js';
+<pre class="brush: js">export { Square } from './shapes/square.js';
export { Triangle } from './shapes/triangle.js';
export { Circle } from './shapes/circle.js';</pre>
@@ -362,13 +362,13 @@ export { Circle } from './shapes/circle.js';</pre>
<p>이제 <code>main.js</code> 파일에서 우리는 세 개의 모듈 클래스를 모두 대체할 수 있습니다.</p>
-<pre class="brush: js notranslate">import { Square } from './modules/square.js';
+<pre class="brush: js">import { Square } from './modules/square.js';
import { Circle } from './modules/circle.js';
import { Triangle } from './modules/triangle.js';</pre>
<p>다음과 같은 한 줄로 작성할 수 있습니다.</p>
-<pre class="brush: js notranslate">import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';</pre>
+<pre class="brush: js">import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';</pre>
<h2 id="Dynamic_module_loading">Dynamic module loading</h2>
@@ -376,7 +376,7 @@ import { Triangle } from './modules/triangle.js';</pre>
<p>이 새로운 기능을 통해 <code>import()</code> 를 함수로 호출하여 모듈 경로를 매개 변수(parameter)로 전달할 수 있습니다. 모듈 객체({{anch("Creating a module object")}} 참조)를 사용하여 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>를 반환하면 해당 객체의 export에 접근할 수 있습니다. </p>
-<pre class="brush: js notranslate">import('/modules/myModule.js')
+<pre class="brush: js">import('/modules/myModule.js')
.then((module) =&gt; {
// Do something with the module.
});</pre>
@@ -387,11 +387,11 @@ import { Triangle } from './modules/triangle.js';</pre>
<p><code>main.js</code> 에서 <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 를 사용하여 각 버튼에 대한 참조를 가져왔습니다. 예를들면 다음과 같습니다.</p>
-<pre class="brush: js notranslate">let squareBtn = document.querySelector('.square');</pre>
+<pre class="brush: js">let squareBtn = document.querySelector('.square');</pre>
<p>그런 다음 각 버튼에 이벤트 리스너를 연결하여 해당 모듈을 누르면, 동적으로 로드되어 도형을 그리는데 사용됩니다.</p>
-<pre class="brush: js notranslate">squareBtn.addEventListener('click', () =&gt; {
+<pre class="brush: js">squareBtn.addEventListener('click', () =&gt; {
import('/js-examples/modules/dynamic-module-imports/modules/square.js').then((Module) =&gt; {
let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();