9. 모듈 번들링과 로더 활용 - 1

JavaScript 모듈화: ES6 모듈 vs CommonJS

JavaScript의 모듈화는 코드를 구조화하고 재사용성을 높이는 데에 중요한 역할을 합니다. ES6에서 도입된 모듈 시스템과 CommonJS는 두 가지 주요한 모듈화 패러다임입니다.

1. ES6 모듈

ES6에서 도입된 모듈 시스템은 기존의 스크립트 태그를 사용한 방식과는 다르게 파일 간 의존성을 선언적으로 관리합니다. 이를 통해 명시적으로 필요한 모듈을 불러와 사용할 수 있습니다.

1.1 모듈 작성 및 사용

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

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

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

1.2 모듈의 기능

• 명시적인 의존성 관리: import 문을 통해 필요한 모듈을 명시적으로 선언합니다.
• 기본 및 명명된 내보내기: export default를 통해 기본 내보내기와 export를 통해 명명된 내보내기를 지원합니다.

2. CommonJS

CommonJS는 Node.js에서 사용되는 서버 사이드 자바스크립트 환경을 위해 만들어진 모듈 시스템입니다. 동기적으로 모듈을 불러오고 내보내는 방식을 사용합니다.

2.1 모듈 작성 및 사용

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

exports.subtract = function (a, b) {
  return a - b;
};

// main.js
const math = require('./math');

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

2.2 모듈의 기능

• 동기적 로딩: 모듈은 동기적으로 로딩되므로, 로딩이 완료된 후에 코드를 실행합니다.
• module.exports 및 exports: 모듈은 module.exports나 exports 객체를 통해 내보내기를 정의합니다.

3. ES6 모듈 vs CommonJS

3.1 사용 환경

• ES6 모듈: 주로 브라우저 환경에서 사용되며, 최신 웹 개발에서 널리 채택되고 있습니다.
• CommonJS: 주로 Node.js 환경에서 사용되며, 서버 사이드 자바스크립트 개발에서 표준으로 사용됩니다.

3.2 로딩 방식

• ES6 모듈: 비동기적으로 로딩되며, import 문을 통해 필요할 때 동적으로 모듈을 가져올 수 있습니다.
• CommonJS: 동기적으로 로딩되어 실행이 완료된 후에 다음 코드로 넘어갑니다.

3.3 내보내기 및 가져오기

• ES6 모듈: export 및 import 문을 통해 모듈을 내보내고 가져옵니다.
• CommonJS: module.exports 및 require 함수를 통해 내보내고 가져옵니다.

3.4 사용 이유

• ES6 모듈: 최신 웹 표준을 따르며, Tree-shaking 등 최적화에 유리합니다.
• CommonJS: 주로 Node.js에서 사용되며, 서버 환경에서 동기적인 로딩이 편리한 경우에 적합합니다.

두 모듈 시스템은 각각의 사용 환경과 목적에 따라 선택되어야 하며, 혼합해서 사용할 수도 있습니다. Node.js에서는 ES6 모듈을 사용하려면 .mjs 확장자를 사용하거나, 환경 변수를 통해 활성화해야 합니다.

이러한 JavaScript 모듈화에 대한 이해는 프로젝트의 규모와 요구사항에 따라 적절한 선택을 할 수 있도록 도와줍니다.