JavaScript 모듈 - CJS vs ESM

많은 JS 강의에서 CJS 방식을 사용하는 걸 보고 왜 아직도 이걸 사용하는 걸까? 하는 궁금증이 생겨서 이것저것 찾아보고, 관련 내용을 정리했습니다.

CJS (CommonJS)

• 사용법: exports ~ require
• 로딩 방식: require 호출은 동기적(synchronous); 모듈 로딩이 끝날 때까지 코드는 블록(block) 됨
• 특징:
  • __filename, __dirname 이 미리 정의되어 있어서 바로 사용할 수 있음
  • 파일을 로딩해서 바로 사용 가능
• 만들어진 이유: Node.js에서 Server-Side JavaScript를 사용하기 위해 만들어짐

ESM (ECMAScript Modules)

• 사용법: export ~ import
• 로딩 방식: 비동기적(asynchronous) 로딩; CJS보다 상대적으로 performance 측면에서 이득이 있을 수 있음
• 특징:
  • __filename, __dirname 미리 정의되어 있지 않음 -> url, path 모듈 사용해 정의 필요
  • 모듈이 아닌 일반 파일을 코드 내에서 로딩하고자 하는 경우 module 모듈을 사용해야 함
• 만들어진 이유: Client-side, Server-side에서 통일된 모듈 시스템을 사용하기 위해 디자인 되었으며 ES6 부터 도입됨

CJS를 여전히 사용하는 이유

1. 레거시 CJS 코드를 ESM으로 바꾸는 비용 부담이 존재
2. 여전히 CJS 방식만을 지원하는 툴과 라이브러리가 존재

현황 및 추세

• 웹팩(Webpack), bundler, 라이브러리 등이 ESM으로 작성되는 추세
• ESM에서는 CJS 모듈을 import 가능하지만, 역은 불가능함
• JS 생태계의 발전을 위해 ESM 사용을 지지하는 여론이 많음