250115-module.md

모듈

###모듈의 배경

• <script>�태그를 통하여 외부의 스크립트 파일을 가져올 수 있지만, 파일마다 독립적인 스코프를 가지지 않고, 하나의 전역 객체를 공유한다. 즉, 여러개의 js파일을 불러와도 하나의 자바스크립트 파일인것처럼 된다.
• 전역스코프를 공유하기때문에, 파일 간의 변수/함수의 충돌 가능성이 생겨버림.
• 이를 해결하기위해 CommonJS / ESModules 가 나옴

CommonJS , ESModules

• CommonJS는 node.js의 기본 모듈 시스템 / ESModule는 현대 자바스크립트의 표준

// CommonJS
// 내보내기
module.exports = { func: function() { ... } };

// 가져오기
const module = require('./module');

//EsModule
// 내보내기
export const func = () => { ... };
export default class { ... };

// 가져오기
import { func } from './module';
import DefaultExport from './module';

• ESModule : 정적 분석 가능, 비동기적 로딩(성능최적화), Tree-shaking가능(코드최적화,사용하지않는 코드제거)
• CommonJS : 동기적 로딩(순차적으로), 런타임에 의존성 해석
• ESModule은 시작전에 모든 계획이 명확해야하는 반면에 CommonJS는 실행하면서 필요한것을 그때그때 가져온다.
• ESModule은 코드 실행 전 오류 발견 가능

정적분석

• 코드가 실행되기 전에 Javascript 엔진이 import/export를 미리 분석할 수 있다.
• 코드를 실행하지 않고도 어떤 모듈을 갖고오고, 어떤 변수를 사용하는지 알 수 있다.
• 정적 분석 덕분에 트리쉐이킹이 가능하다.

  export function add(a, b) { return a + b; }
  export function subtract(a, b) { return a - b; }
  
  import { add } from './math.js'; // subtract는 가져오지 않음
  console.log(add(2,3));

  • 위와 같이 사용하면 빌드할때 subtract함수는 사용되지 않으므로 자동으로 제거되어 번들 크기를 최적화가능

동적 로딩

• 코드 실행 중에 require를 사용해서 모듈을 로드할 수 있다.
• 실행할때 어떤 모듈을 로드할지 결정한다.
• 모든 모듈이 완전히 로드될때까지 다음 코드가 실행되지 않는다(blocking 발생)