RequireJS를 사용해 스크립트 모듈화 하기

 입사하게 된 회사에서 기존의 코드를 볼 기회가 생겼다. AngularJS를 기반으로 진행된 프로젝트에 RequireJS를 사용한 것을 보고 이에 대해 간략히 정리해보고자 한다.

 일반적으로 Javascript 기반의 어플리케이션을 개발하다보면 여러 파일로 분리하여 개발하게 된다. 이 경우에 유지보수성은 증대될 수 있으나, 파일의 수가 증가함에 따라 스크립트 태그의 삽입이 누락되거나 잘못 배치될 가능성이 커진다. 더불어 스크립트의 종속성을 관리하기 어려워진다.

 RequireJS는 JavaScript 종속성을 쉽게 관리하고, 지연로딩(Lazy-Loading)하기 위해 사용되는 Javascript 라이브러리다. 종속성을 모듈의 형태로 관리하며, 모듈을 생성하고 호출하기 위한 API를 제공한다.

---

1. RequireJS 스크립트 다운로드

 RequireJS를 사용하기 위해 가장 먼저 해야할 일은 RequireJS(https://requirejs.org/)에서 제공하는 require.js 파일을 다운 받는 것이다.

requirejs.org

 좌측의 Download를 클릭하면 아래와 같이 minimum 파일 혹은 comment를 곁들인 파일을 다운로드 할 수 있다.

Download 페이지

 

2. 스크립트 추가

RequireJS를 이용해 모듈을 관리하고자 하는 페이지에 해당 스크립트 파일을 명시한다.

<srcipt data-main="" src="require.js 경로"></script>

 이 때, data-main은 RequireJS의 설정(configure) 파일의 경로를 지정하면 된다. RequireJS를 사용함에 있어서 가장 먼저 실행되어 RequireJS 설정을 해주고, RequireJS를 통해 관리하고자 하는 모듈들(.js)에 접근할 때는 이 경로를 가장 기본 경로로 인식하기 때문에 되도록이면 해당 설정 파일은 가장 바깥 경로(예를 들면 static/asset/js)에 빼주는 것이 좋다.

 RequireJS를 통해 모듈을 로드할 시 data-main 속성으로 지정한 모듈이 아니라 require문을 통해 로드시, 모듈이 로드되는 순서는 따로 정해져있지 않다. 모듈을 순차적으로 로드해야할 경우에는 require문을 중첩하여 사용할 수 있다.

cf. 아래의 경우에는 moduleName1이 로드된 후 moduleName2와 moduleName3가 로드되게 된다.

<script type="test/javascript">
	require(['moduleName1'], function(){
    	require(['moduleName2', 'moduleName3'], function(){
        });
    });
</script>

 

 

3. RequireJS 로드시 가장 먼저 로드될 파일 설정하기

 가장 기본이 되는 파일의 구조는 아래와 같다.

require.config(
	baseUrl:'js',
    paths:{
    	'moduleName1':'modulePath1',
        'moduleName2':'modulePath2'
        },
    shim:{
    	'moduleName3':{
        	deps:['dependencies1', 'dependencies'],
            exports:"moduleName3'
        }
);
        

 1) baseUrl : 가장 기본이 되는 js 파일의 url이다. data-main을 설정했다면 이것이 곧 baseUrl이 된다.

2) paths : baseUrl에서 바로 찾을 수 없는 파일들을 위한 각 파일의 위치를 명시할 수 있다. (AngularJS는 MV* 패턴을 통해 개발하므로, 대개의 프로젝트들과 마찬가지로 asset을 분리하여 저장한다. 때문에 js 파일은 일반적으로 asset/js 디렉토리 아래에 존재하게 된다.) 특이하게 context-path 바로 아래에 있는 경우가 아니라면 baseUrl에 대한 상대적인 경로를 적으면 된다. 이 때 '경로 + 파일명'으로 쓰되, 확장자(.js)는 쓰지 않는다. 예를 들어, 'asset/js/angularjs/1.8.2/angular.js'를 포함시킨다면 아래와 같이 표기할 수 있다.

'angular': 'angularjs/1.8.2/angular'

3) shim : AMD 형식을 지원하지 않는 모듈들을 정의한다. 

 - deps : 해당 모듈이 로드되기 전에 로드되어야 하는 모듈들을 정의한다. 즉, 의존성을 명시한다고 볼 수 있다.

 - exports : 로드된 모듈을 해당 객체로 사용한다는 의미이다. 

 

 추가적으로, 가장 먼저 로드되는 data-main 스크립트의 경우, 가장 먼저 로드된다는 점 때문에 가장 먼저 로드될 모듈들을 로드하는 코드를 포함하기도 한다.

 

4. define과 require

 define문 : 모듈을 정의할 수 있다. 아래의 형태로 주로 사용된다.

 define("id", [dependencies], callback-function(){...});

1) id : 모듈이 있는 파일 경로 혹은 파일명(생략 가능)

2) dependencies : 배열의 형태로 의존하는 모듈들을 명시한 것으로 항상 배열의 형태로 넘겨야 한다.

3) 콜백 함수 : 해당 모듈이 모두 로드되면 실행될 콜백 함수로, 로드한 모듈들을 객체로 넘겨받아 사용할 수 있다.

cf. AngulrJS를 사용하고 있지만, angular module로 만들지 않고 해당 파일을 사용하는 경우나, AngularJS를 사용하지 않는 상황에 특정 함수를 반환하고 싶은 경우에, 일반적으로 아래와 같이 함수를 반환해줄 수 있다.

definde([moduleName, ] [dependencies], function(){
	function myFunction1(){...}
    
    return myFunction1();
});

// 객체를 반환하는 모듈은 아래와 같이 가능한지?
definde([moduleName, ] [dependencies], function(){
	
    var var1 = {};
    
    var1.a='';
    var1.b='';
    var1.c='';
    
    return var1;
});

 

require문 : 외부 모듈을 가져올 수 있다. 

require([dependencies], callback-function(){...});

1) dependencies

2) 콜백 함수

cf. 의존 모듈이 없는 경우에는 굳이 명시하지 않아도 된다. 즉, 'require([], function(){});'와 같이 사용해도 된다.