모듈 시스템

모듈 (Module)

모듈은 재사용 가능한 코드의 집합으로, 특정 기능을 하나의 단위로 묶어 관리할 수 있는 구조다. 중복되는 기능을 작은 단위로 나누어 쉽게 재사용할 수 있고, 가독성과 유지보수성을 높이는 데 도움이 된다. 자바스크립트에서 모듈은 보통 파일 단위로 구성되며, 필요할 때 다른 파일에서 해당 모듈을 가져와 사용할 수 있다.

모듈의 필요성

초기 자바스크립트는 모든 코드를 하나의 HTML <script> 태그 안에 작성했기 때문에 다음과 같은 문제가 있었다:

• 전역 네임스페이스 오염
• 파일 크기 증가로 인한 유지보수 어려움
• 재사용성 부족

이를 해결하기 위해 모듈 시스템이 등장했고, ES6부터는 자바스크립트 자체적으로 import/export 문법을 통한 모듈 시스템(ESM)을 지원한다.

모듈 특징

• 모듈은 자체 스코프(고유한 범위)를 가진다.
• 모듈 내 변수는 기본적으로 비공개(private)이며, 외부에 공개하려면 export 필요하다.
• 모듈은 엄격 모드(strict mode)에서 동작한다.
• 모듈은 비동기적으로 로드된다.

모듈 시스템 (ES6 ECMAScript)

현대 자바스크립트에서 사용되는 모듈 시스템은 ES Modules (ESM)이라 불리며, 파일 간의 기능을 import/export 문법을 통해 공유한다.

• export는 현재 모듈의 기능을 외부에 공개하는 역할
• import는 외부 모듈에서 기능을 가져오는 역할

즉, 모듈을 어떻게 정의하고 연결할 것인가를 정해 놓은 표준 약속 체계가 바로 모듈 시스템이다.

현업에서는 보통 Vite, Webpack, Parcel 등의 번들러를 사용하여 모듈을 하나로 묶고 최적화한다. 그러나 그 기본은 이 ESM 문법에 기반한다.

Default Export (한 파일에 하나만 가능)

html

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

index.js

import User from "./user.js";

console.log(new User("길동홍"));

user.js

function User(name) {
  this.name = name;
}

export default User;

• HTML에서 <script type="module" src="...">로 불러야 한다.
• 기본 export는 이름 없이 가져오며, 가져올 때 임의의 이름을 지정할 수 있다.

Named Export (여러 개 export)

html

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

export

// util.js
export function sum() {}
export function subtract() {}

import

// 개별로 불러오기
import { sum, subtract } from "./util.js";

// 전체를 하나의 객체처럼 불러오기 (별칭 사용)
import * as utilModule from "./util.js";
console.log(utilModule.sum());

• 여러 함수를 동시에 export할 수 있다.
• Named import 시에는 중괄호 {} 안에 export한 이름과 동일하게 작성해야 한다.

모듈 구조

📁 project
├── index.html
├── index.js     // 실행부
├── util.js     // 모듈
└── user.js     // 모듈