자바스크립트 모듈 시스템 완전 정리

자바스크립트 모듈이 뭐야?

• 모듈(Module) = 코드를 여러 파일로 나눠서 관리하기 위한 기능
• 큰 프로젝트일수록 파일 분리가 필수
• ES6 이전 → 자바스크립트엔 공식 모듈 시스템이 없었음
• 지금은 대표적으로 CommonJS와 ES Module 두 가지가 많이 쓰임

---

✅ CommonJS

특징

• Node. js에서 사용하기 위해 만들어짐
• 동기적으로 동작 (require 시점에 파일 읽음)
• 파일마다 scope가 분리됨
• .js 확장자 생략 가능

---

CommonJS 코드 예제

math.js

const perfectSore = 100;

function sum(a, b) {
  return a + b;
}

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

module.exports = {
  perfectSore,
  sum,
  subtract,
};

---

index.js

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

console.log('perfectSore', math.perfectSore);
console.log('sum', math.sum(10, 20));
console.log('subtract', math.subtract(10, 20));

---

실행 방법

• Node.js 환경에서 바로 실행 가능
• package.json 없어도 OK
• 예:

node commonjs/index.js

---

✅ ES Module (ESM)

특징

• ES6(ECMAScript 2015)에서 공식 표준으로 도입
• 비동기적으로 동작 가능
• 파일 간 의존 관계가 명확해짐
• 브라우저와 Node.js 둘 다 사용 가능 (Node.js에서는 설정 필요)
• Node.js에서는 package.json에 설정해야 함:

{
  "type": "module"
}

---

ES Module 코드 예제

math.js

export const perfectSore = 100;

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

export function avege(a, b) {
  return (a + b) / 2;
}

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

---

index.js

import { perfectSore, sum, avege } from './math.js';
import math from './math.js';

console.log('perfectSore', perfectSore);
console.log('sum', sum(10, 20));
console.log('avg', avege(10, 20));
console.log('subtract', math.subtract(10, 20));

---

import 문법 종류

• 개별 import

import { sum } from './math.js';

• default import

import math from './math.js';

• 모든 export 한 번에 가져오기

import * as math from './math.js';
console.log(math.sum(10, 20));

---

실행 방법

Node.js에서 ES Module 사용하려면:

• package.json 추가

{
  "type": "module"
}

• 실행:

node module/index.js

---

✅ CommonJS vs ES Module 비교

구분	CommonJS	ES Module
도입 시기	예전부터 (Node.js 초창기)	ES6 (ECMAScript 2015)
문법	require / module.exports	import / export
동기/비동기	동기	비동기 가능
브라우저 사용	X (변환 필요)	O (모던 브라우저 지원)
Node.js	기본 지원	package.json 설정 필요

 

---

✅ 비유로 이해하기

• CommonJS → 즉석 전화: “전화해 보고 바로 대답 듣기” (동기적)
• ES Module → 메일: “보내놓고, 답 오면 처리” (비동기 가능)

---

✅ 정리

• 작은 파일로 나누고 import/export 하는 습관은 유지보수 필수
• Node.js에서는 CommonJS도 여전히 많이 쓰지만, 최신 프로젝트는 ES Module로 점점 이동
• 브라우저에서 모듈 쓸 땐 <script type="module"> 꼭 확인!