Moduel이란?

개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 옵니다.
이때 분리된 하나의 파일을 모듈 이라고 부르는데, 모듈은 대게 클래스 한 혹은 목적을 가진 여러개의 함수를 포함하는 라이브러리로 구성되어 있습니다.

모듈은 단지 파일 하나에 불과합니다.
스크립트 하나는 모듈 하나입니다.

모듈 장점

• 유지보수 용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선하거나 수정이 용이합니다.
• 네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 곂치는 경우가 존재합니다. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있습니다.
• 재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용할 수 있습니다.

모듈 시스템의 종류

• AMD - 가장 오래된 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발되었습니다.
• CommonJS - NodeJs 환경을 위해 만들어진 모듈 시스템 입니다.
• UMD - AMD와 NodeJs와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어졌습니다.
• ES Module - ES6(Es2015)에 도입된 자바스크립트 모듈 시스템입니다.

ES Module 방식

ES6에 도입된 자바스크립트 모듈 시스템입니다.
모듈을 외부에서 사용할 수 있도록 내보낼 때는 named export,default export와 같은 키워드를 사용하며,
외부에서 모듈을 불러올때는 import를 사용하여 모듈을 불러올 수 있습니다.

개발자가 지정한 파일은 entry point로 하여 나머지 파일들은 import문을 따라가며 찾습니다.

내보내기

• namde export를 사용하여 함수 또는 변수를 내보낼 수 있습니다.
• default export 를 사용하여 하나의 기본 함수를 내보낼 수 있습니다. 단, 모듈 당 하나만 가능합니다.

불러오기

import 를 사용하여 모듈을 불러올 수 있습니다.

• export 를 import 하는 경우 각각의 변수나 함수를 가져올 수 있습니다.
  또한 * as 별칭 을 통하여 가져올 수 있습니다.

  특징

• 모듈을 비동기 환경에서 다운로드하며, import export 구문을 찾아 파싱한다.

• EsModules는 실행해보지 않아도 import,export 에러를 감지할 수 있다.

• config를 type='module'로 세팅 해주어야 사용할 수 있다.

• top-level await가 가능하다.

CommonJs

NodeJs 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템 입니다.
모듈을 외부에서 사용할 수 있도록 내보낼 때는 exports,module.exports와 같은 키워드를 사용하며, 외부에서 모듈을 불러올 때는 required를 사용합니다.

내보내기

• exports 변수의 속성으로 내보낼 함수를 설정할 수 있습니다.
• module.exports를 사용하여 하나의 객체로 묶어서 내보낼 수 있습니다.

불러오기

• require 키워드를 통해 변수에 할당할 수 있습니다.
• 전개구문을 통하여 불러올 수 있습니다.

특징

• require가 동기로 이루어지므로 promise를 return 하지 않는다.
• CommonJs는 실행을 해보아야 import,export에러를 감지할 수 있다.
• 디폴트 값으로 적용된다.
• top-level await가 불가능하다.

순환 의존성

// main.js
let count = require('./counter.js').count;
export message = 'hi';

// counter.js
let message = require('./main.js').message; // message 정의되어 있지 않음
setTimeout(() => console.log(message), 0); // CommonJS : undefined, ES Modules : 'hi'

순환 관계가 있을 때 CommonJs는 변수 값을 복사해서 사용하므로 main.js에서의 message가 할당 되어도 counter.js에서의 변수는 변하지 않는다.
하지만 ES Module에서는 같은 변수를 참조하고 있으므로 setTimout에서 제대로 할당된 변수가 출력된다.
ES Module은 위와 같이 순환 의존성을 지원한다.

실제사용

리엑트에 서는 ESModules를 주로 사용합니다.
하지만 패키지 모듈들은 결국 CommonJs를 기본 모듈 시스템으로 선택하기 때문에, 코드 작성시 CommonJs로 변환해 주어야 하는데 해당 작업은 Babel이 수행합니다.

정리

CommonJS와 비교하여 ESModules는 비동기로 동작하여 속도가 빠르고
실제 사용되는 부분만을 import(tree shaking)하여 메모리를 적게 차지하며, 가독성이 좋고 순환 의존성을 지원한다는 이점이 있습니다.