ESM(ECMAScript Modules)

자바스크립트에서 모듈을 관리하고 가져오는 최신 표준 방식입니다.

‘import’와 ‘export’를 사용합니다.

장점

• 자바스크립트의 공식 표준
• 정적 분석이 가능하여 종속성을 쉽게 추적하고 최적화할 수 있다.
• 코드가 직관적인고 명확하여 가독성을 높입니다.

단점

• 오래된 브라우저에서는 ESM을 지원하지 않아 호환성 문제가 생깁니다.
• ESM은 비동기적으로 로드되기에 큰 프로젝트에서 많은 모듈을 동기화하여 로드할 때 문제가 발생할 수 있습니다.
• 브라우저 환경에서 각 모듈에 대해 별도의 HTTP 요청이 필요합니다. 이로 인해 많은 수의 파일을 로드하는 경우 성능 저하가 발생할 수 있습니다.

ES 모듈 지원의 장점

1. 빠른 로딩과 개발 속도

ES 모듈은 브라우저에서 네이티브로 지원하는 모듈 시스템으로, 브라우저가 필요한 모듈을 동적으로 로드할 수 있게 해줍니다. Vite는 이 점을 활용하여, 개발 서버에서 모듈을 필요할 때만 로드하므로 초기 로딩 속도가 매우 빠릅니다. 이는 다음과 같은 이점을 제공합니다:

• 빠른 개발 서버 시작: Vite는 필요할 때만 모듈을 로드하기 때문에 개발 서버가 빠르게 시작됩니다. 우리가 채팅 애플리케이션을 개발하면서 코드 변경 후 즉각적인 피드백을 받을 수 있어요.
• 효율적인 핫 모듈 리플레이스먼트(HMR): 코드 변경 시, 전체 애플리케이션을 다시 빌드하지 않고 변경된 모듈만 갱신합니다. 이는 빠른 피드백 루프를 제공하여 생산성을 크게 높여줍니다.

2. 모던 JavaScript 기능 활용

ES 모듈은 최신 JavaScript 표준을 따르기 때문에, 최신 JavaScript 기능을 쉽게 사용할 수 있습니다. 이는 코드의 가독성과 유지보수성을 높이는 데 도움을 줍니다:

• 간결한 코드 작성: 최신 JavaScript 문법과 기능을 사용할 수 있어, 더 간결하고 이해하기 쉬운 코드를 작성할 수 있습니다.