CommonJS, ESModule 톺아보기 🔎

모듈

애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.

일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이 때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.

자신만의 파일 스코프를 갖는 모듈의 자산(변수, 함수, 객체 등)은 기본적으로 비공개 상태이다. 캡슐화되어 다른 모듈에서 접근할 수 없어 애플리케이션과 분리되어 존재한다.

모듈은 공개가 필요한 자산에 한정하여 명시적으로 export 키워드를 통해 선택적 공개가 가능하다.

사용자는 import 키워드를 통해 모듈이 공개한 자산(export) 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다.

💡 모듈을 통해 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.

---

CommonJS

주로 서버 사이드 자바스크립트 환경, 특히 Node.js에서 사용되는 모듈 시스템이다.

자바스크립트는 웹 페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 생겨났다.

이러한 태생적 한계로 인해 다른 프로그래밍 언어와 비교했을 때 모듈이 성립하기 위해 필요한 파일 스코프와 import, export를 지원하지 않았다.

🔥 클라이언트 자바스크립트는 script태그를 사용하여 외부의 자바스크립트 파일을 로드할 수 있지만 파일마다 독립적인 파일 스코프를 갖지 않는다.

// foo.js
var x = "foo";
console.log(window.x); // foo

// bar.js
// x 변수는 전역 변수이다. foo.js 파일에서 선언한 전역 변수와 x와 중복된 선언이다.
var x = "bar";

// 파일마다 독립적인 파일 스코프를 갖지 않기 때문에 x의 값이 재할당되었다.
console.log(window.x); // bar

위와 같이 자바스크립트 파일을 여러 개의 파일로 분리하여 script태그로 로드해도 결국 하나의 자바스크립트 파일 내에 있는 것 처럼 동작한다.따라서 분리된 자바스크립트 파일들의 전역 변수가 중복되는 등의 문제가 발생할 수 있다.

결국 자바스크립트 클라이언트 사이드, 즉 브라우저 환경에 국한하지 않고 범용적으로 사용하려는 움직임이 생기면서 모듈 시스템은 반드시 해결해야 하는 핵심 과제가 되었다.

이러한 배경들을 통해 서버 사이드 자바스크립트 환경에서도 모듈과 같은 기능을 구현하기 위해 CommonJS가 탄생하였다!

CommonJS의 특징

• 모듈 정의 및 내보내기

  • 모듈은 module.exports 객체를 사용하여 내보낼 수 있다.

• 모듈 가져오기

  • require 함수를 사용하여 다른 모듈을 불러올 수 있다.

• 동기적 로딩

  • 모듈을 불러올 때 파일 시스템이나 네트워크 요청이 필요하면 해당 작업이 완료될 때까지 코드 실행이 블록(block)된다.

• 캐싱

  • CommonJS의 모듈은 한 번 로드되면 캐시된다. 같은 모듈을 다시 require하면 캐시된 버전을 반환한다.

---

ESModule(ECMAScript Module)

최신 자바스크립트 표준(ES6/ES2015)에서 도입된 모듈 시스템이다.
브라우저와 서버 사이드 자바스크립트(Node.js 등) 환경 모두에서 사용할 수 있다는 특징이 있다.

ESModule이 탄생하기 전까지 클라이언트 사이드 자바스크립트에서 모듈을 사용하려면 즉시 실행 함수(IIFE), AMD 등의 방식으로 표준화된 방식이 아닌 방법들을 사용해서 모듈 시스템을 사용했었다.

사용 방법은script태그에 type="module" 어트리뷰트를 추가하여 로드된 자바스크립트 파일은 모듈로서 동작한다!

<script type="module" src="app.mjs"></script>

모듈 파일의 확장자는 일반적인 자바스크립트 파일이 아닌 ESModule임을 명확히 하기 위해 mjs를 사용할 것을 권장한다.
ESModule에는 클래스와 마찬가지로 기본적으로 strict mode가 적용된다.

ESModule의 특징

• 모듈 정의 및 내보내기

  • export 키워드를 사용하여 모듈을 내보낼 수 있다.
    default export와 named export도 지원한다.

• 모듈 가져오기

  • import 키워드를 사용하여 다른 모듈을 불러올 수 있다.

• 비동기적 로딩

  • 이는 브라우저 환경에서 특히 유용하며, 모듈 로딩이 비동기로 처리될 수 있음을 의미한다.

• 엄격 모드(strict mode)

  • 이를 통해 오류를 쉽게 찾고 더 안전한 코드를 작성할 수 있다.

• 트리 쉐이킹(Tree Shaking)

  • 모듈 번들러(Webpack, Rollup 등)에서 사용될 때 사용하지 않는 코드를 제거하는 최적화를 지원한다.

---

CommonJS vs ESModule

호환성

• CommonJS: Node.js 환경에서 주로 사용되며, 브라우저 환경에서는 바로 사용할 수 없다.(번들링하거나 트랜스파일링하는 도구를 사용해야 함)

• ESModule: 서버 환경, 브라우저 환경 모두에서 사용 가능하다.

로딩 방식

• CommonJS: 동기적인 로드 방식으로 파일 시스템이나 네트워크 요청이 필요하면 해당 작업이 완료될 때까지 코드 실행이 블록(block)된다.

• ESModule: 비동기적인 로드 방식으로 브라우저 환경에서 특히 유용하다.

문법

• CommonJS: require, module.exports를 사용한다.

• ESModule: import, export를 사용한다.

실행 시점

• CommonJS: require는 파일이 실행될 때 모듈을 로드한다. 즉 모듈을 호출하는 시점에 동기적으로 실행한다.
  모듈이 호출될 때마다 새로운 인스턴스를 생성하지 않고, 캐시된 인스턴스를 반환한다.

• ESModule: import는 파일의 맨 위에서 선언되며, 스크립트 실행 전에 모듈이 미리 로드된다.
  이는 호이스팅 되어, 코드가 실행되기 전에 모듈이 로드된다.

모듈 스코프

• CommonJS: 함수 스코프를 가지며, 모듈 내의 모든 코드는 함수 스코프 안에서 실행된다.

• ESModule: 파일 스코프를 가지며, 모듈 내의 모든 코드는 파일 스코프 안에서 실행되어 전역 스코프 오염을 방지한다.

---

기존에는 CommonJS와 ESModule의 차이점을 잘 모르고 CommonJS에서는 require, module.exports 문법을 사용하고 ESModule은 import, export를 사용한다는 정도만 알고 있었는데 이번 계기로 각 모듈 시스템이 탄생하게 된 배경을 알게 되어서 유익한 지식을 알게 된 것 같다!

---

🙃 도움이 되었던 자료들

모던 자바스크립트 Deep Dive 48장 모듈
Understanding CommonJS vs. ES Modules in JavaScript
CommonJS와 ES Modules은 왜 함께 할 수 없는가?
CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field