158 lines
4.9 KiB
Markdown
158 lines
4.9 KiB
Markdown
# 모듈
|
|
|
|
자바스크립트의 모듈은 코드를 여러 파일로 나누어 관리하고 재사용성을 높이기 위한 기능입니다. 모듈은 기능별로 코드를 분리하고 서로 필요한 부분만 연결하여 유지보수성과 가독성을 크게 향상시킵니다.
|
|
|
|
모듈은 프로그램의 특정 기능이나 데이터를 캡슐화한 독립적인 코드 단위입니다.
|
|
|
|
* 목적: 코드를 더 체계적으로 관리하고, 재사용성과 협업의 효율성을 높이기 위함.
|
|
* 자바스크립트는 **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>
|
|
``` |