elex/javascript-examples

Fork 0

Files

Elex f867e689aa 2025-01-26T02:15:33

2025-01-26 02:15:33 +09:00

4.9 KiB

Raw Permalink Blame History

모듈

자바스크립트의 모듈은 코드를 여러 파일로 나누어 관리하고 재사용성을 높이기 위한 기능입니다. 모듈은 기능별로 코드를 분리하고 서로 필요한 부분만 연결하여 유지보수성과 가독성을 크게 향상시킵니다.

모듈은 프로그램의 특정 기능이나 데이터를 캡슐화한 독립적인 코드 단위입니다.

목적: 코드를 더 체계적으로 관리하고, 재사용성과 협업의 효율성을 높이기 위함.
자바스크립트는 **ECMAScript 2015 (ES6)**부터 공식적으로 모듈 시스템을 도입했습니다.

모듈 내보내기 (Export)

모듈에서 함수를 정의하거나 데이터를 외부에서 사용할 수 있도록 export 키워드를 사용합니다.

Named Export

여러 값을 내보낼 때 사용합니다.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Default Export

모듈에서 하나의 기본(default) 값을 내보낼 때 사용합니다.

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

모듈 가져오기 (Import)

다른 파일에서 import 키워드를 사용해 모듈을 가져올 수 있습니다.

Default Import

내보낸 이름과 동일한 이름으로 가져옵니다.

// 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

내보낸 기본 값을 원하는 이름으로 가져올 수 있습니다.

import { 변수1 as 별칭1 } from '모듈 경로';

전체 가져오기

모든 내보낸 값을 하나의 객체에 담아 가져옵니다.

// 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해야 외부에서 사용할 수 있습니다.

// secret.js
const secret = "이 변수는 외부에서 접근할 수 없습니다.";
export const publicInfo = "이 변수는 외부에서 사용할 수 있습니다.";

모듈 의존성 관리

모듈은 필요한 모듈을 가져오고(import) 불필요한 의존성을 제거하면서 코드를 최적화할 수 있습니다.

모듈 사용 환경

브라우저에서 모듈 사용

HTML 파일에서 <script> 태그에 type="module"을 추가해야 합니다.

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

Node.js에서 모듈 사용

Node.js에서는 CommonJS 모듈 시스템을 기본으로 사용하지만, ES 모듈도 지원합니다.

CommonJS 방식

// 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 모듈을 사용할 수 있습니다.

// package.json
{
  "type": "module"
}

모듈의 장단점

장점

코드 구조화: 코드의 기능별로 분리하여 가독성과 유지보수성을 향상시킴.
재사용성: 한 번 작성한 모듈을 여러 프로젝트에서 재사용 가능.
의존성 관리: 명시적인 import/export로 필요한 모듈만 가져올 수 있음.
스코프 분리: 전역 스코프 오염을 방지하여 안전한 코드 작성 가능.

단점

브라우저 지원: 모든 브라우저에서 모듈을 완전히 지원하지 않을 수 있으므로 번들러(Webpack, Rollup 등)를 사용하는 것이 일반적입니다.
모듈 로딩 시간: 많은 모듈을 로드하면 초기 로딩 시간이 증가할 수 있습니다.

번들러와 모듈 시스템

현대적인 웹 애플리케이션 개발에서는 여러 모듈을 하나의 파일로 묶어주는 번들러를 사용합니다.

Webpack: 가장 널리 사용되는 번들러.
Rollup: 간결한 설정으로 효율적인 번들링 제공.
Vite: 빠른 개발 환경을 제공하며 ES 모듈을 기본으로 사용.

사용 예

project/
│
├── index.html
├── main.js
├── math.js
└── greet.js

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// 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!

<!DOCTYPE html>
<!-- index.html -->
<html>
<head>
  <title>JavaScript Modules Example</title>
</head>
<body>
  <script type="module" src="main.js"></script>
</body>
</html>

4.9 KiB Raw Permalink Blame History

모듈