2025-01-26T02:15:33

2025-01-26 02:15:33 +09:00
parent f43f6328c0
commit f867e689aa
22 changed files with 2702 additions and 213 deletions
--- a/doc/11_모듈.md
+++ b/doc/11_모듈.md
@@ -0,0 +1,158 @@
+# 모듈
+
+자바스크립트의 모듈은 코드를 여러 파일로 나누어 관리하고 재사용성을 높이기 위한 기능입니다. 모듈은 기능별로 코드를 분리하고 서로 필요한 부분만 연결하여 유지보수성과 가독성을 크게 향상시킵니다.
+
+모듈은 프로그램의 특정 기능이나 데이터를 캡슐화한 독립적인 코드 단위입니다.
+
+* 목적: 코드를 더 체계적으로 관리하고, 재사용성과 협업의 효율성을 높이기 위함.
+* 자바스크립트는 **ECMAScript 2015 (ES6)**부터 공식적으로 모듈 시스템을 도입했습니다.
+
+## 모듈 내보내기 (Export)
+모듈에서 함수를 정의하거나 데이터를 외부에서 사용할 수 있도록 export 키워드를 사용합니다.
+### Named Export
+여러 값을 내보낼 때 사용합니다.
+```javascript
+// math.js
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+```
+### Default Export
+모듈에서 하나의 기본(default) 값을 내보낼 때 사용합니다.
+```javascript
+// greet.js
+export default function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+## 모듈 가져오기 (Import)
+다른 파일에서 import 키워드를 사용해 모듈을 가져올 수 있습니다.
+### Default Import
+내보낸 이름과 동일한 이름으로 가져옵니다.
+```javascript
+// main.js
+import { add, subtract } from "./math.js";
+import greet from "./greet.js";
+
+console.log(add(2, 3));        // 5
+console.log(subtract(5, 2));   // 3
+console.log(greet("Alice"));   // Hello, Alice!
+```
+
+### Named Import
+내보낸 기본 값을 원하는 이름으로 가져올 수 있습니다.
+```javascript
+import { 변수1 as 별칭1 } from '모듈 경로';
+```
+
+### 전체 가져오기
+모든 내보낸 값을 하나의 객체에 담아 가져옵니다.
+```javascript
+// main.js
+import * as math from "./math.js";
+
+console.log(math.add(2, 3));       // 5
+console.log(math.subtract(5, 2));  // 3
+```
+
+## 모듈 스코프 (Module Scope)
+모듈 내부에 선언된 변수는 기본적으로 모듈 스코프를 가집니다.
+
+다른 파일에서 접근할 수 없으며, 명시적으로 export해야 외부에서 사용할 수 있습니다.
+
+```javascript
+// secret.js
+const secret = "이 변수는 외부에서 접근할 수 없습니다.";
+export const publicInfo = "이 변수는 외부에서 사용할 수 있습니다.";
+```
+
+## 모듈 의존성 관리
+모듈은 필요한 모듈을 가져오고(import) 불필요한 의존성을 제거하면서 코드를 최적화할 수 있습니다.
+
+## 모듈 사용 환경
+### 브라우저에서 모듈 사용
+HTML 파일에서 `<script>` 태그에 `type="module"`을 추가해야 합니다.
+```html
+<script type="module" src="main.js"></script>
+```
+
+### Node.js에서 모듈 사용
+Node.js에서는 CommonJS 모듈 시스템을 기본으로 사용하지만, ES 모듈도 지원합니다.
+#### CommonJS 방식
+```javascript
+// math.js
+exports.add = (a, b) => a + b;
+exports.subtract = (a, b) => a - b;
+
+// main.js
+const math = require("./math.js");
+console.log(math.add(2, 3));   // 5
+```
+#### ES 모듈 방식
+Node.js에서도 `type: "module"`을 설정하여 ES 모듈을 사용할 수 있습니다.
+```json
+// package.json
+{
+  "type": "module"
+}
+```
+
+## 모듈의 장단점
+### 장점
+* 코드 구조화: 코드의 기능별로 분리하여 가독성과 유지보수성을 향상시킴.
+* 재사용성: 한 번 작성한 모듈을 여러 프로젝트에서 재사용 가능.
+* 의존성 관리: 명시적인 import/export로 필요한 모듈만 가져올 수 있음.
+* 스코프 분리: 전역 스코프 오염을 방지하여 안전한 코드 작성 가능.
+
+### 단점
+* 브라우저 지원: 모든 브라우저에서 모듈을 완전히 지원하지 않을 수 있으므로 번들러(Webpack, Rollup 등)를 사용하는 것이 일반적입니다.
+* 모듈 로딩 시간: 많은 모듈을 로드하면 초기 로딩 시간이 증가할 수 있습니다.
+
+## 번들러와 모듈 시스템
+현대적인 웹 애플리케이션 개발에서는 여러 모듈을 하나의 파일로 묶어주는 번들러를 사용합니다.
+
+* Webpack: 가장 널리 사용되는 번들러.
+* Rollup: 간결한 설정으로 효율적인 번들링 제공.
+* Vite: 빠른 개발 환경을 제공하며 ES 모듈을 기본으로 사용.
+
+## 사용 예
+```
+project/
+│
+├── index.html
+├── main.js
+├── math.js
+└── greet.js
+```
+```javascript
+// math.js
+export const add = (a, b) => a + b;
+export const multiply = (a, b) => a * b;
+```
+```javascript
+// greet.js
+export default function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+```javascript
+// main.js
+import { add, multiply } from "./math.js";
+import greet from "./greet.js";
+
+console.log(add(2, 3));        // 5
+console.log(multiply(4, 5));   // 20
+console.log(greet("Alice"));   // Hello, Alice!
+```
+```html
+<!DOCTYPE html>
+<!-- index.html -->
+<html>
+<head>
+  <title>JavaScript Modules Example</title>
+</head>
+<body>
+  <script type="module" src="main.js"></script>
+</body>
+</html>
+```