CommonJS(CJS), ECMAScript Modules(ESM)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
JavaScript 개발자, Node.js 및 웹 프론트엔드 개발자
난이도: 중급
핵심 요약
- CommonJS(CJS)는 Node.js에서 주로 사용되는 동기 모듈 시스템이며,
require()와module.exports를 사용하여 모듈을 불러오고 내보낸다. - ECMAScript Modules(ESM)은 ES6+에서 도입된 비동기 모듈 시스템이며,
import와export를 사용하여 모듈을 관리한다. - CJS와 ESM의 주요 차이점은 동기/비동기, 문법, 호환성, 사용 환경 등에서 발생하며, 두 시스템을 모두 지원하는 것이 현대 JavaScript 프로젝트에서 필수적이다.
섹션별 세부 요약
1. CommonJS(CJS)란?
- Node.js에서 주로 사용되는 모듈 시스템이다.
require()함수를 사용하여 모듈을 불러오며,module.exports를 통해 모듈을 내보낸다.- 동기 방식을 사용하므로, 동시성 처리에 한계가 있다.
- 서버 사이드 JavaScript에 적합하다.
2. 문법
- 모듈 불러오기:
```javascript
const fs = require('fs');
```
- 모듈 내보내기:
```javascript
module.exports = { sayHello };
```
3. ECMAScript Modules(ESM)이란?
- ES6+ 표준에 따라 정의된 모듈 시스템이다.
import와export를 사용하여 모듈을 관리한다.- 비동기 방식을 지원하여, 모던 웹 및 Node.js 환경에서 널리 사용된다.
- 모듈 분리 및 코드 재사용에 유리하다.
4. 문법
- 모듈 불러오기:
```javascript
import { sayHello } from './module.js';
```
- 모듈 내보내기:
```javascript
export function sayHello() { ... }
```
5. CJS와 ESM의 차이점
- 동기/비동기: CJS는 동기, ESM은 비동기 방식.
- 문법: CJS는
require()및module.exports, ESM은import및export. - 호환성: ESM은 Node.js v12 이상에서 지원되며, 브라우저 호환성도 우수하다.
- 사용 환경: CJS는 Node.js, ESM은 Node.js 및 웹 프론트엔드 모두에서 사용 가능.
6. 상호 호환성
- Node.js는 CJS와 ESM 모두 지원하지만, 동일한 파일에서 사용 시 문제가 발생할 수 있다.
- ESM 파일은
.mjs확장자나type: "module"을 사용하여 명시해야 한다. - CJS와 ESM의 혼합 사용은 의존성과 모듈 로딩 순서에 영향을 줄 수 있다.
7. 두 모듈 시스템 모두 지원해야 하는 이유
- Node.js와 브라우저에서의 호환성 문제를 해결하기 위해.
- 라이브러리 및 프레임워크가 CJS와 ESM을 동시에 지원하는 경우가 많아, 프로젝트의 유연성을 높인다.
- 과거 코드와 현대적인 모듈 구조를 모두 사용할 수 있어, legacy 프로젝트도 현대화할 수 있다.
8. CJS/ESM 구분
- CJS:
require()사용,module.exports사용,.js확장자. - ESM:
import사용,export사용,.mjs확장자 또는type: "module"설정.
결론
- CJS와 ESM은 각각의 장단점이 있으므로, 프로젝트의 환경과 요구사항에 따라 적절히 선택해야 한다.
- Node.js 12 이상에서는 ESM을 사용하는 것이 추천되며, ESM은 모듈 분리와 확장성 측면에서 우월하다.
- 모듈 시스템을 혼합 사용할 경우, 명확한 구분과 설정이 필수이며,
package.json에서type: "module"을 명시하는 것이 좋다.