[자바스크립트] 모듈

프로그래밍에서 모듈은 특정 기능을 수행하는 독립된 코드 묶음이다. 모듈을 사용하면 코드를 더 효율적이고 관리하기 쉽게 구성할 수 있다.

모듈이란

• 하나의 파일
• 클래스 또는 함수들로 구성
• 스크립트 한 개

모듈은 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 이름 충돌을 방지하는데 도움을 준다. 각 모듈은 특정 기능을 수행하도록 설계되고, 다른 코드에서 필요한 경우 재사용될 수 있다.

CommonJS

• 공통 JS 모듈
• Node.js 환경의 모듈 시스템
• module.export 와 require 이용
• 동기적으로 불러옴
• Back-End 용으로 개발

CommonJS는 서버 측에서 사용되는 모듈 시스템이다. Node.js에서 주로 사용된다.

// math.js 파일
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

// 다른 파일에서
const math = require('./math');
console.log(math.add(1, 2)); // 3

AMD (Asynchronous Module Definition)

• 비동기적 모듈 선언
• Require.js
• Front-End 용으로 개발됨
• define과 require 사용

AMD는 비동기 모듈 로딩에 중점을 둔 클라이언트 사이드 모듈 시스템이다. RequireJS 같은 라이브러리에서 주로 사용된다.

// math.js 파일
define([], function() {
  return {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
  };
});

UMD (Universal Module Definition)

• Universal Module Definition
• 여러 모듈 시스템 동작 가능
• AMD와 CommonJS를 통합하기 위한것
• AMD의 define 사용
• CommonJS의 module.exports 사용

UMD는 CommonJS와 AMD를 결합한 형태로, 서버와 클라이언트 양쪽에서 사용할 수 있는 유니버설 패턴이다.

// math.js 파일
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof exports === 'object') {
   // CommonJS
    module.exports = factory();
  } else {
    // Browser globals
    root.math = factory();
  }
})(this, function() {
  return {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
  };
});

ES6 방식

• 코드 유지관리 쉬움
• 클린 코드
• 필요한 것만 가져올 수 있음

ES6에서는 import와 export 키워드를 사용해 모듈을 다룰 수 있다.

1. 기본 내보내기 - export

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

// 다른 파일에서
import * as math from './math';
console.log(math.add(1, 2)); // 3

1. 단일 객체 내보내기

• export default
• 하나의 모듈에서 하나의 객체만 보냄
• 중요하거나 필수 대상을 내보낼 때 사용

// math.js 파일
export default const add = (a, b) => a + b;

// 다른 파일에서
import add from './math';
console.log(math.add(1, 2)); // 3

모듈 시스템은 코드의 재사용성과 유지보수성을 높이고, 개발자가 코드를 더 효율적으로 구성하게 도와준다.