Step 6: Modules

Step 설명

SAPUI5애서 resources는 종종 모듈을 가리키기도 합니다. 지난 step의 alert를 sap.m 라이브러리에 있는 Message Toast로 대체합니다. 필요한 모듈을 비동기식으로 로드할 수 있습니다.

Preview

Message Toast는 "Hello World" 메세지를 표시합니다.

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   // MessageToast 모듈 설정
   "sap/m/MessageToast"
   // MessageToast 모듈을 두번째 인자로 
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

필요한 모듈의 배열에 sap.m.MessageToast의 완전한 경로를 추가합니다. Controller와 MessageToast 모듈이 모두 로드 되면 콜백 함수가 호출되고 함수에 전달된 인자에 접근하여 두 객체를 사용할 수 있습니다.

이 비동기 모듈 정의(AMD) 구문은 코드 실행과 모듈 로딩을 명확하게 구분할 수 있게 해주고 Application의 성능을 크게 향샹시킵니다. 브라우저는 코드가 실행되기 전에 resources가 로드되는 시기와 방법을 결정할 수 있습니다.

Conventions

- 전역 네임스페이스를 정의하려면 Controller와 다른 Javascript 모듈에 sap.ui.define를 사용합니다. 네임스페이스를 사용하면 application 전체에서 객체를 호출할 수 있습니다.

- 네임스페이스 선언 없이 종속성을 비동기로 로딩하려면 sap.ui.require를 사용합니다. 예를 들어 코드가 단지 실행하기 위해 필요할 뿐 다른 코드로부터 호출될 필요가 없을 때

- 네임스페이스 없이 함수 인자의 이름을 지정할 때 로드할 artifact 이름을 사용합니다.

이번 Step을 포스팅하면서 Javascript와 시스템에 대한 이해가 '정말 부족하구나'하고 느꼈습니다ㅜㅜ 비동기 모듈 정의(AMD)를 사용할 때 Application 성능이 왜 향상되는지 브라우저는 어떻게 resources가 로드되는 시기와 방법을 결정할 수 있는지 의문은 들었지만 이해하지는 못했습니다. 또한 artifact가 뭔지 아직도 이해를 정확하게 못했습니다. (결과물 또는 사용흔적 정도로 이해) 이것들에 대해 정확히 아시는 분이 있으시면 댓글로 알려주시면 감사하겠습니다.

2018.12.21 추가

이 내용을 이해하려면 JavaScript의 모듈화 및 의존성 관리 방법에 대한 내용을 이해하고 있어야 합니다. 간단히 소개하자면 모듈화 및 의존성 관리 방법이 크게 두 가지가 있는데 commonJS와 AMD입니다. commonJS는 Back-End에서  AMD는 Frond-End에서 주로 사용됩니다. SAPUI5는 내부적으로 AMD의 requireJS를 사용해서 관리하고 있습니다. 더 자세한 내용은 참고 사이트에서 확인하시면 될 거 같습니다. Javascript도 공부할 양이 정말 만흔거 같습니다.

참고 사이트

- https://wckhg89.github.io/archivers/requirejs1

- https://github.com/nhnent/fe.javascript/wiki/%EC%9D%98%EC%A1%B4%EC%84%B1-%EA%B4%80%EB%A6%AC

이전 내용 - Step 5: Controllers

다음 내용 - Step 7: JSON Model