29. 모듈 시스템(Module System) - 2

모듈 로딩과 해석 과정

자바스크립트에서 모듈을 로딩하고 해석하는 과정은 어떻게 이루어질까요? 이번 글에서는 모듈 로딩과 해석 과정을 알아보고 코드 예제를 통해 이해해 보겠습니다.

1. 모듈 로딩

자바스크립트에서 모듈을 로딩하는 과정은 환경에 따라 다를 수 있지만, 주로 브라우저 환경과 Node.js 환경에서 모듈이 로딩됩니다.

브라우저 환경

• 브라우저에서는 <script> 태그를 사용하여 외부 파일을 로딩합니다.
• <script> 태그에 src 속성을 사용하여 모듈의 경로를 지정합니다.

<script src="module.js"></script>

Node.js 환경

• Node.js에서는 require() 함수를 사용하여 모듈을 로딩합니다.
• 모듈의 경로를 인자로 전달하여 로딩합니다.

const myModule = require('./module');

2. 모듈 해석

로딩된 모듈은 해석되어 실행 가능한 코드로 변환됩니다. 이 과정은 모듈 시스템에 따라 다르며, 주로 다음과 같은 단계로 이루어집니다.

CommonJS

• 모듈은 동기적으로 해석됩니다.
• require() 함수를 사용하여 모듈을 로드하고, 모듈은 해당 경로의 파일을 동기적으로 읽어 해석합니다.

AMD (Asynchronous Module Definition)

• 모듈은 비동기적으로 해석됩니다.
• define() 함수를 사용하여 모듈을 정의하고, 의존성 배열과 함께 콜백 함수를 전달하여 모듈을 정의합니다.

UMD (Universal Module Definition) 및 ES6 모듈

• 모듈은 CommonJS나 AMD와 유사하게 동작합니다.
• 브라우저 환경에서는 동기적으로, Node.js 환경에서는 비동기적으로 해석됩니다.

예제 코드

CommonJS 스타일의 모듈 정의 및 사용

// module.js
module.exports = {
  foo: function() {
    return 'foo';
  },
  bar: function() {
    return 'bar';
  }
};

// main.js
const myModule = require('./module');
console.log(myModule.foo()); // 'foo'

AMD 스타일의 모듈 정의 및 사용

// module.js
define(['dep1', 'dep2'], function(dep1, dep2) {
  return {
    foo: function() {
      return 'foo';
    },
    bar: function() {
      return 'bar';
    }
  };
});

// main.js
require(['module'], function(myModule) {
  console.log(myModule.foo()); // 'foo'
});

ES6 모듈의 정의 및 사용

// module.js
export function foo() {
  return 'foo';
}

export function bar() {
  return 'bar';
}

// main.js
import { foo } from './module';
console.log(foo()); // 'foo'

 

이렇게 모듈이 로딩되고 해석되는 과정을 이해하면, 모듈 시스템의 동작 방식을 더 잘 이해할 수 있습니다. 각 환경에서의 모듈 로딩 및 해석 과정을 이해하면, 코드를 작성할 때 모듈 시스템을 효율적으로 활용할 수 있습니다.