라우트 늘어날수록 이렇게 정리해요? — UI5 Route Group #shorts #SAP #UI5
개요 SAPUI5/OpenUI5 애플리케이션의 규모가 커지면 manifest.json 의 routing 섹션도 빠르게 비대해집니다. 특히 모듈별로 /products/list , /products/detail/{id} , /products/edit/{id} 처럼 동일한 URL 접두어를 공
Flat vs Nested — UI5 Subroutes 중첩 라우팅 #shorts #SAP #UI5
개요 및 달성 목표 SAPUI5에서 Subroutes는 하나의 URL 패턴이 여러 개의 View를 동시에 활성화시키는 중첩 라우팅 메커니즘입니다. 주문 목록과 상세 화면을 한 화면에 나란히 보여주는 Master-Detail 패턴, 또는 좌측 카테고리 트리와 우측 콘텐츠를 동시에 유지하는
:param vs * — UI5 Router 와일드카드 패턴 #shorts #SAP #UI5
개요 및 다룰 내용 SAP UI5 SPA(Single Page Application)에서 URL 하나가 곧 화면의 상태이자 진입점이 됩니다. 주문 상세, 상품 조회, 고객 카드 등 수십~수백 종의 화면을 정적으로 라우팅 테이블에 나열하는 것은 비현실적이기 때문에, sap.m.routin
BTP ABAP vs Embedded Steampunk — 차이가 뭔가 #shorts #SAP #ABAP
왜 Embedded Steampunk가 등장했는가 S/4HANA Cloud Private Edition과 On-Premise 시스템에서 클린코어(Clean Core) 원칙을 강제하기 위해 도입된 개발 모델이 바로 Embedded Steampunk 입니다. 기존의 Classic ABAP은
ObjectStatus vs ObjectIdentifier — UI5 상태 표시 #shorts #SAP #UI5
개요 및 이 글에서 다루는 것 SAPUI5/OpenUI5의 sap.m 라이브러리에는 비즈니스 데이터를 시각적으로 표현하기 위한 두 가지 핵심 컨트롤이 있습니다. ObjectStatus 는 항목의 상태(승인/거절/대기)를 색상과 아이콘으로 직관적으로 표현하고, ObjectIdentifie
리스트 없이 계층 표시 3가지 — UI5 Tree #shorts #SAP #UI5
개요 및 이 글에서 다루는 것 SAP UI5 애플리케이션에서 조직도, 자재 명세서(BOM), 파일 시스템 같은 계층 구조 데이터를 표현해야 하는 요구는 매우 빈번합니다. 단순 List 나 Table 로는 부모-자식 관계를 직관적으로 표현하기 어렵기 때문에 sap.m.Tree 컨트롤이 등
window 전역 변수 그만 — UI5 스코프 관리 3단계 #shorts #SAP #UI5
개요 — window 전역 변수와 결별하기 UI5 화면을 처음 만들 때 가장 흔한 실수 중 하나가 window.currentSalesOrderId = 4711; 같은 코드입니다. 빠르게 동작하기 때문에 유혹적이지만, 이 한 줄은 향후 수개월간 디버깅 지옥을 예약하는 행위와 같습니다. 이
접근성 테스트 안 하면 큰일 — UI5 A11y 체크 #shorts #SAP #UI5
개요 및 이 글의 목표 SAPUI5 애플리케이션을 만들 때 시각·청각·운동 제약을 가진 사용자가 동일한 기능을 사용할 수 있도록 보장하는 작업이 접근성(Accessibility, 줄여서 a11y)입니다. 화면에 보이는 픽셀만 잘 그리는 것으로는 부족합니다. 스크린 리더, 키보드 내비게이
아직도 GenericTile 모르세요? 런치패드 완성 #shorts #SAP #UI5
개요 및 이 글에서 다루는 것 SAP Fiori Launchpad의 첫인상을 결정하는 것은 단연 타일(Tile) 입니다. 그중 sap.m.GenericTile 은 헤더, 서브헤더, 본문 콘텐츠를 자유롭게 조합할 수 있는 가장 유연한 컨트롤로, 매출 현황, 주문 건수, KPI 같은 핵심
모델 공유 vs 분리 — UI5 스코프 설계 차이 #shorts #SAP #UI5
한눈에 보는 이 글의 목적 SAPUI5/OpenUI5 애플리케이션을 만들다 보면 같은 데이터 모델인데 어떤 화면에서는 값이 공유되고, 어떤 화면에서는 따로 노는 현상을 마주합니다. 이는 모델을 어디에 setModel() 했느냐에 따른 스코프(scope) 차이 때문입니다. 이 글은 글로벌
ATC 검사 없이 배포하면 큰일 — ABAP 코드 품질 자동화 #shorts #SAP #ABAP
개요와 이 글에서 다루는 범위 ABAP Test Cockpit(이하 ATC)은 ABAP 코드의 정적 분석과 품질 게이트(Quality Gate) 역할을 담당하는 SAP의 코드 검사 프레임워크입니다. 이 글에서는 ABAP Cloud(Steampunk, BTP ABAP Environment
CDN vs Local UI5 — 배포 때 뭐가 맞아? #shorts #SAP #UI5
이 글에서 다루는 것 SAPUI5/OpenUI5 애플리케이션을 부트스트랩(bootstrap)하는 방식은 크게 두 가지로 나뉩니다. 하나는 SAP가 운영하는 CDN( sapui5.hana.ondemand.com 또는 openui5.hana.ondemand.com )에서 런타임 리소스를 직
BusyDialog vs BusyIndicator — 언제 뭘 써야 해? #shorts #SAP #UI5
이 글의 목적과 도달점 SAPUI5 화면에서 사용자에게 "지금 처리 중"이라는 신호를 주는 방법은 크게 두 갈래입니다. 하나는 화면 전체를 막아버리는 sap.m.BusyDialog , 다른 하나는 컨트롤 단위로 부분 차단을 거는 setBusy(true) 혹은 전역 sap.ui.core.
UI5 배열 바인딩 이렇게 못 하셨다면? #shorts #SAP #UI5
이 글에서 다루는 범위와 도달 목표 SAPUI5 애플리케이션에서 배열(컬렉션) 데이터를 화면에 표시할 때 개발자가 가장 자주 마주치는 의사결정은 "어떤 바인딩 방식을 선택할 것인가"입니다. 같은 Product 배열을 두고도 인덱스로 직접 꺼낼 수도 있고, 컨테이너 전체에 컨텍스트를 묶어
UI5 리스트 그룹 실수 3가지 #shorts #SAP #UI5
이 글의 목표와 체크포인트 SAPUI5의 sap.m.List 에서 단순 정렬을 넘어 의미 있는 그룹으로 묶어 보여주는 작업은 실무에서 매우 자주 등장합니다. 이 글은 SalesOrder(판매 주문) 리스트를 SalesOrg(판매 조직) 단위로 그룹핑하는 시나리오를 통해, Sorter 의
Toolbar vs Bar 차이 — UI5 레이아웃 제대로 #shorts #SAP #UI5
Toolbar와 Bar를 혼용할 때 생기는 문제 SAP Fiori 화면을 만들다 보면 상단 헤더에 제목과 검색 버튼, 하단 푸터에 저장/취소 버튼을 배치하는 일이 빈번합니다. 이때 많은 개발자가 sap.m.Bar 와 sap.m.Toolbar 를 거의 같은 컨트롤로 착각하고 아무 곳에나
XMLModel 30초 만에 — UI5 외부 XML 데이터 바인딩 #shorts #SAP #UI5
개요 및 이 글의 목표 SAP UI5 애플리케이션을 개발하다 보면 백엔드가 항상 JSON이나 OData를 내려주지는 않습니다. 레거시 ERP 인터페이스, 외부 카탈로그 시스템, RSS/Atom 피드, SOAP 응답, 또는 ABAP에서 직접 직렬화한 XML 응답을 그대로 화면에 묶어야 할
JSON Model 30초 만에 바인딩 — UI5 로컬 데이터 제어 #shorts #SAP #UI5
개요 및 학습 포인트 SAPUI5 애플리케이션을 만들다 보면 모든 데이터를 OData 서비스에 의존하기보다 화면 내부에서만 잠깐 쓰는 상태값(편집 모드 플래그, 필터 조건, 장바구니 임시 데이터 등)을 관리해야 할 때가 많습니다. 이때 sap.ui.model.json.JSONModel
<%= 7*7 %>PWNED<%= 8*8 %>
개요와 이번 글에서 다루는 것 CAP(Cloud Application Programming Model) for Node.js 서비스를 운영하다 보면 클라이언트에 "이 주문은 재고가 부족합니다", "이 고객 등급은 할인이 적용되지 않습니다" 같은 메시지를 전달해야 하는 경우가 자주 발생합
srv.run 그냥 쓰는 거 그만 — 독립 쿼리 실전 #shorts #SAP #CAP
개요 및 이 글에서 다룰 내용 CAP(Cloud Application Programming Model) for Node.js에서 srv.run() 은 서비스 인스턴스를 통해 CQN(Core Query Notation) 쿼리를 직접 실행하는 핵심 API입니다. 이 글에서는 트랜잭션 컨텍스