자바스크립트

자바스크립트 모듈 시스템 - 모듈화의 필요성, import와 export 문법, ES6 모듈과 CommonJS 모듈

10월 03, 2024

11. 자바스크립트 모듈 시스템

모듈 시스템은 코드를 작은 단위로 나누어 재사용성을 높이고, 유지보수성을 개선하는 방법입니다. 자바스크립트는 원래 모듈화를 지원하지 않았지만, 점점 복잡해지는 애플리케이션 구조를 해결하기 위해 모듈화 개념이 도입되었습니다. 이 장에서는 모듈화의 필요성, import/export 문법, 그리고 ES6 모듈과 CommonJS 모듈에 대해 알아보겠습니다.

자바스크립트 모듈 시스템

11.1 모듈화의 필요성

11.1.1 모듈화란?

모듈화는 프로그램을 독립적인 파일 또는 단위로 나누어 관리하는 방법을 말합니다. 각 모듈은 고유한 기능을 수행하며, 외부 코드에 영향을 받지 않고 독립적으로 동작합니다. 이를 통해 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다.

11.1.2 모듈화가 필요한 이유

  1. 코드의 재사용성: 동일한 코드를 여러 곳에서 사용해야 할 때, 모듈화를 통해 중복 코드를 방지하고 재사용할 수 있습니다.

  2. 유지보수성: 모듈화를 통해 코드를 여러 개의 파일로 분리하면, 각 파일에서 한 가지 역할만 수행하도록 만들 수 있습니다. 이렇게 하면 문제가 발생했을 때, 특정 모듈을 쉽게 찾아 수정할 수 있습니다.

  3. 의존성 관리: 모듈은 다른 모듈과의 의존 관계를 명시적으로 선언할 수 있습니다. 이를 통해 모듈 간의 종속성을 관리하고, 잘못된 참조를 방지할 수 있습니다.

  4. 네임스페이스 충돌 방지: 모듈화는 전역 변수를 사용하지 않도록 하여, 네임스페이스 충돌을 방지할 수 있습니다. 각 모듈은 독립적인 스코프를 가지므로, 변수 이름이 겹치더라도 충돌하지 않습니다.




11.2 import와 export 문법

ES6에서 자바스크립트는 공식적으로 모듈 시스템을 지원하기 위해 import와 export 키워드를 도입했습니다. 이를 통해 다른 파일에서 작성한 모듈을 가져오거나, 현재 파일의 코드를 외부에서 사용할 수 있도록 내보낼 수 있습니다.

11.2.1 export 문법

export는 현재 모듈에서 함수, 변수, 객체 등을 외부로 내보내기 위해 사용됩니다. 이를 통해 다른 파일에서 이 모듈을 가져다 사용할 수 있습니다.

11.2.1.1 Named Export

Named Export는 여러 개의 값을 내보낼 때 사용되며, 각각의 항목은 이름을 통해 가져올 수 있습니다.

예시: Named Export

javascript
// math.js
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

위 예제에서 PI, add(), subtract()는 각각 개별적으로 내보내졌습니다.

11.2.1.2 Default Export

Default Export는 모듈당 하나의 값을 기본으로 내보낼 때 사용됩니다. Default Export는 가져올 때 이름을 지정하지 않고, 자유롭게 사용할 수 있습니다.

예시: Default Export

javascript
// utils.js
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

위 코드에서는 greet() 함수가 기본 값으로 내보내졌습니다.


11.2.2 import 문법

import는 다른 모듈에서 내보낸 값을 가져올 때 사용됩니다. 모듈을 가져올 때는 import 키워드를 사용하여 지정한 변수에 값을 할당합니다.

11.2.2.1 Named Import

Named Import는 export로 내보낸 각 이름을 그대로 사용하여 모듈을 가져옵니다.

예시: Named Import

javascript
// main.js
import { PI, add, subtract } from './math.js';

console.log(PI);          // 3.14
console.log(add(5, 3));    // 8
console.log(subtract(5, 3));  // 2

여기서 import는 math.js 모듈에서 내보낸 PI, add(), subtract()를 가져왔습니다. 가져오는 이름은 내보낸 이름과 같아야 합니다.

11.2.2.2 Default Import

Default Export는 이름 없이 내보냈기 때문에, 가져올 때는 자유롭게 변수 이름을 정할 수 있습니다.

예시: Default Import

javascript
// main.js
import greet from './utils.js';

greet('Alice');  // Hello, Alice!

위 코드에서는 utils.js에서 Default Export된 greet() 함수를 가져와 사용할 수 있습니다. 이름은 자유롭게 지정할 수 있습니다.

11.2.2.3 모듈 전체 가져오기

import * as 구문을 사용하여 모듈 전체를 하나의 객체로 가져올 수 있습니다. 이 경우 모듈 내의 각 요소는 객체의 속성으로 참조됩니다.

예시: 모듈 전체 가져오기

javascript
// main.js
import * as math from './math.js';

console.log(math.PI);         // 3.14
console.log(math.add(10, 5)); // 15

import * as 구문을 사용하면 math 객체를 통해 math.js 모듈에서 내보낸 모든 값에 접근할 수 있습니다.




11.3 ES6 모듈과 CommonJS 모듈

자바스크립트에는 여러 모듈 시스템이 존재하지만, 대표적인 두 가지는 ES6 모듈(ECMAScript 2015 이후의 표준 모듈 시스템)과 CommonJS 모듈(주로 Node.js에서 사용되는 모듈 시스템)입니다.

11.3.1 ES6 모듈 (ESM: ECMAScript Modules)

ES6 모듈은 자바스크립트의 공식 모듈 시스템으로, import와 export를 사용하여 모듈을 정의하고 가져옵니다. 주로 브라우저 환경과 현대적인 자바스크립트 애플리케이션에서 사용됩니다.

11.3.1.1 특징
  • 정적 분석: ES6 모듈은 정적 분석이 가능합니다. 즉, 코드를 실행하기 전에 어떤 모듈을 참조하는지 미리 파악할 수 있습니다.
  • Strict Mode: 모든 ES6 모듈은 자동으로 strict mode로 실행됩니다.
  • 파일 확장자: 일반적으로 .js 확장자를 사용하며, 최신 브라우저에서 type="module" 속성을 사용해 HTML에서 직접 로드할 수 있습니다.

예시: ES6 모듈 사용

html
<!-- index.html -->
<script type="module" src="main.js"></script>

javascript
// main.js
import { add } from './math.js';

console.log(add(10, 5));  // 15

위 HTML 파일에서는 type="module" 속성을 사용하여 main.js를 모듈로 로드하고, 자바스크립트 파일에서 import 문법을 사용합니다.


11.3.2 CommonJS 모듈

CommonJS 모듈은 주로 Node.js 환경에서 사용되는 모듈 시스템입니다. CommonJS에서는 require()를 사용해 모듈을 가져오고, module.exports를 사용해 모듈을 내보냅니다.

11.3.2.1 특징
  • 동적 로딩: CommonJS 모듈은 런타임에 동적으로 로딩됩니다.
  • Node.js 환경에서 사용: 서버 측 Node.js 애플리케이션에서 주로 사용됩니다.
  • 파일 확장자: 일반적으로 .js 확장자를 사용합니다.
11.3.2.2 CommonJS 모듈 사용

예시: CommonJS 모듈

javascript
// math.js (모듈 정의)
function add(a, b) {
  return a + b;
}

module.exports = { add };

javascript
// main.js (모듈 가져오기)
const math = require('./math.js');

console.log(math.add(10, 5));  // 15

위 코드에서 math.js 파일은 CommonJS 모듈로 정의되었으며, module.exports를 사용해 내보냈습니다. main.js에서는 require()로 모듈을 가져옵니다.


11.3.3 ES6 모듈과 CommonJS 모듈의 차이점

  • ES6 모듈은 정적 분석 가능: ES6 모듈은 정적으로 분석되기 때문에, 코드를 실행하기 전에 의존성 그래프를 만들 수 있습니다. 반면 CommonJS는 런타임에 모듈을 로드합니다.
  • 모듈 임포트 방식: ES6 모듈은 import/export 문법을 사용하고, CommonJS는 require()/module.exports를 사용합니다.
  • 브라우저 호환성: ES6 모듈은 브라우저에서 직접 지원하지만, CommonJS는 Node.js 환경에서 주로 사용됩니다. CommonJS 모듈을 브라우저에서 사용하려면 번들링 도구(예: Webpack, Browserify)가 필요합니다.


모듈 시스템은 자바스크립트 애플리케이션을 보다 구조적으로 관리할 수 있는 중요한 도구입니다. ES6 모듈은 최신 자바스크립트 환경에서 주로 사용되며, CommonJS 모듈은 Node.js 환경에서 많이 사용됩니다. import와 export 문법을 사용해 코드를 모듈화하고, 이를 통해 코드의 재사용성, 유지보수성, 가독성을 향상시킬 수 있습니다. 모듈화를 잘 이해하고 활용하면, 더 안정적이고 유지보수하기 쉬운 애플리케이션을 만들 수 있습니다.

비밀스런체셔

작성자: 비밀스런체셔

댓글 쓰기

0 댓글