FrontEnd/TypeScript

[TS] modules

문스코딩 2023. 3. 31. 16:23

ES6부터 export, import의 개념이 도입된 건 알고 있는데, AMD과 RequireJS는 무엇일까?

 

AMD

AMD(Asynchronous Module Definition)은 JavaScript 모듈화를 위한 디자인 패턴중 하나.

AMD는 JavaScript 코드를 모듈 단위로 구성하고 이를 비동기 방식으로 로드할 수 있도록 해줍니다. 

AMD는 Require.js와 함께 사용되고 define() 함수를 사용해서 모듈을 정의하고 require() 함수를 사용하여 모듈을 로드합니다.

AMD를 사용하면 애플리케이션의 성능을 개선할 수 있습니다. 모듈을 비동기적으로 로드해서 페이시 로드 시간을 줄이고 필요한 모듈만 로드해서 메모리 사용을 최적화합니다.

 

require.js

require.js는 JavaScript에서 모듈 로딩 및 모듈 관리를 지원하는 라이브러리입니다. AMD 디자인 패턴을 기반으로 작성되었고 JavaScript에서 모듈화를 더 쉽게 만들어 줍니다.

require.js를 사용하면 모듈을 비동기 방식으로 로드할 수 있고 필요한 모듈만 로드하여 불필요한 네트워크 요청을 줄일 수도 있습니다.

require.js는 브라우저와 node.js 모두에서 사용할 수 있습니다.

 

- require.js는 브라우저에 내장되어 있지 않습니다. 사용하려면 라이브러리를 먼저 다운로드 해야합니다.

- require.js는 NodeJS에 내장되어 있지 않습니다. NodeJS에는 CommonJS 모듈 시스템을 기본적으로 사용하여 CommonJS의 require() 함수를 사용하게 됩니다.

 

require(["jquery"], function($) {
  // jquery 모듈이 로드되면 실행됩니다.
  $(function() {
    // DOM이 로드된 후 실행됩니다.
    $("body").append("<h1>Hello, world!</h1>");
  });
});

CommonJS

commonJS는 NodeJS에서 사용하는 모듈 시스템입니다.

모듈은 require() 함수를 사용하여 정의되고 모듈 정의는 exports 객체를 사용하여 수행됩니다.

모듈은 비동기적으로 로드되고 이는 브라우저가 사용하는 AMD와 달리 CommonJS 모듈 시스템이 사용됩니다.

 

 

CommonJS exports vs ES6 export

서로 사용하는 환경이 다르기 때문에 원칙적으로 호환되지 않는다.

NodeJS의 CommonJS에 모듈 방식을 ES6 처럼 변경하는 방법은 아래와 같다.

 

1. package.json에 type 속성을 module로 설정하는 것

2. .mjs 확장자를 사용하는 것 (js 파일은 기본적으로 CommonJS, AMD 모듈을 사용하는 것으로 간주)

반응형