JavaScript 모듈은 JavaScript 코드를 구성하고 재사용하는 방법입니다. 모듈을 사용하면 코드를 더 작고 관리 가능한 조각으로 나눌 수 있으며, 필요에 따라 이를 가져와서 애플리케이션의 다른 부분에서 사용할 수 있습니다. 이 모듈식 접근 방식은 깔끔한 코드베이스를 유지하는 데 도움이 되고, 디버그가 더 쉬워지며, 코드 재사용성이 향상됩니다.

ES 모듈과 CommonJS

JavaScript 생태계에는 다양한 모듈 시스템이 있습니다. ES 모듈(ESM)은 ECMAScript 사양의 표준으로 주로 브라우저에서 사용되며 Node.js에서 점점 더 지원됩니다. CommonJS는 전통적으로 Node.js에서 사용되었던 또 다른 모듈 시스템입니다.

ES 모듈(ESM)

ES 모듈(ESM)은 ECMAScript 2015(ES6)에 도입된 JavaScript의 표준화된 모듈 시스템입니다. 서로 다른 파일 간에 함수, 개체 및 기본 요소를 가져오고 내보낼 수 있으므로 코드를 더 잘 구성하고 재사용할 수 있습니다. 이 모듈 시스템은 브라우저 및 Node.js를 포함한 최신 JavaScript 환경에서 널리 지원됩니다.

내보내기 및 가져오기

내보내기 키워드는 현재 모듈 외부에서 액세스할 수 있는 변수와 함수에 레이블을 지정하여 애플리케이션의 다른 부분에서 재사용할 수 있도록 합니다. import 키워드를 사용하면 다른 모듈에서 이러한 기능을 가져올 수 있으므로 모듈식 프로그래밍 및 코드 재사용이 가능합니다.

이름이 지정된 내보내기를 사용하면 모듈에서 여러 항목을 내보낼 수 있습니다. 각 항목은 내보낸 이름과 동일한 이름으로 가져와야 합니다.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

이름이 지정된 내보내기를 가져올 때 내보내기와 동일한 이름을 사용해야 합니다.

import { greet } from './module.js';
greet(); // Hello, World!

기본 내보내기는 모듈당 단일 기본 내보내기를 허용합니다. 항목은 어떤 이름으로도 가져올 수 있습니다.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

기본 내보내기를 가져올 때 어떤 이름이든 사용할 수 있습니다.

import message  from './module.js';
message(); // Hello, World!

HTML에서 모듈 사용

브라우저에서 모듈을 사용할 때는 해당 모듈을 HTML 파일에 포함해야 합니다.

브라우저 지원

최신 브라우저는 기본적으로 JavaScript 모듈을 지원합니다. 여기에는 Chrome, Firefox, Safari, Edge 및 Opera가 포함됩니다. 그러나 Internet Explorer와 같은 이전 브라우저는 모듈을 지원하지 않습니다. 이를 위해서는 Webpack과 같은 번들러나 Babel과 같은 트랜스파일러를 사용해야 할 수도 있습니다.

Node.js에서 모듈 사용
Node.js에서 ES 모듈을 사용하려면 .mjs 파일 확장자를 사용하거나 package.json 파일에 "type": "module"을 설정하면 됩니다.

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

별칭 가져오기

JavaScript 모듈의 별칭을 사용하면 다른 이름을 사용하여 기능을 가져오고 내보낼 수 있습니다. 이는 이름 충돌을 피하거나 이를 가져오는 모듈의 컨텍스트에서 더 설명적인 이름을 제공하는 데 유용할 수 있습니다.

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

별칭을 사용하여 다른 이름으로 이러한 함수를 가져올 수 있습니다.

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

전체 모듈을 별칭으로 가져오기

전체 모듈을 단일 별칭으로 가져올 수 있으며, 이를 통해 네임스페이스 아래의 모든 내보내기에 액세스할 수 있습니다.

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


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

동적 가져오기

Promise를 반환하는 import() 함수를 사용하여 동적으로 모듈을 가져올 수도 있습니다. 이는 코드 분할 및 지연 로딩에 유용합니다.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

이 예에서는 loadModule 함수가 호출될 때 math.js 모듈이 동적으로 로드됩니다.

커먼JS(CJS)

CommonJS는 Node.js에서 주로 사용되는 모듈 시스템입니다. ES 모듈이 표준화되기 전의 기본 모듈 시스템이었으며 여전히 많은 Node.js 프로젝트에서 널리 사용되고 있습니다. require()를 사용하여 모듈을 가져오고 module.exports 또는 내보내기를 사용하여 모듈에서 기능을 내보냅니다.

CommonJS에서 module.exports와 내보내기는 모두 모듈에서 값을 내보내는 데 사용됩니다. 내보내기는 본질적으로 module.exports의 약어이므로 둘 중 하나를 사용할 수 있습니다. 그러나 일반적으로 잠재적인 혼란이나 예상치 못한 동작을 피하기 위해 module.exports를 일관되게 사용하는 것이 좋습니다.

이 예에서는 module.exports에 함수가 할당되었으므로 app.js의 require 호출이 해당 함수를 반환합니다.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

이 예에서 내보내기는 module.exports에 속성을 추가하는 데 사용됩니다. app.js의 require 호출은 더하기 및 빼기 기능이 있는 객체를 반환합니다.

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

JavaScript 모듈은 코드 구성, 유지 관리 가능성 및 성능을 향상시키는 다양한 이점을 제공합니다.

• 재사용 성
  모듈을 사용하면 애플리케이션의 다른 부분이나 심지어 다른 프로젝트에서도 가져와 사용할 수 있는 재사용 가능한 코드 조각을 작성할 수 있습니다.

• 유지관리성
  코드를 더 작고 독립적인 모듈로 나누면 코드베이스를 보다 효과적으로 관리하고 유지할 수 있습니다. 이를 통해 전체 애플리케이션에 영향을 주지 않고 개별 모듈을 더 쉽게 업데이트, 리팩터링 및 디버그할 수 있습니다.

• 코드 분할
  모듈을 사용하면 필요할 때 필요한 코드만 로드할 수 있는 코드 분할이 가능해 초기 로드 시간과 전반적인 성능이 향상됩니다.

• 향상된 테스트
  모듈형 코드는 개별 모듈을 개별적으로 테스트할 수 있으므로 테스트하기가 더 쉽습니다. 이는 더욱 안정적이고 유지 관리가 용이한 테스트로 이어집니다.

• 나무 흔들기
  Webpack 및 Rollup과 같은 최신 모듈 번들러는 최종 번들에서 사용되지 않는 코드를 제거하는 기술인 트리 쉐이킹을 수행하여 코드를 더 작고 효율적으로 만들 수 있습니다.

결론

JavaScript 개발에서 ES 모듈의 도입은 기존 CommonJS 모듈 시스템에서 상당한 변화를 가져왔습니다. ES 모듈은 종속성을 관리하고 유지 관리성을 향상시키는 표준화되고 효율적인 방법을 제공합니다. 내보내기 및 가져오기 구문은 모듈을 정의하고 사용하는 명확하고 간결한 방법을 제공하여 코드베이스의 구성과 가독성을 향상시킵니다.