전은성 Dev

homepage

Contact

Copyright © 2024 | Yankos
Contents

Home > Sap > sapui5 > SAP UI5 란

SAP UI5 란
Sap 2023-01-06 - -
SAP SAP-ui5 V2-Model

SAP UI5

SAP UI5 란

  • HTML5, CSS, JavaScript로 구성된 클라이언트 UI 기술이다.

  • SAP UI5로 개발된 앱들은 우리가 사용하는 장치의 브라우저 안에서 실행한다.

  • 사용자들이 앱을 액세스 할 때, 해당 서버로 애플리케이션을 브라우저에 로드하라는 요청을 전송, View는 SAP UI5에 관련된 라이브러리를 액세스한다. 모델은 또한 인스턴스화되고, 비즈니스데이터는 데이터베이스로부터 가져온다.

  • SAP UI5가 사용되는 환경에 따라, 라이브러리 또는 애플리케이션을 SAP NetWeaver Application Server 또는 SAP Business Technology Platform 등에 저장할 수 있으며, 비즈니스 데이터(예: SAP Gateway)를 통해 OData 모델을 사용하여 액세스할 수 있다.

  • 프레임워크의 아티팩트는 라이브러리라는 최상의 구조단위로 되어있으며, 라이브러리는 확장성 개념을 가진 아티팩트이다. 이들은 공통으로 사용되는 기본 라이브러리와 함께 미리 정의된다. 라이브러리는 타입들의 제어, 그리고 웹 어플리케이션에 의해 사용되도록 묶어놓았다. 동시에 미리 정의된 sap.m이라는 라이브러리와 나란히 쓰고 사용하기 쉽게 만들어 첫번째로 커스텀 ui 라이브러리로 취급된다.

  • UI element는 사용자 인터페이스가 기본으로 되어 있으며 속성, 이벤트, 메소드, 관계와 같은 엔티티들을 재사용하며 최고로 중요한 관계는 다른 UI 엘리먼트들을 트리 구조로의 방식으로 생성될 수 있게 집계한다.

  • 개발자가 보는 화면의 관점으로부터 제어 요소는 가장 중요한 아티팩트이다. 이것은 사용자 화면에 나타내는 모든 컨트롤을 제어하는 객체이며 이것은 각 트리구조의 루트로 사용될 수 있는 유저인터페이스 요소의 종류이다. 이 방식은, 특히 렌더링을 위한 엔트리 포인트을 제공한다. 이들은 루트로서 사용될 수 없는 트리구조의 비제어 요소들이다. 그러나 단지 몇몇 부분은 종속적으로 사용된다.

  • 데이터 타입들은 메타 모델 안의 첫번째 클래스로 정의된 엔티티들이다. 타입 시스템의 확장성과 라이브러리 교차타입을 재사용하도록 허락한다. sap.ui.core 라이브러리는 다른 라이브러리들에 사용될 수 있는 타입으로 미리 정의한다.

Bootstrapping

브라우저 실행되자마자 스크립트를 로드함으로 SAP UI5 실행이 자동으로 페이지에 실행한다. 단순한 SAP UI5 기본 설치를 사용하는 경우에 UI를 실행하기에 충분하다. 이외에도 세팅을 통해 너의 어플리케이션 테마나 라이브러리를 설정할 수 있다.

<script id="sap-ui-bootstrap" type="text/javascript"
	src="resources/sap-ui-core.js"
	data-sap-ui-theme="sap_belize" // 기본 테마 설정
	data-sap-ui-libs="sap.m" // 라이브러리 설정 
	data-sap-ui-compatVersion="edge">
 </script>

SAP UI5는 여러 부트스트랩을 제공하고 있다.

sap-ui-core.js : 기본 부트스트랩 파일이며, SAP에서 이 타입을 쓸 것을 추천한다. 이것은 이미 jquery 와 core library의 최소한의 요구를 이미 정의하고 있다. 파일 요구는 XHR 을 다양하게 로드된다.

Content Delivery Network (CDN) : CDN을 이용해서 다양한 라이브러리를 엑세스 할 수 있다.

sap-ui-core-nojQuery.js : SAP 제공 jquery가 아닌 다른 버전의 jquery를 실행할 때 사용한다.

sap/ui/core/library-preload.js : 미리 파싱해놓고 필요할 때 호출한다.

sap-ui-core-lean.js : jquery나 sap ui5 즉시 로드되고 다른 파일은 다이나믹하게 로드된다.

Components

SAPUI5 어플리케이션의 컴포넌트는 독립적이며, 부분 재 사용 가능하다.

SAP UI5는 어플리케이션이 동작하는 곳으로 부터 다른 위치의 컴포넌트 사용할 수 있다.

따라서 컴포넌트는 다른 팀과 협업적으로 사용할 수 있다.

캡슐화 지원으로 어플리케이션 구조와 코드를 더 쉽게 이해할 수 있다.

SAP UI5는 두 가지 컴포넌트 타입을 지원한다.

  1. Faceless components (class: sap.ui.core.Component)
    유저 인터페이스를 사용하지 않으며, UI 엘리먼트가 필요하지 않은 곳에서 코딩이 사용된다. faceless 컴포넌트들은 ComponentContainer에 추가할 수 없다.

  2. UI components
    Component들을 상속받으며 컴포넌트의 기술적인 렌더링을 추가한다. 유저인터페이스의 각각의 설정, 메타데이터에 따라 화면 영역이나 요소들을 나타낸다.
    sap.ui.core.UIComponent는 sap.ui.core를 상속받으며 기능요소들을 렌더링한다.

컴포넌트는 sap.ui.component란 팩토리를 통해 생성되고 불러온다.컴포넌트들은 에 지정된 디스크립터(manifest.json)를 통해 불러올 수 있다. SAP는 디스크립터를 통해 컴포넌트 파일들을 호출하는 것을 추천한다. 프로세스가 로딩 중에 최적화 되어 퍼포먼스를 증가시키기 때문이다. 디스크립터는 메타데이터 요소들을 포함하며 또한 의존성과 설정에 대한 구성을 표현한다. 컴포넌트의 필수와 옵션 리소스는 구성요소의 네임스페이스에 조직적이여야 된다.

디스크립터를 로딩한 후에 컴포넌트 팩토리는 의존된 라이브러리나 컴포넌트들을 평행화 한 후 로드할 수 있다.

Component 구조

컴포넌트는 유니크한 네임스페이스로 조직적이며, 컴포넌트의 네임스페이스가 컴포넌트 이름과 동일하다.

기본적으로 컴포넌트는 컴포넌트컨트롤러와 디스크립터로 구성한다. 컴포넌트컨트롤러는 필수지만, SAP 는 디스크립터도 또한 사용하길 추천한다.

디스크립터는 컴포넌트 메타데이터를 포함하며, 또한 컴포넌트의 의존성, 설정을 나타낸다. 컴포넌트의 모든 구성요소들은 Component.js와 manifest.json이 나타낸다.

SAP UI5에서의 다른 개념

  • 복합 제어
    두 개념은 싱글 인터페이스 뒤에서 제어하는 걸 제공한다. 복합 제어는 컨트롤러 내에서 재사용을 목적으로 하며, 컴포넌트는 응용프로그램 개발을 재사용으로 하며 복합제어는 기존 제어를 포함한다.

  • UI 라이브러리
    컨트롤 주위에 배포 가능한 단위이다. 컨트롤은 전혀 독립적이지 않고 제어 라이브러리의 부분으로서 배포된다. 그러나 컴포넌트는 자체 포함되므로, 컨트롤들을 배포하는데 사용하면 안된다.

  • MVC
    MVC 개념은 뷰, 컨트롤러를 정의해 부품을 구조화하여 재사용되게 허락한다. MVC는 따로따로 배포되며, 스타일과 스크립트의 정의하는 것에 의미가 없기에 이 컨셉은 다른 어플리케이션에서의 사용을 제한한다.

MVC

SAP UI5 에서 model, View, Controller개념은 표현을 구분하며 사용자와 상호작용을 하기 위해 사용된다. 이 구분은 개발과 부분 독립적 변화에 용이하다.

  • view는 UI에 렌더링하는 일을 담당한다.
  • model은 어플리케이션 데이터를 관리한다.
  • controller는 view와 model에 대한 이벤트에 반응하고 변화를 상호작용한다.

UI에 안에 데이터를 바인딩 하는 목적은 사용자 인터페이스, 어플리케이션에 의한 데이터 노출, 데이터 프로세스에 의한 비즈니스 로직 코드에 대한 정의를 분리하기 위해서다. 분리를 통해서 가독성, 유지보수성, 확장성을 제공한다. 그리고 비즈니스 로직을 건들지 않고 view를 바꾸며 동일 데이터에 대해 여러 view를 분리한다.

View와 Controller는 1:1 매핑관계이다. 그러나 이것은 컨트롤러 단에서는 관계를 유지하지 않아도 된다. 이러한 컨트롤러는 어플리케이션 컨트롤러이다. 기술적 관점에서는 SAPUI5 모델을 제어하거나 상속할 수가 있다.

View와 Controller는 재사용이 가능하며 지원이 매우 좋다.

프로세스 초기화

  1. SAP 안에 있는 JQuery 플러그인은 모듈화 개념, 로깅 프레임워크, 성능 측과 같은 기능을 제공한다.

  2. global 오브젝트인 sap가 정의된다.

  3. sap.ui.core.Core 클래스가 모든 의존성들과 함께 실행된다.

  4. 실행 설정이 다른 소스로부터 결정된다.

  5. 모든 라이브러리와 모듈 설정은 그들의 의존성들과 함께 호출된다.

  6. 테마설정으로 로드된 각각의 라이브러리와 css 파일이 설정된 테마를 로드한다.

  7. 모든 라이브러리와 문서가 로드되어 기다릴 때, core에 있는 initEvent 함수가 실행되며 모든 등록된 헨들러들이 실행된다.

초기화 준비

이를 통해 프레임 워크를 초기화 하며 3가지 방법으로 연결할 수 있다.

  1. ComponentSupport 모듈
    sap.ui.core.CommponentSupport를 사용하는 것이다. 프레임 워크를 초기화 한 후에 코드를 실행하는 것이다.
    ComponentSupport를 통해 UIComponent를 선택하여 실행하는 방법이다.

ComponentSupport를 사용하면 필요한 ComponentContainer를 생성하여 하나 이상의 UIComponent를 정의하는 걸 허락한다.

  1. Standalone data-sap-ui-oninit 모듈
    모듈 외에 ComponentSupport 사용은, script 요소의 부트스트랩에서 init을 부를수 있는 데이터 요소로 정의할 수 있다.

oninit 모듈은 프레임워크의 프로세스가 초기화될 때의 타이밍에 로드되고 실행한다. 그 다음 우리는 모듈 안에서 추가적으로 어플리케이션을 실행할 수 있다. ( ex. 새로운 xml View 인스턴스 생성)

추가적으로 전용 init 모듈은 추가 <script> 인라인 태그가 필요하지 않으므로 요구사항에 따라 SAP 사이트에 게시된 CSP(Content Security Policy)를 반영할 수 있다.

attachInit 함수

attachInit 함수는 프레임워크가 초기화 된 후 바로 실행할 함수이다. 이 코드는 스크립트 인라인 태그를 나타내는 main HTML 파일안에 쓰여질 수 있다.

부트스트래핑중 추가 리스소 로딩

/<context-path>/resources/<library-name>/library.js

sap.ui.getCore().initLibrary 메서드를 호출하여 빌드 중 파일이 자동생성되게한다.

` //resources//themes//library.css`

css 또한 이 경로를 통해 실행한다.

라이브러리 동적 로드

sap.ui.getCore().loadLibrary() 메서드를 통해 런타임에 라이브러리를 로드한다.

이렇게 동적으로 라이브러리를 추가했을 땐, document.ready 이벤트 후에 엑세스가 가능하다.

SAP UI5 구성도

manifest.json

sap에선 이 파일을 app 세팅 설정이나 app이 실행되기에 필요한 중요 정보를 모아놓으라고 추천한다.
이러한 접근을 사용하는 것은 어플리케이션 코드를 작성하기 필요한 셋팅을 미리 준비하거나, manifest.json에 미리 인스턴스화하여 앱 실행 전에 미리 정보를 엑세스 할 수 있다.

몇몇 속성은 각각 SAPUI5 버전에 필요 정보의 목적이며, 외부 구성요소와 어플리케이션을 정확하게 통합하지만, 대부분의 속성들은 실제로 최소한의 UI5 version에 필요하도록 설정이 사용된다.

Root View (App.view.xml)

App.view.xml는 app에서의 root view를 정의한다. 대부분의 경우 App Control 또는 root control로서의 SplitApp control에 포함한다.

SAP UI5는 다양한 뷰타입들을 지원한다. 컨트롤러 파일 안에 정의된 View로부터 컨트롤러 로직을 작동하기 위해 SAP에선 XML을 추천한다. ex) App.controller.js

Component.js

Component.js 파일은 앱 설정을 위한 파일이며 컴포넌트가 인스턴스화 되었을 때 SAPUI5에서 자동으로 init 함수가 실행된다.
(우리가 생성하는 Component는 UIComponent에 상속되어있으며, 만약 init을 오버라이딩 하겠다면, 너는 라우터의 초기화와 UIComponent의 init 함수가 확실히 불려져야 한다.)

컴포넌트의 metadata 섹션에서는, 디스크립터 참조를 정의하며, 컴포넌트가 인스턴스화 되었을 때, 이 디스크립터는 자동으로 로드된다.

HTML Page

App for FLP

모든 앱은 SAP UI5 그리고 그 요소를 사용하는 HTML 페이지로 시작된다. 그리고 이는 FLP 와 standalone app 라는 2가지 옵션이 있다.

FLP는 디스크립터 파일에서 주어진 정보를 기반으로 요소들을 인스턴스화한다. FLP는 같은 시간에 여러 앱들을 포함하며, 각각의 앱들은 각자의 테마와 지원장치들을 각각 로컬 셋팅으로 정의할 수 있다.

Standalone app

standalone을 실행하길 원하면 component.index.html을 인스턴스한 파일을 생성하는 것이 필요하다.

순서

SAP UI5 Tutorial 참조 사이트 (hello world 호출 까지의 과정))

ui5 serve 명령어를 실행하면 제일 먼저 index.html 파일을 로드한다.

1. index.html

(html content ...)
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{"sap.ui.demo.walkthrough": "./"}'
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
</script>
(html contents ...)
<body  class="sapUiBody"  id="content">
(html contents ...)

index.html에 설정 해 놓은 <script> 태그 내 실행, 속성 값

  • src : SAP UI5 에서 지원하는 CDN 경로 호출
  • theme : ui에 사용할 테마 설정
  • libs : 기본으로 사용할 라이브러리 설정
  • compatVersion : 호환성 정의
  • async : 비동기 설정 유무
  • resource-root : 네임스페이스 경로 alias 설정
  • oninit : 첫 시작 모듈 설정
data-sap-ui-resourceroots='{"sap.ui.demo.walkthrough": "./"}'
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index

sap/ui/demo/walkthrough 경로를 ./ 로 설정하였고,
oninit 속성에 따라 페이지 실행 시 현재 파일 경로에 있는 index.js 파일을 실행한다.

2. index.js

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], function(XMLView) {
	'use strict';
	XMLView.create({
		viewName:  "sap.ui.demo.walkthrough.view.App"
	}).then(function(oView) {
		oView.placeAt("content");
	});
	});
);

sap.ui.define을 통해 호출 시, 정의할 내용을 입력한다.
sap/ui/core/mvc/XMLView는 core.js에서 지원하는 XMLView 타입을 선언하고
함수를 통해 XMLView를 생성하게 한다.
create 함수로 viewName 을 정의하며 sap.ui.demo.walkthrough.view.App 경로에 정의한 App 이란 이름의 빈 xml을 생성한다.

3. App.View.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Button
		text="click"
		press=".onShowHello"/>
</mvc:View>

View와 Controller는 1:1 매핑이므로 controllerName으로 App.controller.js를 매핑하며
App.view.xml이 페이지에 로드되었을 때 App.controller.js 가 인스턴스화된다.

4. App.Controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	.
	. 정의 타입들
	.
], function ( 정의 타입들) {
	"use strict"; // 코드 검사를 강화시켜 스크립트 오류 방지
	return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
		onInit : function () {
		... Controller 호출 시 실행될 코드
		},
		onShowHello :  function () {
		MessageToast.show("Hello World");
		}
	});
});

Controller에서도 각종 sap 지원 기능 태그들을 정의해주며
함수를 통해 Controller.extend 를 호출하면서 각종 XML 출력에 필요한 로직들을 진행한다.

생각

잠깐 동안 UI5 만졌을 땐, 현 웹에서 사용하는 구조와 크게과 다르지 않았으며, 눈에띄는 차이는 view에서 xml을 호출할 때 Controller를 인스턴스화 하는 방식에 조금 신기했었다. hello world 출력을 기반으로 아직은 장단점에 대해 크게 파악하기 어려웠다,
제가 생각하는 장점에선 SAP UI5가 고퀄리티 프레임워크라 느꼈던 것이 각 하나하나의 View의 태그 생성하는 과정에 대해 디테일한 설정을 가져갈 수 있다는 것과 프론트 단 부분을 sap.m 같은 라이브러리를 통해 대부분 구성해 놓은 것을 사용할 수 있다는 점에서 UI5를 만들 때 신경을 많이 두었다는 느낌이 들었다.
또한 설정에 대한 내용을 디스크립터에 넣는 방식으로 일일히 설정에 대해 파고 들어갈 이유가 없었던 것도 좋은 방식이라 생각한다.

허나 sap로 만든 사이트중 하나를 들어가 봤는데 페이지 로딩 속도가 느렸다. 제가 생각하는 이유는 UI5도 하나의 프레임워크 방식이기에 페이지 로딩 방식이 고정되어 있어, javascript의 DOM을 BOM을 받아 파싱해서 쉽고 빠르게 화면에 뿌려주는 것을 생각하면 템플릿에 맞춰야 하는 상황이 느릴 수도 있다 생각한다. 또한 View 타입의 형태에 맞춰 Controller를 진행하는 과정이 끝날 때까지 기다려서 출력하는 구조라고 생각한다. 그렇기 에 때문에 대표님께서 말씀하신 NextJs 같이 SSR을 통해 템플릿을 프리로딩하고 이후 CSR을 진행하는 방식을 접했을 때 어느 정도까지의 퍼포먼스를 보여줄 수 있을 지 궁금하다.