[FE] what is ESM?

ESM(ECMAScript Modules)은 JavaScript의 공식 모듈 시스템입니다. ES6(ECMAScript 2015)에서 도입되었으며, 코드를 모듈화하고 재사용 가능한 컴포넌트로 구성할 수 있게 해줍니다. ESM의 주요 특징과 사용법에 대해 설명하겠습니다.

1. 주요 특징:

   • 정적 구조: 모듈 의존성이 정적으로 분석될 수 있어 더 나은 최적화가 가능합니다.
   • 비동기 로딩: 모듈을 비동기적으로 로드할 수 있습니다.
   • 명시적 의존성: import/export 문을 통해 의존성을 명확히 표현합니다.
   • 순환 의존성 지원: 순환 의존성을 자연스럽게 처리합니다.

2. 기본 문법:

   • 내보내기 (Exporting):

     // 단일 내보내기
     export const name = 'John';
     export function sayHello() { console.log('Hello!'); }
     
     // 기본 내보내기
     export default function() { console.log('I am default'); }
     
     // 여러 항목 한 번에 내보내기
     const x = 1, y = 2;
     export { x, y };

   • 가져오기 (Importing):

     // 명명된 가져오기
     import { name, sayHello } from './module.js';
     
     // 기본 가져오기
     import defaultFunction from './module.js';
     
     // 모두 가져오기
     import * as module from './module.js';
     
     // 가져오면서 이름 바꾸기
     import { name as userName } from './module.js';

3. 브라우저에서 사용:

   <script type="module" src="main.js"></script>

4. Node.js에서 사용 (v13.2.0 이상):

   • package.json에 "type": "module" 추가
   • 또는 파일 확장자를 .mjs로 사용

5. ESM vs CommonJS:

   • ESM은 정적 구조를 가지며, 모듈 로딩이 비동기적입니다.
   • CommonJS는 동적 구조를 가지며, 모듈 로딩이 동기적입니다.
   • ESM은 import/export를 사용하고, CommonJS는 require()/module.exports를 사용합니다.

6. 장점:

   • 코드 구조화 및 네임스페이스 관리가 용이합니다.
   • 정적 분석을 통한 최적화가 가능합니다.
   • 순환 의존성을 더 잘 처리합니다.
   • 비동기 로딩을 통한 성능 향상이 가능합니다.

7. 주의사항:

   • 브라우저 지원: 오래된 브라우저에서는 지원되지 않을 수 있습니다.
   • 빌드 도구: 프로덕션 환경에서는 Webpack, Rollup 등의 빌드 도구와 함께 사용하는 것이 일반적입니다.

ESM은 현대 JavaScript 개발의 핵심 요소로, 코드의 모듈화와 관리를 크게 개선합니다. 특히 대규모 애플리케이션 개발에서 코드의 구조화와 유지보수성을 높이는 데 매우 유용합니다.