JS Module

• CommonJS
  서버 사이드에서 사용하며, 동기적으로 작동
  require 문법 사용

• AMD
  서버 사이드와 클라이언트 사이드에서 사용할 수 있지만 클라이언트 사이드에서 주로 사용되며, 비동기적으로 작동
  define – require 문법 사용

• UMD
  CommonJS와 AMD를 모두 사용하기 위한 구현 패턴

• ESM
  언어 자체에 표준으로 탑재된 모듈 시스템
  export – import 문법 사용

Module 의 필요성

개발 초기에는 필요한 js 파일을 <script scr= ...> 형식으로 불러와서 사용했다.
하지만, 이는 파일이 많아질 경우 관리가 어려워지는 문제가 있었다.
또한, 외부 코드에서 동일한 이름의 변수를 사용할 경우 문제가 발생 할 수 있는 가능성이 매우 높았다.
결국 자바스크립트의 모듈 시스템은 외부의 라이브러리(모듈)를 추가해서 사용할 때 필요한 코드들만 사용하거나, 변수의 충돌과 같은 문제를 방지하고 관리의 용이성을 위해서 고안된 해결 방법이라고 할 수 있다.

export

export 의 방식에는 두가지가 존재한다.

• named export
• default export

named export

선언된 변수명을 그대로 export 하는 방식이다.
모듈 내에서 여러개의 export 가 존재 할 수 있다.
변수를 선언함과 동시에 내보내기를 할 수도 있고,
먼저 정의된 변수들을 모아서 내보내거나 별칭으로 바꿔서 내보낼 수 있다.

export const a1;
export const a1 = () => {};

export const a2;
export { a1, a2 as a3 }

"ES6", "ES2015", "ES2020", "ESNext", "None", "ES2022", "Node16", "NodeNext".

[ref]
https://www.youdad.kr/js-module-system/