자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식‼️
⭐️ CommonJS
주로 Node.js 환경에서 사용되고 모듈이 로드될 때까지 다음 코드가 실행되지 않는 동기적으로 모듈을 불러온다.
CommonJS는 require 키워드를 사용해서 모듈을 가져오고, module.exports를 통해서 내보낸다.
클라이언트 환경에서는 번들러를 통해서 사용 가능하다.
🍀 ES Module(ESM)
자바스크립트 공식 표준 모듈 시스템 (ES6부터 도입됨)
브라우저와 Node.js 환경에서 모두 사용할 수 있고, 비동기적으로 모듈을 로드한다.
ES Module는 import 키워드를 사용해서 가져오고, export를 사용해서 내보낸다.
정적 분석이 가능하기 때문에 트리 쉐이킹과 같은 최적화 작업에도 유리하다.
🤔 정적분석이란?
코드를 실행하지 않고도 코드를 분석할 수 있다는 뜻‼️🌳 트리 쉐이킹이란?
번들링 과정에서 사용되지 않는 코드를 제거해서 최종 파일 크기를 줄이는 기술‼️
Node.js는 버전 12부터 네이티브로 ESM을 지원하기 시작했다. 브라우저와 서버 간의 모듈 호환성을 위해서 풀스택 애플리케이션 개발에서도 ESM이 많이 사용되고 있다.
