RequireJS 란? RequireJS를 알아보자

 

 

RequireJS

: AMD 기반 스크립트 로더

​

AMD ?

: 비동기적으로 스크립트를 로딩하기 위한 방법을 정의한 API를 의미한다.

​

사용 목적 ?

: 일반적으로 자바스크립트를 하나의 파일로 작성하는 경우가 많다. 그런데 코드가 점점 방대해지면 나중에 관리가 쉽지않다.

이를위해 기능이나 용도별로 여러 파일로 분할하는 선택을 하게 된다.

​

많은 뷰들이 존재하는 리치 웹 앱을 제작하는 경우라면 MVC 또는 MVVM패턴 적용과 RequireJS를 사용하는 것은 필요한 조건이다.

 

 

CND 방식

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

 

 

사용 예시

<sciprt>
  require(["http://code.jquery.com/jquery-1.10.1.min.js"]), function() {
    
  }
</script>
​

 

 

 

 

설정 옵션

RequireJS는 여러 옵션들을 제공한다. (대표적인것들은 아래)

<sciprt>
  // RequireJS 설정 객체
  // require.js가 로딩되면 이 객체를 자동으로 읽어 들여 반영한다.

  var require = {
    1) baseUrl: '' ,  // 모듈의 기본 위치를 지정 
 
    2) paths : {}     // 모듈의 단축 경로 지정 또는 이름에 대한 별칭을 지정 할수 있음.

    3) shim: {}       // AMD를 지원하지 않는 외부 라이브러리를 모듈로 사용할 수 있게 한다.

    4) urlArgs :      // 모듈 위치 URL뒤에 덧붙여질 쿼리를 설정, 
   };
</script>

 

 

 

 

 

모듈 위치

: RequireJS는 호출하는 모듈의 위치를 찾을때 baseURL과 이름을 결합하여 찾는다.

  baseUrl이 "/js"이고 모듈 이름이 "common/util"이라면 모듈의 위치는 "/js/common/util.js"가 된다.

​

<sciprt>
  var require = { baseUrl : '/js/apple'};
</sciprt>

<sciprt src="/js/lib/require.js"></script>
<script>
  require([
    'common/relative',        // (1)위치 : "/js/apple/common/relative.js"
    'dotjs.js'                // (2)위치 : "/dotjs.js"
], function (relative, dotjs, absolute, foo) [

]);
</script> 
(1)번 의 경우가 일반적인 사용

(2)번은 특별한 경우가 아니라면 사용할 일이 없다. 근데 알아만 두자.

 

 

 

 

참고 블로그

https://blog.naver.com/PostView.naver?blogId=dktmrorl&logNo=222247976056&parentCategoryNo=&categoryNo=44&viewDate=&isShowPopularPosts=false&from=postView