CommonJS와 ES 모듈 시스템 이해하기

자바스크립트에서는 모듈 시스템을 통해 코드를 분리하고, 필요한 부분만 불러와 사용할 수 있다.

모듈 시스템은 특히 규모가 커진 프로젝트에서 코드를 관리하고 재사용하는 데 매우 유용하다. 웹 개발에서 자주 사용되는 두 가지 주요 모듈 시스템이 있다. CommonJS와 ES 모듈(ESM) 시스템이다.

 

 

1. CommonJS(CJS)

• CommonJS는 주로 Node.js 환경에서 사용하는 모듈 시스템이다. 서버사이드 자바스크립트에서 널리 사용되고, 코드를 모듈로 분리하고 가져오는 방법을 제공한다.
  (CommonJS가 서버에서 실행되는 자바스크립트 코드에서 널리 사용한다는 말. 쉽게 말해, 브라우저가 아닌 서버에서 자바스크립트를 사용할 때 CommonJS가 많이 쓰인다는 것이다.)
• 특징 :
  • `require`로 모듈 가져오기: 다른 파일에서 모듈을 가져올 때 `require` 키워드를 사용한다.
  • `module.exports`로 모듈 내보내기: 모듈을 내보낼 때 `module.exports`를 사용하여 객체나 함수를 내보낸다.
  • 동기적: 모듈을 불러올 때 실행되는 과정이 동기적으로 처리된다.
• 예시:

// 모듈 내보내기
const myModule = { key: 'value' };
module.exports = myModule;

// 모듈 가져오기
const importedModule = require('./myModule');
console.log(importedModule.key); // 'value'

 

 

2. ES 모듈 시스템 (ESM)

• ES 모듈(ESM)은 자바스크립트의 최신 표준에 포함된 모듈 시스템이다. ES6(ECMAScript 2015)부터 도입되었으며, 브라우저와 Node.js 환경 모두에서 사용할 수 있다.
• 특징:
  • `import`로 모듈 가져오기: 다른 모듈을 가져올 때 import 키워드를 사용한다.
  • `export`로 모듈 내보내기: 모듈을 내보낼 때는 `export`를 사용한다. `export default`로 기본 내보내기를 할 수 있고, 여러 내보내기를 할 때는 이름별로 지정할 수 있다.
  • 비동기적: 모듈을 불러올 때 비동기적으로 처리되므로 더 빠르게 로딩할 수 있다.
• 예시:

// 모듈 내보내기
export const myFunction = () => console.log('Hello, world!');

// 모듈 가져오기
import { myFunction } from './myModule.js';
myFunction(); // 'Hello, world!'

 

 

3. 주요 차이점

• 동기 vs 비동기: CommonJS는 모듈을 동기적으로 불러오지만, ES 모듈은 비동기적으로 처리된다.
• 환경: CommonJS는 Node.js에서 주로 사용되며, ES 모듈은 브라우저와 Node.js 모두에서 사용할 수 있다.
• 구문: CommonJS는 `require`와 `module.exports`를 사용하고, ES 모듈은 `import`와 `export`를 사용한다.

 

 

4. 어떤 걸 사용해야 할까?

• 브라우저 환경에서는 ES 모듈을 사용하는 것이 표준이다.
• Node.js환경에서는 CommonJS를 사용하지만, 최신 Node.js 버전에서는 ES 모듈도 지원하므로 프로젝트에 맞게 선택할 수 있다.

 

 

5. 프론트엔드 개발자가 모듈 시스템을 이해해야 하는 이유

1. 프로젝트 관리가 쉬워짐
   모듈 시스템을 사용하면 코드를 작은 파일로 나눌 수 있다. 그러면 각 파일이 자신의 역할만 하게 되니까 수정하거나 업데이트할 때 더 쉽게 관리할 수 있다.
   
2. 브라우저와 서버 양쪽에서 쓸 수 있음
   프론트엔드 개발자는 보통 브라우저에서 동작하는 자바스크립트를 작성하지만, 서버에서도 자바스크립트를 쓸 수 있다. 서버에서는 Node.js라는 도구를 사용하는데, CommonJS(옛날 방식)와 ES 모듈(새로운 방식)을 모두 알면, 양쪽에서 자바스크립트를 일관되게 쓸 수 있다.
3. 외부 라이브러리 사용이 더 쉬워짐
   많은 자바스크립트 라이브러리나 도구들은 CommonJS나 ES 모듈 형식으로 만들어져 있다. 두 시스템을 잘 알면, 외보 도구를 더 쉽게 설치하고 사용할 수 있다.
4. 빌드 도구를 사용할 때 유리함
   Webpack이나 Vite 같은 빌드 도구는 모듈 시스템을 활용해서 코드를 묶어준다. 모듈 시스템을 이해하면, 이런 도구를 설정하거나 최적화할 때 더 쉽게 다룰 수 있다.
5. 다른 개발자와 협업할 때 도움이 됨
   프로젝트에서 다른 개발자들과 같이 작업할 때, 서로 다른 모듈 시스템을 이해하고 있으면 더 원활하게 소통할 수 있다. 특히 코드 합칠 때나 라이브러리 사용할 때 문제가 적어진다.

결론적으로, 모듈 시스템을 잘 알면 코드를 더 깔끔하고 효율적으로 관리할 수 있고, 서버와 브라우저 양쪽에서 자바스크립트를 사용할 때에도 유용하고, 협업이나 외부 도구 사용에서도 큰 도움이 된다.