RequireJS란?

대규모 웹 어플레리케이션 개발시에 자바스크립트 파일이 커지기 때문에 의존성 관리하기 어려워 지는 문제가 발생합니다.

기능 단위의 모듈로 분할해서 관리하기 위해서 여러가지 방법중 AMD 방식으로 모듈화할수 있습니다.

우선 RequireJS는 AMD스팩으로 동작합니다. 비동기 적으로 모듈을 불러올수 있는 스팩인데 이를 통해 모든 모듈이 다 로드 되지 않더라도 브라우저의 랜더링 동작에 영향을 주지 않아 사용성을 해치지 않습니다.

사용 예시

// js/myModule.js
define(function() {
    var myVariable = 'Hello';
    function myFunction() {
        console.log(myVariable);
    }
    return {
        myFunction: myFunction
    };
});

requirejs.config({
// RequireJS를 설정하는 부분입니다
    baseUrl: 'js', // 모듈을 찾을 기본 경로 설정
    paths: {
        jquery: 'libs/jquery-3.6.0',
        underscore: 'libs/underscore'
        myModule: 'myModule'
    }
});

// 모듈을 로딩하고, 로딩이 완료되면 콜백 함수를 실행합니다
require(['jquery', 'underscore', 'myModule'], function($, _, myModule) {
    // 로드된 모듈을 사용하여 작업 수행
    $('body').append('<p>Hello, world!</p>');
    var result = _.map([1, 2, 3], function(num){ return num * 2; });
    console.log(result); // [2, 4, 6]
    myModule.myFunction();
});

장점

  • 모듈화 구현 가능
  • 비동기 로딩 (페이지 로딩 속도 향상)
  • 복잡한 의존성 관리

단점

  • 초기 설정의 어려움??
  • ES6 모듈화 표준 스팩에서 해결 가능