JavaScript의 모듈 로더

1. JavaScript의 모듈
2. JavaScript의 모듈 로더

이 글에서는 JavaScript에서 모듈 로더가 무엇인지, 모듈 로더를 사용하여 예제를 통해 JavaScript 모듈을 메인 JavaScript 파일에 로드하는 방법에 대해 알아봅니다.

JavaScript의 모듈

구현 세부 정보를 요약하고 특정 작업을 실행하는 데 사용되는 여러 코드 문을 모듈이라고 합니다. 또한 재사용할 수 있으며 유사한 코드를 반복적으로 작성하지 않아도 됩니다.

다른 코드 소스에서 모듈을 로드하고 사용할 수 있습니다. 모듈을 사용하여 종속성을 쉽게 변경하여 관리할 수 있습니다.

모듈 기본 패턴:

아래와 같이 패턴으로 모듈을 만들 수 있습니다.

// Expose module as a global variable

var MyModule = function() {
  // Inner logic of the module

  function helloWorld() {
    console.log('Hello world');  // will print "Hello world" in log
  }

  // Expose API

  return {
    helloWorld: helloWorld
  }
}

이제 아래와 같이 모듈의 인스턴스를 만들 수 있습니다.

var module_instance = new MyModule();

이제 공개 API에 액세스할 수 있습니다.

module_instance.helloWorld();

JavaScript의 모듈 로더

이미 작성된 모듈을 특정 모듈 형식으로 해석하고 로드하기 위해 소스 코드의 런타임에 실행되는 모듈 로더를 사용합니다. 모듈 로더는 브라우저에서 로드됩니다.

모듈 로더가 로드할 기본 파일을 정의해야 합니다. 모듈 로더는 메인 파일 해석 및 다운로드를 수행합니다.

JavaScript에는 몇 가지 모듈 로더 예제가 있습니다.

• RequireJ
• SystemJs

RequireJ

RequireJs는 AMD(Asynchronous Module Definition) 표준을 지원하는 라이브러리입니다. 아래와 같이 HTML 문서에서 RequireJ를 다운로드하고 로드해야 합니다.

<script src="scripts/require.js"></script>

require.js 스크립트가 로드되기 전이나 후에 RequireJs를 구성할 수 있습니다. 다양한 필수 이름을 설명하고 구성을 저장해야 합니다.

SystemJs

JavaScript에서 SystemJs는 범용 모듈 로더입니다. 모듈 로딩을 위한 각도에서는 엄청나게 사용됩니다.

main.js 파일에 jQuery 라이브러리가 필요한 경우 import 키워드로 main.js 파일을 시작할 수 있으며 자동으로 jQuery 라이브러리 모듈이 로드됩니다. SystemJs를 사용하면 아래와 같이 기본 JavaScript 파일에 별도의 JavaScript 모듈을 로드할 수 있습니다.

System.Import('main.js');