[모듈 소개] 보완

Author: Violet-Bora-Lee

1-js/13-modules/01-modules-intro/article.md

@@ -3,7 +3,7 @@
 
 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
 
-초기 스크립트는 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈 관련 표준 문법 없이 성장할 수 있었습니다. 새로운 문법을 만들 필요가 없었던 것이죠.
+자바스크립트가 만들어 진지 얼마 안 되었을 때는 자바스크립트로 만든 스크립트의 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈 관련 표준 문법 없이 성장할 수 있었습니다. 새로운 문법을 만들 필요가 없었던 것이죠.
 
 그런데 스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 다양한 시도를 하게 됩니다. 
 
@@ -17,7 +17,7 @@
 
 모듈 시스템은 2015년에 표준으로 등재되었습니다. 이 이후로 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있습니다. 이제 본격적으로 모던 자바스크립트에서 쓰이는 모듈에 대해 알아봅시다.
 
-## 모듈이란?
+## 모듈이란
 
 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다.
 
@@ -45,7 +45,7 @@ alert(sayHi); // 함수
 sayHi('John'); // Hello, John!
 ```
 
-위 예시에서 `import` 지시자는 상대 경로(`./sayHi.js`)를 이용해 모듈을 가져오고 `sayHi.js`에서 내보낸 함수 `sayHi`를 상응하는 변수에 할당합니다.
+위 예시에서 `import` 지시자는 상대 경로(`./sayHi.js`) 기준으로 모듈을 가져오고 `sayHi.js`에서 내보낸 함수 `sayHi`를 상응하는 변수에 할당합니다.
 
 이제 브라우저에서 모듈이 어떻게 동작하는지 예시를 이용해 알아봅시다.
 
@@ -55,10 +55,10 @@ sayHi('John'); // Hello, John!
 
 [codetabs src="say" height="140" current="index.html"]
 
-브라우저가 자동으로 모듈을 가져오고 평가한 다음 이를 실행한 것을 확인할 수 있습니다.
+브라우저가 자동으로 모듈을 가져오고 평가한 다음, 이를 실행한 것을 확인할 수 있습니다.
 
 ```warn header="모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작합니다."
-로컬에서 `file://` 프로토콜을 통해 웹페이지를 열면 `import·export` 지시자가 동작하지 않습니다. 예제를 실행하려면 로컬 웹 서버인 [static-server](https://www.npmjs.com/package/static-server#getting-started)나, 코드 에디터의 '라이브 서버' 익스텐션(Visual Studio Code 에디터의 경우 [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer))을 사용하세요.
+로컬에서 `file://` 프로토콜을 사용해 웹페이지를 열면 `import`, `export` 지시자가 동작하지 않습니다. 예시를 실행하려면 로컬 웹 서버인 [static-server](https://www.npmjs.com/package/static-server#getting-started)나, 코드 에디터의 '라이브 서버' 익스텐션(Visual Studio Code 에디터의 경우 [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer))을 사용하세요.
 ```
 
 ## 모듈의 핵심 기능
@@ -67,7 +67,7 @@ sayHi('John'); // Hello, John!
 
 모든 호스트 환경에 공통으로 적용되는 모듈의 핵심 기능에 대해 알아봅시다.
 
-### '엄격 모드'로 실행됨
+### 엄격 모드로 실행됨
 
 모듈은 항상 `엄격 모드(use strict)`로 실행됩니다. 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킵니다. 
 
@@ -108,15 +108,15 @@ sayHi('John'); // Hello, John!
 </script>
 ```
 
-참고로, 브라우저 환경에서 부득이하게 window 레벨 전역 변수를 만들어야 한다면 `window` 객체에 변수를 명시적으로 할당하고 `window.user`와 같이 접근하는 방식을 취하시면 됩니다. 그런데 이 방법은 정말 필요한 경우에만 사용하길 권유합니다.
+참고로 브라우저 환경에서 부득이하게 window 레벨 전역 변수를 만들어야 한다면 `window` 객체에 변수를 명시적으로 할당하고 `window.user`와 같이 접근하는 방식을 취하시면 됩니다. 그런데 이 방법은 정말 필요한 경우에만 사용하길 권유합니다.
 
 ### 단 한 번만 평가됨
 
 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행됩니다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 집니다.
 
 이런 작동방식은 중요한 결과를 초래합니다. 예시를 통해 이에 대해 알아봅시다.
 
-alert 함수가 있는 모듈(`alert.js`)을 여러 모듈에서 가져오기로 해봅시다. alert 창은 단 한 번만 나타납니다.
+alert 함수가 있는 모듈(`alert.js`)을 여러 모듈에서 가져오기로 해봅시다. 얼럿 창은 단 한 번만 나타납니다.
 
 ```js
 // 📁 alert.js
@@ -133,7 +133,7 @@ import `./alert.js`; // 얼럿창에 '모듈이 평가되었습니다!'가 출
 import `./alert.js`; // 아무 일도 발생하지 않습니다.
 ```
 
-실무에선 최상위 레벨 모듈을 대개 초기화나 내부 데이터 구조를 만들 때 사용합니다. 이것들을 내보내 재사용하는 것이죠.
+실무에선 최상위 레벨 모듈을 대개 초기화나 내부에서 쓰이는 데이터 구조를 만들고 이를 내보내 재사용하고 싶을 때 사용합니다.
 
 이제 좀 더 어려운 예시를 살펴보겠습니다.
 
@@ -167,7 +167,7 @@ alert(admin.name); // Pete
 
 자, 다시 한번 말씀드리겠습니다. 모듈은 단 한 번만 실행되고 실행된 모듈은 필요한 곳에 공유되므로 어느 한 모듈에서 `admin` 객체를 수정하면 다른 모듈에서도 변경사항을 확인할 수 있습니다. 
 
-이런 특징을 이용하면 모듈 *설정*을 쉽게 할 수 있습니다. 최초로 실행되는 모듈의 객체 프로퍼티를 원하는 대로 설정하면 다른 모듈에서 이 설정을 그대로 사용할 수 있기 때문이죠.
+이런 특징을 이용하면 모듈 *설정(configuration)*을 쉽게 할 수 있습니다. 최초로 실행되는 모듈의 객체 프로퍼티를 원하는 대로 설정하면 다른 모듈에서 이 설정을 그대로 사용할 수 있기 때문이죠.
 
 예시를 통해 이에 대해 자세히 알아봅시다. 아래 `admin.js` 모듈은 어떤 특정한 기능을 제공해주는데, 이 기능을 사용하려면 외부에서 `admin` 객체와 관련된 인증 정보를 받아와야 한다고 가정해봅시다.
 
@@ -185,7 +185,7 @@ export function sayHi() {
 ```js
 // 📁 init.js
 import {admin} from './admin.js';
-admin.name = "Pete";
+admin.name = "보라";
 ```
 
 또 다른 모듈에서도 `admin.name`에 저장된 정보를 볼 수 있다는 걸 확인해 봅시다.
@@ -194,24 +194,24 @@ admin.name = "Pete";
 // 📁 other.js
 import {admin, sayHi} from './admin.js';
 
-alert(admin.name); // *!*Pete*/!*
+alert(admin.name); // *!*보라*/!*
 
-sayHi(); // *!*Pete*/!*님, 안녕하세요!
+sayHi(); // *!*보라*/!*님, 안녕하세요!
 ```
 
 ### import.meta
 
 `import.meta` 객체는 현재 모듈에 대한 정보를 제공해줍니다.
 
-호스트 환경에 따라 제공하는 정보의 내용은 다른데, 브라우저 환경에선 스크립트의 url 정보를 얻을 수 있습니다. HTML 안에 있는 모듈이라면, 현재 실행 중인 웹페이지의 url 정보를 얻을 수 있습니다.
+호스트 환경에 따라 제공하는 정보의 내용은 다른데, 브라우저 환경에선 스크립트의 URL 정보를 얻을 수 있습니다. HTML 안에 있는 모듈이라면, 현재 실행 중인 웹페이지의 URL 정보를 얻을 수 있습니다.
 
 ```html run height=0
 <script type="module">
   alert(import.meta.url); // script URL (인라인 스크립트가 위치해 있는 html 페이지의 URL)
 </script>
 ```
 
-### 'this'는 undefined
+### this는 undefined
 
 사소한 내용이지만 튜토리얼의 완전성을 위해 이 내용을 언급하고 넘어가야 할 것 같습니다.
 
@@ -251,7 +251,7 @@ sayHi(); // *!*Pete*/!*님, 안녕하세요!
 ```html run
 <script type="module">
 *!*
-  alert(typeof button); // 모듈 스크립트는 지연 실행되기 때문에 페이지가 모두 로드되고 난 다음에 얼럿 함수가 실행되므로
+  alert(typeof button); // 모듈 스크립트는 지연 실행되기 때문에 페이지가 모두 로드되고 난 다음에 alert 함수가 실행되므로
 */!*
   // 얼럿창에 object가 정상적으로 출력됩니다. 모듈 스크립트는 아래쪽의 button 요소를 '볼 수' 있죠.
 </script>
@@ -272,7 +272,7 @@ sayHi(); // *!*Pete*/!*님, 안녕하세요!
 
 모듈 스크립트는 지연 실행되기 때문에 문서 전체가 처리되기 전까지 실행되지 않고, 일반 스크립트는 바로 실행되므로 위와 같은 결과가 나타났습니다.
 
-모듈을 사용할 땐 HTML 페이지가 완전히 나타난 이후에 모듈이 실행된다는 점에 항상 유의해야 합니다. 페이지 내 특정 기능이 모듈 스크립트에 의존적인 경우, 모듈이 완전히 로딩되기 전에 페이지만 먼저 사용자에게 노출되면 사용자가 혼란을 느낄 수 있기 때문입니다. 모듈 스크립트를 불러오는 동안엔 투명 오버레이나 '로딩 인디케이터(loading indicator)'를 보여주어 사용자의 혼란을 예방해 주도록 합시다. 
+모듈을 사용할 땐 HTML 페이지가 완전히 나타난 이후에 모듈이 실행된다는 점에 항상 유의해야 합니다. 페이지 내 특정 기능이 모듈 스크립트에 의존적인 경우, 모듈이 완전히 로딩되기 전에 페이지가 먼저 사용자에게 노출되면 사용자가 혼란을 느낄 수 있기 때문입니다. 모듈 스크립트를 불러오는 동안엔 투명 오버레이나 '로딩 인디케이터(loading indicator)'를 보여주어 사용자의 혼란을 예방해 주도록 합시다. 
 
 ### 인라인 스크립트의 비동기 처리
 
@@ -316,19 +316,19 @@ sayHi(); // *!*Pete*/!*님, 안녕하세요!
 
     이 특징은 보안을 강화해 줍니다.
 
-### '경로가 없는' 모듈은 금지
+### 경로가 없는 모듈은 금지
 
-브라우저 환경에서 `import`는 반드시 상대 혹은 절대 URL 앞에 와야 합니다. 경로가 없는 모듈은 허용하지 않습니다.
+브라우저 환경에서 `import`는 반드시 상대 혹은 절대 URL 앞에 와야 합니다. '경로가 없는' 모듈은 허용되지 않습니다.
 
 아래 예제에서 `import`는 무효합니다.
 ```js
 import {sayHi} from 'sayHi'; // Error!
 // './sayHi.js'와 같이 경로 정보를 지정해 주어야 합니다.
 ```
 
-Node.js나 번들링 툴은 경로가 없어도 해당 모듈을 찾수 있는 방법을 알기 때문에 경로가 없는 모듈을 사용할 수 있습니다. 하지만 브라우저는 경로 없는 모듈을 지원하지 않습니다.
+Node.js나 번들링 툴은 경로가 없어도 해당 모듈을 찾을 수 있는 방법을 알기 때문에 경로가 없는 모듈을 사용할 수 있습니다. 하지만 브라우저는 경로 없는 모듈을 지원하지 않습니다.
 
-### 호환을 위한 'nomodule'
+### 호환을 위한 nomodule
 
 구식 브라우저는 `type="module"`을 해석하지 못하기 때문에 모듈 타입의 스크립트를 만나면 이를 무시하고 넘어갑니다. `nomodule` 속성을 사용하면 이런 상황을 대비할 수 있습니다.
 
@@ -339,7 +339,7 @@ Node.js나 번들링 툴은 경로가 없어도 해당 모듈을 찾수 있는 
 
 <script nomodule>
   alert("type=module을 해석할 수 있는 브라우저는 nomodule 타입의 스크립트는 넘어갑니다. 따라서 이 alert 문은 실행되지 않습니다.")
-  alert("오래된 브라우저를 사용하고 있다면, type=module이 붙은 스크립트는 무시합니다. 대신 이 alert 문이 실행됩니다.");
+  alert("오래된 브라우저를 사용하고 있다면 type=module이 붙은 스크립트는 무시됩니다. 대신 이 alert 문이 실행됩니다.");
 </script>
 ```
 
@@ -351,17 +351,17 @@ Node.js나 번들링 툴은 경로가 없어도 해당 모듈을 찾수 있는 
 
 빌드 툴의 역할은 아래와 같습니다.
 
-1. HTML의 `<script type="module">`에 넣을 '주요' 모듈('진입점' 역할을 하는 모듈)을 선택합니다. 
+1. HTML의 `<script type="module">`에 넣을 '주요(main)' 모듈('진입점' 역할을 하는 모듈)을 선택합니다. 
 2. '주요' 모듈에 의존하고 있는 모듈 분석을 시작으로 모듈 간의 의존 관계를 파악합니다.
 3. 모듈 전체를 한데 모아 하나의 큰 파일을 만듭니다(설정에 따라 여러 개의 파일을 만드는 것도 가능합니다). 이 과정에서 `import`문이 번들러 내 함수로 대체되므로 기존 기능은 그대로 유지됩니다.
 4. 이런 과정 중에 변형이나 최적화도 함께 수행됩니다.
     - 도달 가능하지 않은 코드는 삭제됩니다.
-    - 내보내진 모듈 중 쓰임처가 없는 모듈을 삭제합니다('가지치기(tree-shaking)').
-    - `console`, `debugger` 같은 개발 관련 코드가 삭제됩니다.
-    - 최신 자바스크립트 문법이 사용된 경우 [바벨(Babel)](https://babeljs.io/)을 사용하여 같은 기능을 하는 낮은 버전의 스크립트로 변환합니다.
+    - 내보내진 모듈 중 쓰임처가 없는 모듈을 삭제합니다(가지치기(tree-shaking)).
+    - `console`, `debugger` 같은 개발 관련 코드를 삭제합니다.
+    - 최신 자바스크립트 문법이 사용된 경우 [바벨(Babel)](https://babeljs.io/)을 사용해 동일한 기능을 하는 낮은 버전의 스크립트로 변환합니다.
     - 공백 제거, 변수 이름 줄이기 등으로 산출물의 크기를 줄입니다.
 
-번들링 툴을 사용하면 스크립트들은 하나 혹은 여러 개의 파일로 번들링 됩니다. 이때 번들링 전 스크립트에 있던 `import/export`문은 특별한 번들러 함수로 대체됩니다. 번들링 과정이 끝나면 기존 스크립트에서 `import/export`가 사라지기 때문에 `type="module"`이 필요 없어집니다. 따라서 아래와 같이 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급할 수 있습니다. 
+번들링 툴을 사용하면 스크립트들은 하나 혹은 여러 개의 파일로 번들링 됩니다. 이때 번들링 전 스크립트에 있던 `import`, `export`문은 특별한 번들러 함수로 대체됩니다. 번들링 과정이 끝나면 기존 스크립트에서 `import`, `export`가 사라지기 때문에 `type="module"`이 필요 없어집니다. 따라서 아래와 같이 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급할 수 있습니다.
 
 ```html
 <!-- 웹팩과 같은 툴로 번들링 과정을 거친 스크립트인 bundle.js -->
@@ -374,12 +374,12 @@ Node.js나 번들링 툴은 경로가 없어도 해당 모듈을 찾수 있는 
 
 지금까지 배운 내용을 요약해봅시다.
 
-1. 모듈은 하나의 파일입니다. 브라우저에서 `import/export` 지시자를 사용하려면 `<script type="module">`같은 속성이 필요합니다. 모듈은 아래와 같은 특징을 지닙니다.
+1. 모듈은 하나의 파일입니다. 브라우저에서 `import` ,`export` 지시자를 사용하려면 `<script type="module">`같은 속성이 필요합니다. 모듈은 아래와 같은 특징을 지닙니다.
     - 지연 실행됩니다.
     - 인라인 모듈 스크립트도 비동기 처리 할 수 있습니다.
-    - 외부 오리진(도메인, 프로토콜, 포트)에서 스크립트를 불러오려면 CORS 헤더가 있어야 합니다.
+    - 외부 오리진(도메인이나 프로토콜, 포트가 다른 오리진)에서 스크립트를 불러오려면 CORS 헤더가 있어야 합니다.
     - 중복된 외부 스크립트는 무시됩니다.
-2. 모듈은 자신만의 스코프를 갖습니다. 모듈 간 기능 공유는 `import/export`로 할 수 있습니다.
+2. 모듈은 자신만의 스코프를 갖습니다. 모듈 간 기능 공유는 `import`, `export`로 할 수 있습니다.
 3. 항상 엄격 모드로 실행(`use strict`)됩니다.
 4. 모듈 내 코드는 단 한 번만 실행됩니다. 모듈을 내보내면 이 모듈을 가져오기 하는 모듈 모두가 내보내진 모듈을 공유합니다.