CommonJS와 ES Module 정확히 무슨 차이를 갖고 있을까?

오늘은 기본 중에 기본인 CommonJS와 ES Module에 대해서 알아보고 둘의 차이에 대해서도 알아보겠습니다

 

---

Module이란?

Module이란 코드를 기능별로 분리해서 재사용 가능하게 만든 단위입니다

JS에서 모듈은 변수, 함수, 클래스 등을 내보내고 다른 파일에서 가져올 수 있도록 해줍니다

---

CommonJS란?

CommonJS 모듈은 원래 nodejs에서 자바스크립트 패키지를 불러올 때 사용하는 근본있는 방식입니다

현재 여러 방식을 지원하지만 태초에는 CommonJS 방식이 유일 했다고 합니다

require() 함수를 사용하여 모듈을 가져오고 module.exports를 사용하여 모듈을 내보냅니다

동기적으로 작동하고 모듈이 로드될 때까지 코드 실행이 중단됩니다

트리쎼이킹이 어렵다는 단점을 가지고 있습니다

 

예제

// module.js
module.exports = {
    hello: function() {
        console.log('Hello'); // result: Hello
    }

const module = require('./module');

module.hello(); //result: console.log Hello

---

ES Module이란?

ES Module은 최신 JS의 표준으로 ES6에 도입된 모듈 시스템입니다

import와 export 키워드를 사용하여서 모듈을 가져오고 내보낼 수 있습니다

비동기적으로 동작하고 트리 셰이킹에 용이합니다

 

예제

// module.js
export function hello() {
    console.log('Hello');
}

import { hello } from './module';

hello(); // result: Hello

 

---

둘의 차이점

구분	CJS	ESM
사용 방식	required() / module.exports	import / export
동작 시점	런타임	빌드타임 또는 파싱타임
비동기 지원	지원 X	지원 O
기본 사용처	Node.js (구버전)	브라우저, 최신 Node.js

 

---

글을 마치며

오늘 이렇게 둘의 차이점을 알아보았는데 알 맞는 상황에 둘 중 하나를 잘 선택해서 사용할 수 있는 멋진 개발자로 성장하고 싶다는 생각을

했습니다 글을 읽어주셔서 감사합니다