JavaScript Module System(1) - IIFE부터 CJS AMD까지

date

Dec 2, 2023

slug

js-module-1

author

status

Public

tags

Module

summary

type

Post

thumbnail

category

updatedAt

Nov 11, 2024 01:51 PM

Module

• 기능을 기준으로 파일 단위로 분리하며

• 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 합니다.

IIFE를 사용해 모듈 패턴을 만들던 시절

var counter = (function(){
    var i = 0;

    return {
      get: function(){
        return i;
      },
      set: function( val ){
        i = val;
      },
      increment: function() {
        return ++i;
      }
    };
  }());

  // `counter` is an object with properties, which in this case happen to be
  // methods.

  counter.get(); // 0
  counter.set( 3 );
  counter.increment(); // 4
  counter.increment(); // 5

1. 전역 스코프 오염 방지
1. JavaScript는 기본적으로 전역 스코프를 사용합니다. IIFE로 모듈을 만들어 사용하던 때에는 ES2015(ES6)의 let, const가 나오기 이전이었습니다. var 변수 선언자만 있는 상황에서 전역 변수를 오염시키지 않기 위해서는 변수를 함수 스코프에 캡슐화하는 작업이 필요했습니다.

2. 캡슐화
1. IIFE를 사용하면 모듈 내에서만 접근 가능한 변수를 만들 수 있습니다. → 외부에서 직접 접근할 수 없는 private 변수 만들기 위해 사용했습니다.

3. 모듈화
1. 독립적이고 재사용 가능한 코드 블록을 만들 필요가 있었습니다.

• 코드 가독성 - 많은 IIFE를 사용할 경우 코드가 난해해보입니다.

• 전역 네임스페이스 문제 - 네임스페이스가 충돌하는 문제가 있었습니다.

• 모듈간 의존성 관리가 어려움 - 의존성 주입을 수동으로 처리해야 했습니다.

• 재사용성 제한 - 제한적인 재사용성을 갖고 있었습니다.

CommonJS(CJS)

1. 초기화의 간단함
서버 애플리케이션은 일반적으로 시작 시점에 필요한 모든 모듈을 로드합니다. 애플리케이션의 초기화 단계에서 간단하게 필요한 모듈들을 로드하고 사용할 수있도록 하면 이후에 바로 요청을 처리할 수 있게됩니다. 모듈이 로드된 시점 이후에만 해당 모듈을 사용할 수 있기에 초기화 단계에서 발생할 수 있는 의존성 문제를 예방할 수 있습니다.

2. 명확한 실행 흐름
동기식 로딩은 코드의 실행 흐름을 명확하게 합니다. 모듈이 로드될 때까지 다음 코드가 실행되지 않기에 언제 로드되고 사용 가능한지 확실하게 알 수 있습니다.

3. I/O 속도의 차이
서버 측 환경에서는 파일 시스템 접근이 상대적으로 빠르기에 동기식 파일 시스템 접근이 큰 문제가 되지 않습니다. 서버 애플리케이션의 성능은 네트워크 요청 처리와 데이터베이스 접근 속도에 더 크게 영향을 받습니다.파일 시스템에서 모듈을 로드하는 작업은 네트워크 요청에 비해 훨씬 빠릅니다. 또한 클라이언트와 달리, 페이지 로드 시간을 줄이기 위해 비동기 로딩을 최적화할 필요가 없습니다.

4. 복잡한 의존성 관리
서버 애플리케이션은 종종 많은 모듈과 복잡한 의존성을 가집니다. 동기식 로딩은 의존성 그래프를 쉽게 이해하고 관리하게 해줍니다. 필요한 모듈을 즉시 로드하고 사용할 수 있기 때문에 의존성 관리가 간단해집니다. 모듈간 의존성을 쉽게 추적할 수 있기에 디버깅과 유지보수가 용이합니다.

//모듈 정의하기
const message = "Hello, CommonJS";

function greet() {
    console.log(message);
}

module.exports = {
    greet
};

//모듈 가져오기
const example = require('./example');
example.greet();

var add = function(x, y) {
    return x + y;
};

var subtract = function(x, y) {
    return x - y;
};

module.exports = {
    add: add,
    subtract: subtract
};

var math = require('./math');

console.log(math.add(2, 3));       // 출력: 5
console.log(math.subtract(5, 2));  // 출력: 3

AMD(Asynchronous Module Definition)

1. 페이지 로드 성능 향상
웹 페이지 로드 성능을 최적화하기 위해서입니다. 브라우저에서 컨텐츠들을 로드하여 웹 서비스를 그릴 때, 여러 요소들을 로드하는 동안 다른 작업을 할 수 있도록 하면 HTML 문서의 파싱과 렌더링이 중단되지 않습니다. 여러 script와 stylesheet들을 동시에 로드할 수 있게 해줍니다.

2. 사용자 경험 개선과 리소스 최적화
초기 렌더링에 필요한 최소한의 리소스만 먼저 로드하고 나머지는 비동기적으로 로드할 수 있어 사용자가 핵심 콘텐츠를 빠르게 볼 수 있게 합니다. → 초기 렌더링 속도 개선

3. 네트워크 효율성
필요한 리소스만 로드할 수 있어 불필요한 네트워크 트래픽을 줄이고, 네트워크 자원을 효율적으로 사용할 수 있게 합니다.

// math.js
define([], function() {
    var add = function(x, y) {
        return x + y;
    };

    var subtract = function(x, y) {
        return x - y;
    };

    return {
        add: add,
        subtract: subtract
    };
});

// main.js
require(['math'], function(math) {
    console.log(math.add(2, 3));       
    console.log(math.subtract(5, 2)); 
});

1. 비동기식 로딩으로 인한 성능 향상

2. 명시적인 의존성 선언과 관리

3. 모듈화된 코드 구조

AMD와 factory pattern 톺아보기

define(id, dependencies, factory);

• id (optional): 모듈의 이름을 지정합니다. 생략하면 파일 이름이 모듈 이름으로 사용됩니다.

• dependencies (opitional): 모듈이 의존하는 모듈들의 배열입니다. 생략하면 기본적으로 require, exports, module이 사용됩니다.

• factory: 모듈의 실제 구현입니다. 함수나 객체를 반환합니다.

// math.js 모듈 정의
define('math', [], function() {
    var add = function(x, y) {
        return x + y;
    };

    var subtract = function(x, y) {
        return x - y;
    };

    return {
        add: add,
        subtract: subtract
    };
});