CommonJS 모듈 시스템 완벽 가이드: 개념부터 활용까지

JavaScript 모듈 시스템의 진화와 CommonJS의 역할

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 시간이 흐름에 따라 다양한 환경에서 활용할 수 있도록 발전해 왔습니다. 특히, 모듈 시스템(Module System) 의 도입은 자바스크립트의 코드 구조화를 한 단계 더 발전시켰으며, 프로젝트의 유지보수성을 높이는 데 중요한 역할을 했습니다.

그중에서도 CommonJS(CommonJS Modules, CJS) 는 서버 환경에서 자바스크립트를 효과적으로 사용할 수 있도록 설계된 모듈 시스템으로, Node.js의 표준 모듈 방식으로 자리 잡았습니다.

이번 글에서는 CommonJS의 개념, 기본 사용법, 장단점, 그리고 ES 모듈(ESM)과의 비교를 통해 CommonJS가 왜 중요한지, 그리고 어떤 상황에서 사용해야 하는지를 상세히 알아보겠습니다.

---

🔹 1. CommonJS란 무엇인가?

📌 CommonJS의 등장 배경

CommonJS는 서버 측(Node.js)에서 자바스크립트를 모듈화하기 위해 개발된 표준입니다.
초창기 자바스크립트는 기본적으로 클라이언트 측(브라우저)에서만 실행되었으며, 별도의 모듈 시스템 없이 하나의 거대한 파일로 작성되는 경우가 많았습니다. 하지만 프로젝트 규모가 커짐에 따라 코드의 재사용성과 유지보수성을 높이기 위한 모듈 시스템의 필요성이 대두되었고, 그 해결책 중 하나가 바로 CommonJS였습니다.

📌 CommonJS의 핵심 특징

✅ 파일 단위의 모듈화

• CommonJS에서는 각각의 파일이 독립적인 모듈로 간주됩니다.

✅ 동기적(Synchronous) 로드 방식

• require()를 사용하여 모듈을 가져오며, 실행이 완료될 때까지 다음 코드가 실행되지 않습니다.

✅ 서버 환경(Node.js)에 최적화

• CommonJS는 기본적으로 브라우저가 아닌 서버 환경에서 실행되도록 설계되었습니다.

✅ 전역 스코프 방지

• CommonJS는 각 모듈이 자체적인 스코프(Scope) 를 가지므로, 전역 변수 충돌을 방지할 수 있습니다.

✅ Node.js에서 기본 지원

• CommonJS는 Node.js에서 기본적으로 사용되므로, 별도의 설정 없이 바로 활용할 수 있습니다.

---

🔹 2. CommonJS 모듈 사용법

CommonJS 모듈을 효과적으로 활용하기 위해서는 모듈 내보내기(Export)와 모듈 가져오기(Require) 개념을 이해해야 합니다.

✅ 2.1 모듈 내보내기 (Export)

CommonJS에서는 module.exports 또는 exports 객체를 사용하여 특정 변수, 함수, 객체 등을 외부에서 사용할 수 있도록 내보낼 수 있습니다.

// math.js - 수학 관련 기능을 제공하는 모듈
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// module.exports를 사용하여 내보내기
module.exports = {
    add,
    subtract
};

위의 코드에서는 add와 subtract 함수를 module.exports를 통해 외부에서 사용할 수 있도록 공개했습니다.

---

✅ 2.2 모듈 가져오기 (Require)

CommonJS에서 모듈을 불러올 때는 require() 함수를 사용합니다.

// app.js - math.js 모듈을 불러와 사용하는 메인 애플리케이션
const math = require('./math');

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

위의 코드에서는 require('./math')를 사용하여 math.js 파일을 가져오고, 내부의 add 및 subtract 함수를 호출할 수 있습니다.

---

🔹 3. CommonJS의 장점과 단점

✅ 3.1 CommonJS의 장점

✔ 코드의 모듈화

• 기능을 개별적인 파일로 분리할 수 있어 코드의 가독성이 향상됩니다.

✔ 재사용성 증가

• 한 번 작성한 모듈을 여러 프로젝트에서 재사용할 수 있습니다.

✔ 명확한 의존성 관리

• 어떤 모듈이 어떤 다른 모듈을 사용하는지 명확하게 정의할 수 있어 유지보수가 용이합니다.

✔ Node.js에서 기본 지원

• 별도의 설정 없이 Node.js 환경에서 바로 사용할 수 있습니다.

---

❌ 3.2 CommonJS의 단점

❌ 비동기 처리에 적합하지 않음

• require()는 동기적으로 작동하므로, 대규모 애플리케이션에서는 성능 문제가 발생할 수 있습니다.

❌ 브라우저 환경에서 직접 실행 불가

• CommonJS는 기본적으로 서버 환경을 위해 설계되었으며, 브라우저에서는 사용하려면 Webpack, Browserify 같은 번들러가 필요합니다.

❌ ES 모듈(ESM)과의 호환성 문제

• 최신 JavaScript 표준에서는 import/export 문법을 사용하는 ES 모듈(ESM, ECMAScript Modules) 이 도입되었습니다.
• CommonJS와 ES 모듈은 일부 차이가 있어, 기존 CommonJS 코드를 ESM으로 변환할 때 추가적인 작업이 필요합니다.

---

🔹 4. CommonJS vs ES 모듈(ESM) 비교

특징	CommonJS (CJS)	ES 모듈 (ESM)
모듈 가져오기	require() 사용	import 사용
모듈 내보내기	module.exports 또는 exports 사용	export 사용
실행 방식	동기적(Synchronous)	비동기적(Asynchronous)
브라우저 지원	기본적으로 지원되지 않음	브라우저에서 기본 지원
사용 환경	Node.js 중심	최신 JavaScript (브라우저 & Node.js 모두 지원)

---

🔹 5. 결론

CommonJS는 Node.js 기반 애플리케이션을 개발할 때 필수적인 모듈 시스템으로, 수많은 패키지와 라이브러리가 이를 따르고 있습니다.
하지만 ES 모듈(ESM) 이 JavaScript의 공식적인 표준으로 자리 잡으면서, 새로운 프로젝트에서는 ESM 사용을 고려하는 것이 바람직합니다.

✔ 기존의 Node.js 프로젝트 → CommonJS 사용 가능
✔ 새로운 프로젝트 → ESM 사용 추천