OpenUI5 스마트하게 배워보기
1.Tutorial 01. Hello world
프론트 개발을 하신 경험이 있으신 분들이라면, 프론트 엔드 삼대장 리엑트, 앵귤러, 뷰를 들어 보셨을 거라고 생각합니다. 물론, 프론트 엔드 라이브러리나 프레임워크는 다양하게 있지만, 이 3가지가 핫한 이유는 제가 생각하기엔 3가지 정도를 들수 있는 것 같습니다. 먼저
2.Tutorial 02. Life Cycle
모든 어플리케이션은 생명 주기가 존재합니다. 저는 예전에 유니티라는 게임엔진을 이용해서 게임개발을 했던 경험이 있습니다. 게임을 만들 때 중요하게 생각해야했던 부분 중 하나가 바로 생명주기였습니다. 리소스를 로드하고 보여줘야하는 함수가 있는가 한편, 비동기로 서버와 연
3.Tutorial 03. UI5 Views
이번 글은 링크 를 참고하여 제작되었습니다. UI5는 MVC 패턴을 사용하여 화면을 제어합니다. 그 중에 View는 UI(User Interface)와 직접적인 연관이 있는 만큼 굉장히 중요한 부분을 차지합니다. UI5에서는 기본적으로 버튼이나 입력 필드, 테이블,
4.Tutorial 04. Using HTML native Tag & Custom CSS
UI5를 보시면 기존에 웹을 공부하신분들이라면, 뷰 화면을 구성할때 태그가 html 표준 코드와는 다른 점을 알 수 있습니다. 사실 이는 UI5에서 표준으로 제공하는 일종의 부트스트랩 스타일이 포함된 뷰 요소를 제공하기 때문입니다. UI5에서제공하는 Label이나 Bu
5.Tutorial 05. Module
자바스크립트 프로그램은 꽤 작게 시작되었습니다. 초기에 사용된 대부분의 스크립트는 독립적인 작업을 수행하며, 일반적으로 큰 스크립트가 필요하지 않았습니다. 요즘 모던 자바스크립트에선 브라우저 제어로직이나 Node.js와 같은 브라우저 외의 영역에서도 사용가능합니다.따라
6.Tutorial 06. UI5 Model
UI5는 Model View Controller의 MVC 패턴을 사용합니다. MVC의 특징은 View는 화면단의 로직을 Model은 화면에 필요한 데이터를, 그리고 Controller는 View와 Model 두영역을 다루는 코드로 구성되어 있습니다. UI5에선 View
7.Tutorial 07. UI Elements
UI5는 다양한 UI Element를 제공합니다. SAPUI5는 Fiori라는 SAP 하이브리드 웹앱 플랫폼을 제작하기 위한 엔터프라이즈 라이브러리이기에 OPENUI5보다 많은 종류의 UI Elements를 제공합니다. 만약에, 상업적으로 UI5 어플리케이션을 만들어야
8.Tutorial 08. Routing
UI5는 웹페이지 간의 Navigation 기능을 제공합니다. 이것이 바로 Routing입니다. Tutorial 01을 보신 분이라면 UI5가 SPA(Single Page Application)이라는 것을 알고 계실 것입니다. SPA의 특징은 바로 화면을 구성하는 ht
9.Tutorial 09. Fragment
View를 만들면서 반복되는 UI control이 늘어나는 경우가 있습니다. React나 Vue를 예로 들면 이를 template이나 컴포넌트 형태로 View단을 나누어 효율적인 코드 유지보수를 가능하게 지원합니다. UI5에서도 이처럼 비슷한 기능을 제공하는데 바로,
10.Tutorial 10. Custom controls
UI5에서 주어지는 label 태그에는 다른 이벤트를 삽입할 수 없습니다. 하지만, 경우에 따라서는 이러한 것들을 자유롭게 사용하고 싶은 개발자의 니즈는 존재합니다. 반면, 반복되는 UI view를 일정 단위대로 묶고 하나의 컨트롤 단위로 묶어서 view단의 소스를
11.Tutorial 11. TodoList
여태까지 저희가 배운 것을 바탕으로 간단한 ui5 웹앱을 만드려고 합니다. 바로 TodoList 만들기 입니다. 대부분의 브라우저는 local storage를 제공합니다. local storage는 쿠키와 비슷하게 5MB 정도의 브라우저 내부 저장 공간에 데이터를 저장
12.Tutorial 12. Using OData
Odata는 UI5에서 데이터 부분을 다루는데 있어서 가장 중요한 부분입니다. 주로 Fiori단에서 웹 개발을 한다면, Odata는 절대적일 정도로 매우 많이 사용되는 프로토콜입니다. 일단 가볍게 Odata란 무엇인지 알아보겠습니다. 위키백과 에서 Odata의 정의를
13.Tutorial 13. i18n
i18n이란 Internationalization의 준말입니다. 이처럼 UI5는 글로벌 UI 솔루션 라이브러리 답게 각 언어 상황에 따라 메뉴의 컨텐츠를 동적으로 매핑해줍니다. 예를 들면, 한국의 유저는 i18n_kr 영어권 유저는 i18n_en 처럼 말이지요. i18
14.Tutorial 14. Custom formatter
UI5를 이용하면 데이터 모델의 속성 값에 따라서 바인딩을 바꿔주는 것이 가능합니다. 특정 status 값을 동적으로 List에서 보여주고 싶을 때 formatter는 효과적으로 이용됩니다. custom formatter를 만드는 방법은 먼저, Model 폴더에 for
15.Tutorial 15. Mock Server
Mock Server는 가짜 서버를 만들어서 마치 api가 있는 것처럼 사용할 수 있는 서버입니다. 이 기술은 사용가능한 OData 서비스가 없거나 개발 및 테스트를 위해 OData 백엔드 연결에 의존하고 싶지 않은 경우 이용할 수 있습니다. 즉, 프론트엔드 개발자와