CommonJS와 ES6 모듈의 차이점은 무엇인가요?
_____- CommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템으로, `require()`와 `module.exports`를 사용해 모듈을 불러오고 내보냅니다.
- ES6 모듈(ESM)은 ECMAScript 2015(ES6) 표준에 도입된 공식 모듈 시스템으로, `import`와 `export` 키워드를 사용합니다.
Q2: CommonJS와 ES6 모듈의 문법 차이는 무엇인가요?
- CommonJS:
```js
const fs = require('fs');
module.exports = function() { /* ... */ };
```
- ES6 모듈:
```js
import fs from 'fs';
export function myFunc() { /* ... */ };
```
Q3: 모듈 로딩 방식은 어떻게 다른가요?
- CommonJS는 동기적 로딩 방식을 사용합니다. 즉, `require()` 호출 시점에 모듈이 즉시 로드됩니다. 주로 서버(Node.js) 환경에 적합합니다.
- ES6 모듈은 기본적으로 비동기적이며, 정적 분석(static analysis)이 가능합니다. 브라우저 환경에서 기본 지원되며, Tree shaking 같은 최적화가 가능하게 설계되었습니다.
Q4: 내보내기(export)와 가져오기(import)의 차이점은?
- CommonJS는 `module.exports` 객체 하나만 내보낼 수 있어, 모든 내보내기를 하나의 객체에 묶어 처리합니다.
- ES6 모듈은 여러 개의 이름별 내보내기(named exports)와 기본 내보내기(default export)를 지원하여 더 세밀하게 모듈을 구성할 수 있습니다.
Q5: mutable export(변경 가능한 내보내기)가 가능한가요?
- CommonJS exports는 내보낸 객체를 직접 수정할 수 있지만, 가져오는 쪽에서는 각각 복사본을 받습니다. 따라서 실시간 참조 공유가 제한적입니다.
- ES6 모듈은 export한 변수에 대해 live binding(실시간 참조)을 지원하여, 원본 변수 값이 변하면 import 하는 쪽에서 즉시 반영됩니다.
Q6: 호환성 문제는 어떻게 되나요?
- CommonJS 모듈은 ES6 모듈에서 `import`할 때 별도의 변환이나 설정이 필요할 수 있습니다. Node.js에서는 `.cjs` 확장자 또는 `type: "commonjs"` 설정을 통해 명확히 구분합니다.
- ES6 모듈은 브라우저에서 기본 지원하지만, 일부 환경(특히 구버전 Node.js)에서는 트랜스파일러(Babel) 또는 번들러가 필요합니다.
Q7: Tree shaking(불필요 코드 제거)이 가능한가요?
- CommonJS는 런타임에 동적으로 모듈을 로드하므로 트리 쉐이킹이 어렵습니다.
- ES6 모듈은 정적 분석이 가능해 트리 쉐이킹이 잘 지원되어 번들 크기를 줄이는 데 유리합니다.
Q8: 요약하면 어떤 상황에서 각각을 쓰나요?
- CommonJS: 기존 Node.js 프로젝트, 간단한 서버 사이드 스크립트, 호환성 중시 시 사용
- ES6 모듈: 최신 JS 표준 지향, 프론트엔드 개발, 트리 쉐이킹과 정적 분석이 중요한 경우, 최신 Node.js 환경
---
정리:
| 구분 | CommonJS | ES6 모듈 (ESM) |
|----------------|------------------------------|-------------------------------|
| 문법 | `require()`, `module.exports` | `import`, `export` |
| 로딩 방식 | 동기적 | 비동기적 / 정적 분석 가능 |
| 내보내기 | 객체 단일 내보내기 | 이름별 내보내기, 기본 내보내기 가능 |
| live binding | 불가능 | 가능 |
| 트리 쉐이킹 | 불가능 | 가능 |
| 환경 | 주로 Node.js | 브라우저, 최신 Node.js |
| 호환성 | 오래된 코드나 패키지에 유리 | 최신 표준, 모던 도구 체인과 호환 |
이상으로 CommonJS와 ES6 모듈의 주요 차이점을 정리하였습니다.
이 두 시스템은 각각의 목적과 사용 방식에서 차이가 있으며, 자바스크립트의 발전과 함께 진화해왔습니다.
아래에서 이 두 모듈 시스템의 주요 차이점과 특징을 자세히 살펴보겠습니다.
1. 정의 및 사용 목적 - CommonJS : CommonJS는 서버 사이드 자바스크립트 환경, 특히 Node.js에서 사용하기 위해 설계된 모듈 시스템입니다.
이 시스템은 모듈을 정의하고 가져오는 방법을 표준화하여, 코드의 재사용성과 관리성을 높이는 것을 목표로 합니다.
- ES6 모듈 (ESM) : ES6 모듈은 ECMAScript 2015(ES
6)에서 도입된 모듈 시스템으로, 클라이언트 사이드와 서버 사이드 모두에서 사용할 수 있습니다.
ES6 모듈은 자바스크립트의 표준으로 자리 잡았으며, 모듈의 정의와 가져오기를 보다 직관적이고 간결하게 만들어줍니다.
2. 문법 - CommonJS : - 모듈을 정의할 때 `module.exports`를 사용합니다.
- 모듈을 가져올 때는 `require()` 함수를 사용합니다.
```javascript // math.js const add = (a, b) => a + b; module.exports = { add }; // app.js const math = require('./math'); console.log(math.add(2,
3)); // 5 ``` - ES6 모듈 : - 모듈을 정의할 때 `export` 키워드를 사용합니다.
- 모듈을 가져올 때는 `import` 키워드를 사용합니다.
```javascript // math.js export const add = (a, b) => a + b; // app.js import { add } from './math.js'; console.log(add(2,
3)); // 5 ```
3. 비동기 로딩 - CommonJS : CommonJS 모듈은 동기적으로 로드됩니다.
즉, `require()` 호출이 이루어질 때 해당 모듈이 즉시 로드되고 실행됩니다.
이는 서버 사이드 환경에서는 문제가 되지 않지만, 클라이언트 사이드에서는 성능 저하를 초래할 수 있습니다.
- ES6 모듈 : ES6 모듈은 비동기적으로 로드될 수 있습니다.
이는 브라우저가 모듈을 병렬로 로드할 수 있게 하여, 페이지 로딩 성능을 개선하는 데 기여합니다.
4. 스코프 - CommonJS : CommonJS 모듈은 각 모듈이 자체적인 스코프를 가지며, 전역 네임스페이스를 오염시키지 않습니다.
그러나 모듈 내에서 정의된 변수는 모듈 외부에서 접근할 수 없습니다.
- ES6 모듈 : ES6 모듈도 각 모듈이 자체적인 스코프를 가지며, `export`를 통해 명시적으로 내보내지 않은 변수는 외부에서 접근할 수 없습니다.
이는 모듈의 캡슐화를 더욱 강화합니다.
5. 순환 의존성 - CommonJS : CommonJS에서는 순환 의존성이 발생할 경우, 모듈이 로드될 때 초기화가 완료되지 않은 상태의 값을 반환할 수 있습니다.
이는 예기치 않은 동작을 초래할 수 있습니다.
- ES6 모듈 : ES6 모듈은 순환 의존성을 보다 잘 처리합니다.
모듈이 로드될 때, 모든 `import` 문은 모듈이 완전히 초기화된 후에 실행되므로, 순환 의존성으로 인한 문제를 줄일 수 있습니다.
6. 브라우저 지원 - CommonJS : CommonJS는 주로 Node.js 환경에서 사용되며, 브라우저에서는 기본적으로 지원되지 않습니다.
브라우저에서 CommonJS 모듈을 사용하려면 Browserify와 같은 도구를 사용해야 합니다.
- ES6 모듈 : ES6 모듈은 현대의 대부분의 브라우저에서 기본적으로 지원됩니다.
`