반응형
1. CommonJS, ES Modules는 무엇일까?
- 우리는 JS 모듈을 내보내거나 가져올 때 2가지 방식을 사용한다.
- 첫번째 방법은 module.exports로 모듈을 내보내고 require()로 접근하는 CJS(CommonJS),
- 두번째 방법은 export로 모듈을 내보내고 import로 접근하는 ESM(ES Modules)이 있다.
1. CJS 방식
- NodeJS에서 지원하는 모듈 방식으로, 초기 Node버전부터 사용되었다.
- 별도의 설정이 없다면 CJS가 기본값이다.
- 외부 모듈에 접근할 때는 require()을 사용한다.
// CJS 방법
module.exports = { ... } // 모듈 내보낼 때
const utils = require('utils'); // 모듈 가져올 때
1-2. CJS의 특징
- require()는 즉시 스크립트를 실행하는 구조이다.
- top-level await가 불가능하므로 동기적으로 작동한다.
- 동기로 작동하므로 promise를 리턴하지 않고, module.exports에 설정된 값만을 리턴한다.
- import 순서에 따라 스크립트를 실행한다.
2. ESM 방식
import로 모듈에 접근하고 export로 모듈을 내보내는 ESM 방식
- ES Modules(MJS)는 ECMAScript에서 지원하는 방식이다.
- Node14에선 CJS, MJS이 공존하는데, 두 개를 동시에 사용하기 위해 별도의 처리가 필요하다.
- 모듈 시스템을 CJS(기본값)에서 ESM으로 변경할 시, JS 일부 동작이 변경된다. (호환성 문제)
// ESM 방법
export.default =()=> { ... }; // 모듈 내보낼 때
import utils from 'utils'; // 모듈 가져올 때
2-1. ESM 사용하는 법
- ESM 방식을 사용하기 위해선 package.json에 “type”: “module”을 설정해야 한다.
// package.json
{
"type": "module",
}
2-2. ESM의 특징
- top-level await를 지원하므로 module loader가 비동기 환경에서 실행된다.
- 그러므로 CJS처럼 스크립트를 바로 실행하지 않고 import, export구문을 찾아 스크립트를 파싱한다.
- 파싱 단계에서 import, export 에러를 감지할 수 있다.
- 모듈을 병렬로 다운로드하지만, 실행은 순차적으로 한다.
- import와 export를 지원하지 않는 브라우저가 있기에, ESM 사용을 위해 번들러가 필요하다.
반응형
'IT > 자바스크립트' 카테고리의 다른 글
[자바스크립트] 시계(현재시간) 만들기 (0) | 2024.07.02 |
---|---|
[자바스크립트] 정규 표현식 기본 (0) | 2024.07.02 |
[자바스크립트] 삼항연산자 (0) | 2020.12.18 |
[자바스크립트] String.prototype 메소드 (0) | 2020.10.04 |
[자바스크립트] Math 객체 (0) | 2020.10.04 |