피오리 앱 개발시 js 파일에서 사용되는 define, require 등 SAPUI5 Require js에 대해 알아보도록 하겠습니다.
처음 SAPUI5를 스캐폴딩 후, js 파일들을 열어보게 되면 다음과 같이 sap.ui.define 구문으로 시작하는 js 파일을 아주 많이 보게 됩니다.
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"projecttest/model/models"
],
function (UIComponent, Device, models) {
"use strict";
...
...
}
);
define 함수에 배열 형태의 파라메터, 그리고 해당 파라메터를 변수로 사용하는 함수를 넣게 됩니다. 각 모듈간에 의존성 관리를 위해 이와 같은 형태로 정의하게 됩니다.
requireJS 란
자바스크립트 형태의 개발은 웹 사이트의 규모가 커지면 커질 수록 소스 관리 및 배포에 들어가는 노력이 커지는 경향이 있습니다. 또한 오래된 소스의 의존성 파악 및 종속성 관리 또한 어렵게 됩니다.
의존성의 의미는 다음의 예제와 같습니다.
// 첫번째 js파일.js
let showName = function (name) {
console.log("My name is " + name);
};
//두번째 js파일.js
let inputName = '';
showName ( inputName );
// 위의 자바스크립트 코드 두개를 가져다 쓰는 HTML 파일
<script src='첫번째 js파일.js'/>
<script src='두번째 js파일.js'/>
// showName 은 정상적으로 출력됨, 첫번째 js 파일에 정상적으로 function이 먼저 선언되었으므로
// 뒤 JS 파일의 호출 순서를 바꾸게 되면
<script src='두번째 js파일.js'/>
<script src='첫번째 js파일.js'/>
// ShowName은 찾을 수 없다는 오류가 발생, 두번째 js 파일이 실행이 먼저되므로 function을 찾을 수 없음
따라서, 위의 경우 두번째 js 파일의 경우 반드시 첫번째 js 파일이 먼저 로딩이 된 후 실행이 되어야 합니다. 이러한 케이스가 의존성이며, 이를 관리할 필요성이 있게 됩니다.
하지만 이를 해결하기 위한 방법으로 RequireJS라는 라이브러리를 통해 종속성을 관리합니다. SAPUI5 역시 RequireJS 의 개념을 사용하고 있습니다.
다시 위의 코드를 보게 되면,
sapui5 에서는 디펜던시(dependency)가 있는 함수 정의를 다음과 같이 합니다.
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"projecttest/model/models"
],
function (UIComponent, Device, models) {
"use strict";
...
...
}
);
먼저, 첫번째 인자는 배열 []로써 디펜던시의 이름이 정의됩니다. sap/ui/core/UIComponent, sap/ui/Device, projecttest/model/models 가 배열 형태로 들어가게 됩니다. 그리고 두번째 인자로는 함수 정의인데, 함수의 파라메터로는 디펜던시로 정의된 UIComponent, Device, models 가 순서대로 들어가게 됩니다.
그리고 모든 디펜던시가 로딩되었을 때 모듈에 대한 define을 호출할 것입니다.
즉, 함수는 sap/ui/core/UIComponent, sap/ui/Device, projecttest/model/models 이렇게 3개의 모듈이 로딩이 완료될 때까지 호출되지 않습니다. 각 모듈은 비동기 방식(병렬)으로 로딩되게 됩니다. 그리고 이 함수는 UIComponent, Device, models을 파라메터로 받게 됩니다. 또, 파라메터의 순서는 모듈 정의의 순서와 일치해야 합니다.
그러면 해당 함수에서 파라메터를 이용하여 해당 디펜던시 모듈에 접근하여 사용할 수 있습니다.
새로운 모듈을 선언할 때에는 define을 사용하며, define으로 선언된 function은 해당 js를 호출하였을때 실행할 코드와 return 될 객체를 생성합니다.
그리고 define으로 선언된 모듈을 만들지 않고 가져다 쓰는 경우에는 require를 사용합니다.
즉, 기존 모듈을 가져와서 내 어플리케이션에 더 로직을 추가하여 다른 곳에도 사용할 수 있게 모듈을 만들고 싶으면 define, 그냥 기존 모듈을 가져와서 쓰기만 하고자 한다면 require를 사용하면 됩니다.
RequireJS의 상세한 내용은 공식 홈페이지에서 확인이 가능합니다.
Rerquire js 홈페이지 : https://requirejs.org/
상세한 require 및 define 에 대해서는 sapui5 이 문서를 확인해 보시기 바랍니다.