[javascript] CJS, AMD, UMD, ESM 이란? / 사용법

Languages/Javascript

[javascript] CJS, AMD, UMD, ESM 이란? / 사용법

MOONCO 2021. 5. 21. 13:53

👉 CJS, AMD, UMD, ESM의 목적

처음 JS는 모듈로 가져오거나 내보내는 방법이 없어, 하나의 파일에 모든 기능을 담아야 했다.

JS 프로그램을 모듈로 개발하고, 배포할 수 있게 하기 위하여,

CJS, AMD, UMD, ESM을 개발했다.

👉 CJS (CommonJS)

javascript를 브라우저에서만 아니라, 다른 곳에서도 사용할 수 있게 해주는 API

API란?

[프로그래밍] API란?

API란? 서로 다른 프로그램끼리 연결해주는 도구 Application Programming Interface 앱 프로그래밍 인터페이스 API 예시 REST API : 서버와 클라이언트를 연결 GraphQL API : 서버와 클라이언트를 연결

defineall.tistory.com

CJS 구문 ( 사용법 )

// require를 통해 모듈을 변수에 담을 수 있게 되었다
var lib = require('package/lib');

// 가져온 모듈을 사용할 수 있게 되었다.
function foo() {
  lib.log('hello world!');
}

// foo 함수를 다른 파일에서 사용할 수 있도록, 다른 모듈로 추출할 수 있게 되었다
exports.foobar = foo;

CJS 특징 - 동기적 방식을 사용한다.

동기적 방식이란?

[프로그래밍] 동기처리, 비동기처리 란?

동기(synchronous) 처리 이전 작업이 끝나야, 다음 작업을 처리하는 방식 비동기(asynchronous) 처리 여러 작업을 동시에 처리하는 방식 // 스트리밍도 비동기 처리 방식중에 하나다.

defineall.tistory.com

동기적 방식 예시

var foo = require('foo');
var bar = require('bar');

foo.log('It is foo');
bar.log('It is bar');


// 출력 결과
It is foo
It is bar

CJS를 사용하는 라이브러리

Node.js
PINF

👉 AMD (Asynchronous Module Definition)

CommonJS는 모든 파일이 로컬 디스크에 있어, 필요할 때 바로 불러올 수 있는 상황에서만 사용한다.

브라우저에서 이런 방식을 사용하면, 필요한 모듈이 모두 다운로드될 때까지 아무것도 할 수 없다.

비동기 방식으로 자바스크립트 모듈을 사용하는 API인, AMD를 만들었다.

AMD 구문 ( 사용법 )

// myModule.js
// define을 이용해 새로운 모듈을 불러오고, 콜백함수로 전해줌
define(['package/lib'], function (lib) {

  // 콜백함수 이용해서, 불러온 모듈 사용가능
  function foo () {
    lib.log('hello world!');
  }
  
  // 다른파일에서 foo함수를, foobar이란 이름의 모듈로 불러올 수 있게 만듬
  return {
    foobar: foo
  };
});

// 위에서 선언한 모듈 불러오기
require(['package/myModule'], function (myModule) {
  myModule.foobar();
});

AMD를 사용하는 라이브러리

RequireJS
PINF

👉 UMD (Univarsal Module Definition)

AMD와 CommonJS가 서로 호환되지 않는 문제를 해결하기 위한 API

UMD 구문 ( 사용법 )

(function (root, factory) {
  if(typeof define === 'function' && define.amd) {
    // define이 함수이고, define.amd가 존재할때 AMD사용
    define(['exports', 'b'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // export가 객체이고, export.nodeName이 문자열이 아닐때, CommonJS사용
    factory(exports, require('b'));
  } else {
    //Browser globals
    factory((root.commonJsStrict = {}), root.b);
  }
}(this, function (exports, b) {
  // use b in some fashion.
  // attach properties to the exports object to define
  // the
  exports.action = function () {};
}));

UMD 특징 - 여러 모듈 로더에서 사용 가능

AMD와 CommonJS에서 모두 사용가능하다.

AMD - 클라이언트 사이드

CommonJS - 서버 사이드

👉 ESM (ECMAScript Module)

ES6부터 추가된 자바스크립트 모듈 기능

ESM 구문 ( 사용법 )

// import, from 구문을 사용할 수 있다!
import lib from 'package/lib';

function foo () {
  lib.log('hello world!');
}

export {
  foobar: foo
};

ESM 특징 - javascript 자체 모듈 시스템

ECMAScript에서 지원하는 자바 스크립트 공식 모듈

import와 export를 지원하지 않는 브라우저가 많으므로, 번들러를 함께 사용해야한다.

<script> 태그에 type="module"을 선언하면 자바스크립트 파일을 모듈로 사용할 수 있다.

이때, 모듈이라는 것을 정확히 표현하기 위해 mjs 확장자를 사용하도록 권장한다.

ESM 사용법

<html>
<body>
  <script type="module" src="foo.mjs"></script>
  <script type="module" src="foo.mjs"></script>
</body>
</html>

// foo.mjs
var x = 'foo';

console.log(x);  // foo

console.log(window.x);

// bar.mjs
// import를 사용해, 모듈을 불러온다

import test from "./module.mjs";
console.log(test);

var x = 'bar';

console.log(x);

console.log(window.x);

// module.mjs
const test = 'hello world';

// export를 사용해, 모듈로 내보낼 수 있다.
export default test;

저작자표시 동일조건 (새창열림)