From 06bc06d023186d8d36f90c88e76a9e4c03446534 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Thu, 16 Dec 2021 02:01:24 +0900 Subject: Remove notranslate from JS guides --- files/ko/web/javascript/guide/modules/index.html | 74 ++++++++++++------------ 1 file changed, 37 insertions(+), 37 deletions(-) (limited to 'files/ko/web/javascript/guide/modules') 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

첫 번째 예제(basic-modules)를 보면 다음과 같은 파일 구조가 있습니다.

-
index.html
+
index.html
 main.js
 modules/
     canvas.js
@@ -77,7 +77,7 @@ modules/
 
 
이를 사용하는 가장 쉬운 방법은 모듈 밖으로 내보내려는 항목 앞에 (export를) 배치하는 것입니다. 예를들면 다음과 같습니다.

 
-
export const name = 'square';
+
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) {
 
 
여러 항목을 내보내는 더 편리한 방법은 모듈 파일 끝에 하나의 export 문을 사용하는 것입니다. 그 다음에 내보내려는 기능들을 쉼표로 구분하여 나열하고 중괄호로 묶습니다.

 
-
export { name, draw, reportArea, reportPerimeter };

+
export { name, draw, reportArea, reportPerimeter };

 
 
Importing features into your script

 
 
모듈에서 일부 기능을 내보낸 후에는, 이를 사용할 수 있도록 우리가 사용할 스크립트로 가져와야 합니다. 가장 간단한 방법은 다음과 같습니다.

 
-
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

+
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

 
 
import 문(statement)을 사용하고, 가져올 목록을 쉼표로 구분하여 나열한 뒤 괄호로 묶습니다. 그 뒤에는 from을 쓰고 모듈 파일의 경로를 작성합니다. (사이트 루트에 연관된 경로로, 우리의 basic-modules 예제는 /js-examples/modules/basic-modules 입니다) main.js에서 이러한 코드를 볼 수 있습니다.

 
@@ -109,11 +109,11 @@ export function draw(ctx, length, x, y, color) {
 
 
예를들면,

 
-
/js-examples/modules/basic-modules/modules/square.js

+
/js-examples/modules/basic-modules/modules/square.js

 
 
이렇게 쓸 수 있습니다.

 
-
./modules/square.js

+
./modules/square.js

 
 
main.js에서 이러한 코드를 볼 수 있습니다.

 
@@ -123,7 +123,7 @@ export function draw(ctx, length, x, y, color) {
 
 
우리의 스크립트에 기능을 가져오면 동일한 파일 내에 정의한 것처럼 기능을 사용할 수 있습니다. 다음은 main.js 의 import 행 아래에 있습니다.

 
-
let myCanvas = create('myCanvas', document.body, 480, 320);
+
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);
 
 
이 스크립트를 모듈로 선언하려면 {{htmlelement("script")}} 요소(element)에 type="module" 을 포함시켜야 합니다.

 
-
<script type="module" src="main.js"></script>

+
<script type="module" src="main.js"></script>

 
 
기본적으로 모듈 기능을 가져오는 스크립트는 최상위 모듈로 작동합니다. 이를 생략하면 파이어폭스로 예를들면, "SyntaxError: import declarations may only appear at top level of a module"라는 오류를 줍니다.

 
@@ -164,23 +164,23 @@ reportPerimeter(square1.length, reportList);
 
 
예제를 가지고 어떻게 작동하는지 살펴보겠습니다. 예제 중 basic-modules 프로젝트의 square.js 파일에서 임의의 색상, 크기, 위치로 갖는 사각형을 만드는 randomSquare() 라는 함수를 찾을 수 있습니다. 이것을 기본값으로 export하려고 하므로, 파일의 맨 아래에 다음과 같이 씁니다.

 
-
export default randomSquare;

+
export default randomSquare;

 
 
중괄호가 없음에 주의하세요.

 
 
대신 함수 앞에 export default 를 추가하고, 다음과 같이 익명함수로 선언할 수 있습니다.

 
-
export default function(ctx) {
+
export default function(ctx) {
   ...
 }

 
 
main.js 파일에서 다음 코드처럼 사용하면, default function이 import 됩니다.

 
-
import randomSquare from './modules/square.js';

+
import randomSquare from './modules/square.js';

 
 
다시 말하지만, 중괄호가 없다는 점에 유의하세요. 하나의 모듈은 하나의 default export만 허용하기 때문에 우리는 randomSquare 가 해당 모듈임을 알 수 있습니다. 위의 코드는 아래의 코드를 단축하여 사용한 것입니다.

 
-
import {default as randomSquare} from './modules/square.js';

+
import {default as randomSquare} from './modules/square.js';

 
 

 
주의: export한 항목의 이름을 바꾸는 구문은 {{anch("Renaming imports and exports")}} 섹션에서 설명합니다.

@@ -198,7 +198,7 @@ reportPerimeter(square1.length, reportList);
 
 
예를들어 다음 두 가지 방법은 약간의 차이가 있지만, 두 방법 모두 동일한 작업을 수행하고 있습니다.

 
-
// inside module.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';

 
-
// inside module.js
+
// inside module.js
 export { function1, function2 };
 
 // inside main.js
@@ -218,11 +218,11 @@ import { function1 as newFunctionName,
 
 
이 모듈듈 각각에는 내부적으로 동일한 이름의 기능이 있습니다. 따라서 각각 하단에 동일한 export 문(statement)이 있습니다.

 
-
export { name, draw, reportArea, reportPerimeter };

+
export { name, draw, reportArea, reportPerimeter };

 
 
이것들을 main.js에 가져올 때 우리는 다음과 같이 시도할 수 있습니다.

 
-
import { name, draw, reportArea, reportPerimeter } from './modules/square.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';

 
@@ -230,7 +230,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
 
 
대신 import가 고유하도록(식별 가능하도록) 이름을 변경해야 합니다.

 
-
import { name as squareName,
+
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,
 
 
다음과 같이 import하는 파일 대신 모듈 파일에서 문제를 해결할 수도 있습니다.

 
-
// in square.js
+
// in square.js
 export { name as squareName,
          draw as drawSquare,
          reportArea as reportSquareArea,
          reportPerimeter as reportSquarePerimeter };

 
-
// in main.js
+
// in main.js
 import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';

 
 
그리고 이것은 똑같이 작동 할 것입니다. 사용하는 스타일은 개인의 취향이지만, 모듈 코드를 그대로 두고 import 를 변경하는 것이 더 합리적입니다. 특히 제어 권한이 없는 써드 파티 모듈에서 import를 사용하는 경우에 특히 유용합니다.

@@ -262,21 +262,21 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from
 
 
위의 방법은 정상적으로 작동하지만, 다소 지저분하고 길어질 수 있습니다. 보다 나은 해결책은 각 모듈의 기능을 모듈 객체 내부로 가져오는 것입니다. 다음과 같은 구문을 사용합니다.

 
-
import * as Module from './modules/module.js';

+
import * as Module from './modules/module.js';

 
 
이 모듈은 module.js 내에서 사용할 수 있는 모든 export를 가져옵니다. 그리고 그것들을 객체 Module 의 멤버로 만들고 우리 임의의 효과적인 네임스페이스를 제공합니다.

 
-
Module.function1()
+
Module.function1()
 Module.function2()
 etc.

 
 
다시 한 번 실제 사례를 살펴보겠습니다. module-objects 디렉토리로 가면 같은 예제를 볼 수 있지만, 새로운 구문을 이용하기 위해 다시 작성합니다. 모듈에서 export는 모두 다음과 같은 간단한 형식으로 이루어집니다.

 
-
export { name, draw, reportArea, reportPerimeter };

+
export { name, draw, reportArea, reportPerimeter };

 
 
반면에 import는 다음과 같습니다.

 
-
import * as Canvas from './modules/canvas.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';

 
 
각각의 경우에, 지정한 객체 이름 아래에 있는 모듈의 import에 접근할 수 있습니다. 다음은 그 예시입니다.

 
-
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
 Square.reportArea(square1.length, reportList);
 Square.reportPerimeter(square1.length, reportList);

 
@@ -296,7 +296,7 @@ Square.reportPerimeter(square1.length, reportList);

 
 
우리의 classes 디렉토리에서 ES 클래스로 다시 작성된 도형 그리기 모듈의 예를 볼 수 있습니다. 예를들어 square.js 파일에는 모든 기능이 단일 클래스에 포함되어 있습니다.

 
-
class Square {
+
class Square {
   constructor(ctx, listId, length, x, y, color) {
     ...
   }
@@ -310,15 +310,15 @@ Square.reportPerimeter(square1.length, reportList);

 
 
우리는 다음과 같이 export 합니다.

 
-
export { Square };

+
export { Square };

 
 
main.js 에서 우리는 다음과 같이 import 합니다.

 
-
import { Square } from './modules/square.js';

+
import { Square } from './modules/square.js';

 
 
그런다음 클래스를 이용하여 사각형을 그립니다.

 
-
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
 square1.draw();
 square1.reportArea();
 square1.reportPerimeter();

@@ -327,7 +327,7 @@ square1.reportPerimeter();

 
 
모듈을 모아야 할 때가 있을 것입니다. 여러 서브 모듈을 하나의 부모 모듈로 결합하여 여러 단계의 종속성을 가질 수 있습니다. 상위 모듈에서 다음 양식의 export 구문을 사용하할 수 있습니다.

 
-
export * from 'x.js'
+
export * from 'x.js'
 export { name } from 'x.js'

 
 

@@ -336,7 +336,7 @@ export { name } from 'x.js'

 
 
예를들어 module-aggregation 디렉토리를 참조하겠습니다. 이 예제에서는 이전 클래스 예제를 기반으로 circle.js, square.js, triangle.js 의 모든 기능을 함께 모으는 shapes.js라는 추가 모듈이 있습니다. 또한 우리는 shapes 모듈 디렉토리 안에 있는 서브 디렉토리 내에서 서브 모듈을 이동 시켰습니다. 이제 모듈 구조는 다음과 같습니다.

 
-
modules/
+
modules/
   canvas.js
   shapes.js
   shapes/
@@ -346,11 +346,11 @@ export { name } from 'x.js'

 
 
각 하위 모듈에서 export 형태는 같습니다. 예)

 
-
export { Square };

+
export { Square };

 
 
다음은 집합(aggregation) 부분입니다. shapes.js 안에는 다음과 같은 내용이 포함되어 있습니다.

 
-
export { Square } from './shapes/square.js';
+
export { Square } from './shapes/square.js';
 export { Triangle } from './shapes/triangle.js';
 export { Circle } from './shapes/circle.js';

 
@@ -362,13 +362,13 @@ export { Circle } from './shapes/circle.js';

 
 
이제 main.js 파일에서 우리는 세 개의 모듈 클래스를 모두 대체할 수 있습니다.

 
-
import { Square } from './modules/square.js';
+
import { Square } from './modules/square.js';
 import { Circle } from './modules/circle.js';
 import { Triangle } from './modules/triangle.js';

 
 
다음과 같은 한 줄로 작성할 수 있습니다.

 
-
import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';

+
import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';

 
 
Dynamic module loading

 
@@ -376,7 +376,7 @@ import { Triangle } from './modules/triangle.js';

 
 
이 새로운 기능을 통해 import() 를 함수로 호출하여 모듈 경로를 매개 변수(parameter)로 전달할 수 있습니다. 모듈 객체({{anch("Creating a module object")}} 참조)를 사용하여 promise를 반환하면 해당 객체의 export에 접근할 수 있습니다. 

 
-
import('/modules/myModule.js')
+
import('/modules/myModule.js')
   .then((module) => {
     // Do something with the module.
   });

@@ -387,11 +387,11 @@ import { Triangle } from './modules/triangle.js';

 
 
main.js 에서 document.querySelector() 를 사용하여 각 버튼에 대한 참조를 가져왔습니다. 예를들면 다음과 같습니다.

 
-
let squareBtn = document.querySelector('.square');

+
let squareBtn = document.querySelector('.square');

 
 
그런 다음 각 버튼에 이벤트 리스너를 연결하여 해당 모듈을 누르면, 동적으로 로드되어 도형을 그리는데 사용됩니다.

 
-
squareBtn.addEventListener('click', () => {
+
squareBtn.addEventListener('click', () => {
   import('/js-examples/modules/dynamic-module-imports/modules/square.js').then((Module) => {
     let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
     square1.draw();
-- 
cgit v1.2.3-54-g00ecf