[javascript] CommonJS, AMD, 전역 객체의 차이가 뭐지??

외부 강의를 하는 과정에서 많은 개발자들이 CommonJS, ADM, 전역 객체로 선언된 자바스크립 객체의 차이를 모르는 것을 알게됩니다.
간단하게 이 차이를 확인하고, 각 프로젝트 및 서비스 성격에 맞게 어떻게 컴파일을 하고, 사용해야 하는지에 대한 설명입니다.
우리가 ScreenResizer.js 라는 플러그인을 개발하고, 이 플러그인을 다양한 프로젝트 및 서비스에서 사용한다고 가정합니다.

아래는 ScreenResizer.js 파일의 간략화된 샘플 코드입니다. 이 코드는 ScreenResizer 클래스를 정의하고, 실행 환경에 따라 CommonJS, AMD, 또는 전역 객체에 적절히 할당하는 방식으로 구성되어 있습니다.

// ScreenResizer 클래스 정의
class ScreenResizer {
    constructor(element, options) {
        // 초기화 코드
    }

    // ScreenResizer의 메서드들
}

// 환경에 따른 모듈 시스템 처리
if (typeof module === 'object' && typeof module.exports === 'object') {
    // CommonJS 환경 (예: Node.js)
    module.exports = ScreenResizer;
} else if (typeof define === 'function' && define.amd) {
    // AMD 환경 (예: RequireJS)
    define(() => ScreenResizer);
} else {
    // 전역 객체 (일반 브라우저 환경)
    window.ScreenResizer = ScreenResizer;
}

이 코드는 다음과 같이 작동합니다:

1. ScreenResizer 클래스 정의: 기능을 수행하는 주 클래스를 정의합니다.

2. 환경에 따른 모듈 할당:

   • CommonJS: Node.js와 같은 CommonJS 환경에서는 module.exports를 사용하여 ScreenResizer를 내보냅니다.
   • AMD: AMD 모듈 로더(예: RequireJS)를 사용하는 환경에서는 define 함수를 통해 모듈을 정의합니다.
   • 전역 객체: 모듈 시스템이 없는 일반 브라우저 환경에서는 ScreenResizer를 전역 객체인 window에 할당합니다.

이 구조를 사용하면 ScreenResizer 클래스는 다양한 자바스크립트 환경에서 유연하게 사용될 수 있습니다. 이 방식은 모듈을 작성할 때 범용성을 높이고 다양한 환경에서 호환성을 제공하려는 목적으로 자주 사용됩니다.

이 코드는 다양한 자바스크립트 모듈 시스템 및 환경에서 ScreenResizer 클래스를 사용할 수 있도록 구성되어 있습니다. 각 조건문은 특정한 모듈 시스템이나 환경에서의 동작을 정의합니다. 이를 하나씩 살펴보겠습니다.

1. CommonJS, AMD, 전역 객체 비교 설명

CommonJS

• 정의: Node.js에서 사용되는 모듈 시스템입니다.
• 사용 방법: require를 사용하여 모듈을 불러오고, module.exports를 사용하여 모듈을 내보냅니다.
• 예시: module.exports = ScreenResizer;
• 특징: 동기적 로딩, 주로 서버 사이드에서 사용.

AMD (Asynchronous Module Definition)

• 정의: 비동기적 모듈 로딩을 지원하는 브라우저 기반의 모듈 시스템입니다.
• 사용 방법: define 함수를 사용하여 모듈을 정의합니다.
• 예시: define(() => ScreenResizer);
• 특징: 비동기적 로딩, 브라우저 환경에 적합.

전역 객체 (Global)

• 정의: 모듈 시스템이 없는 순수 브라우저 환경에서 사용됩니다.
• 사용 방법: 전역 객체인 window에 직접 속성을 할당합니다.
• 예시: window.ScreenResizer = ScreenResizer;
• 특징: 어떠한 모듈 시스템도 사용하지 않고, 스크립트가 전역 스코프에서 실행됩니다.

2. 컴파일 후 유효성 설명

컴파일 후, 이 코드는 실행 환경에 따라 적절한 모듈 시스템을 사용하거나, 모듈 시스템이 없는 경우 전역 객체에 ScreenResizer를 할당합니다. 이는 ScreenResizer 클래스가 다양한 환경(Node.js, AMD 환경의 브라우저, 일반 브라우저)에서 호환되도록 합니다. 즉, 같은 코드가 여러 환경에서 유연하게 작동합니다.

3. typeof module 및 define 설명

• typeof module: module 객체는 Node.js 환경에서 사용되는 CommonJS 모듈 시스템의 일부입니다. typeof module === 'object'는 코드가 CommonJS 환경에서 실행되고 있는지를 검사합니다. 이것이 true라면 module.exports를 사용해 ScreenResizer를 내보낼 수 있습니다.

• define 존재 여부: define 함수는 AMD 모듈 시스템에서 사용됩니다. typeof define === 'function' && define.amd는 현재 환경이 AMD 모듈을 지원하는지 확인합니다. 이것이 true라면 define 함수를 사용해 ScreenResizer 모듈을 정의할 수 있습니다.

이 코드는 실행 환경을 동적으로 감지하여 적절한 모듈 시스템을 사용하거나, 모듈 시스템이 없는 경우에는 전역 객체에 직접 할당하는 방식으로 작동합니다. 이렇게 하면 ScreenResizer 클래스는 다양한 환경에서 호환되며 유연하게 사용될 수 있습니다.