UI5 리스트 그룹 실수 3가지 #shorts #SAP #UI5

이 글의 목표와 체크포인트 SAPUI5의 sap.m.List 에서 단순 정렬을 넘어 의미 있는 그룹으로 묶어 보여주는 작업은 실무에서 매우 자주 등장합니다. 이 글은 SalesOrder(판매 주문) 리스트를 SalesOrg(판매 조직) 단위로 그룹핑하는 시나리오를 통해, Sorter 의

라디오 버튼 vs 세그먼트 버튼 — UI5 선택 비교 #shorts #SAP #UI5

RadioButton의 한계와 SegmentedButton이 등장한 이유 SAPUI5/OpenUI5에서 "여러 선택지 중 하나"를 제시할 때 가장 먼저 떠오르는 컨트롤은 sap.m.RadioButton이지만, 모바일 우선(Mobile First) Fiori 환경에서는 sap.m.Segm

HBox vs VBox vs FlexBox 언제 쓸까? #shorts #SAP #UI5

HBox, VBox, FlexBox가 생긴 이유 SAPUI5에서 화면을 구성할 때 가장 먼저 마주치는 고민은 "컨트롤을 어떻게 배치할 것인가"입니다. 초창기 UI5는 sap.ui.layout 패키지의 Grid, VerticalLayout, HorizontalLayout 등을 사용했지만,

Toolbar vs Bar 차이 — UI5 레이아웃 제대로 #shorts #SAP #UI5

Toolbar와 Bar를 혼용할 때 생기는 문제 SAP Fiori 화면을 만들다 보면 상단 헤더에 제목과 검색 버튼, 하단 푸터에 저장/취소 버튼을 배치하는 일이 빈번합니다. 이때 많은 개발자가 sap.m.Bar 와 sap.m.Toolbar 를 거의 같은 컨트롤로 착각하고 아무 곳에나

오류 수집 직접 코딩? — UI5 MessageModel로 자동화 #shorts #SAP #UI5

1. 수동 오류 수집의 문제점 UI5 애플리케이션을 처음 작성할 때 가장 흔히 마주치는 안티 패턴은 컨트롤러마다 onError , onValidationError , onParseError 핸들러를 따로 두고 sap.m.MessageBox.error() 를 호출하는 방식입니다. 입력 필

전체 컬럼 금지 — $select 최적화 3가지 패턴 #shorts #SAP #UI5

OData 전체 컬럼 요청의 문제점 SAPUI5 애플리케이션을 운영하다 보면 "왜 이렇게 느리지?"라는 질문을 자주 듣게 됩니다. 네트워크 탭을 열어보면 답이 보이는 경우가 많습니다. 판매주문(SalesOrder) 목록을 단순히 ID, 고객명, 금액 세 컬럼만 화면에 표시하는데도 서버는

N+1 쿼리 금지 — OData $expand 3가지 패턴 #shorts #SAP #UI5

개요와 이 글에서 다루는 범위 SAP UI5 애플리케이션이 OData 서비스를 호출할 때, 마스터-디테일 화면에서 가장 자주 발생하는 성능 병목이 바로 N+1 쿼리 문제입니다. 판매 오더 목록을 가져온 뒤 각 오더의 고객 정보를 따로따로 조회하면 100건 목록에 101번의 HTTP 요청

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

OData 호출 90%가 낭비 — $batch 묶기 #shorts #SAP #UI5

개요 및 핵심 포인트 SAP Fiori/UI5 애플리케이션이 복잡해질수록 화면 하나에서 발생하는 OData 호출 수가 빠르게 늘어납니다. 주문 목록, 고객 정보, 배송 상태, 첨부 파일을 각각 별도의 HTTP 요청으로 보낸다면 네트워크 왕복 비용과 서버 세션 부담이 모두 누적됩니다. 이

Object Page 섹션 30초 만에 구성 #shorts #SAP #RAP

1. Object Page 레이아웃과 섹션의 역할 SAP Fiori Elements의 Object Page는 단일 비즈니스 엔티티(예: 판매주문 한 건, 거래처 한 곳)의 상세 정보를 표시하기 위한 표준 플로어플랜입니다. List Report에서 행을 클릭했을 때 펼쳐지는 그 페이지를

List Report 설정 90%가 놓치는 어노테이션 순서 #shorts #SAP #RAP

List Report가 어노테이션을 해석하는 방식 SAP Fiori Elements의 List Report는 CDS(또는 OData) 메타데이터에 선언된 @UI 어노테이션을 런타임에 해석해 UI를 자동 렌더링합니다. 개발자가 XML View를 직접 작성하지 않아도 컬럼, 필터바, 헤더

UI5 개발자 90%가 놓치는 EventBus 패턴 #shorts #SAP #UI5

왜 EventBus가 필요한가 대형 SAP Fiori 애플리케이션은 보통 여러 개의 Component로 쪼개져 있습니다. 주문 목록을 보여주는 컴포넌트, 주문 상세를 띄우는 컴포넌트, 사이드 알림 패널을 다루는 컴포넌트가 서로 다른 페이지·다른 라이프사이클을 가진 상태에서 "방금 사용자

ComboBox vs Select — 입력 가능 vs 선택만 #shorts #SAP #UI5

이 글이 답하는 질문 UI5 ComboBox와 Select, 언제 어느 걸 써야 하나? 사용자가 새 값을 입력해야 한다면? 결정적 차이 1가지 ComboBox — 입력 가능 ComboBox는 드롭다운 목록에서 선택할 수도 있고, 리스트에 없는 값을 직접 타이핑해서 입력할 수 있습니다.

destroy 안 부르면 큰일 — UI5 메모리 누수 #shorts #SAP #UI5

왜 destroy()가 필요한가 SAPUI5는 자체 ManagedObject 레지스트리로 모든 컨트롤을 추적합니다. 컨트롤을 DOM에서 제거하거나 부모에서 detach해도 이 레지스트리 참조는 그대로 남습니다. 이벤트 핸들러, 모델 바인딩, 프래그먼트 캐시까지 메모리에 계속 쌓입니다.

직접 참조 없이 — EventBus 2줄로 앱 연결 #shorts #SAP #UI5

컴포넌트 간 통신, 왜 까다로울까요? UI5 앱이 커지면 부모→자식 모델 바인딩만으로는 부족합니다. 형제 뷰나 독립된 컨트롤러 간 데이터 전달 시 직접 참조를 남발하면 의존성 지옥에 빠집니다. EventBus는 이 문제를 Publish/Subscribe 패턴으로 해결합니다. 발행(Pub

Object Page 실수 3가지 #shorts #SAP #Fiori

Object Page란? Fiori 상세 화면의 표준 패턴입니다. 구조는 Header Area 와 Content Area 로 나뉘고, Content Area는 Section → SubSection → Facet 계층을 따릅니다. 이 계층을 잘못 이해하면 레이아웃이 무너지거나 내용이 통째

Fiori 개발자 80%가 놓치는 ARIA 접근성 속성 #shorts #SAP #Fiori

Fiori에서 ARIA가 없으면 벌어지는 일 SAP Fiori 앱에 ARIA 속성을 빠뜨리면 스크린 리더 사용자는 버튼이 존재하는지조차 알 수 없습니다. 단순한 권고 사항이 아닙니다. 유럽 EAA(European Accessibility Act) 2025, 미국 Section 508 등

직접 호출 없이 — EventBus 30초 만에 컴포넌트 통신 #shorts #SAP #UI5

이 글이 답하는 질문 여러 Component로 쪼개진 UI5 앱에서, 서로를 직접 참조하지 않고 데이터를 주고받으려면 어떻게 해야 하나? EventBus의 channelId와 eventId는 어떤 단위로 설계해야 충돌 없이 운영할 수 있나? subscribe를 걸어 둔 뒤 뷰가 dest

formatter 없이 한 줄로 #shorts #SAP #UI5

Expression Binding이란? UI5의 Expression Binding은 XML View 안에서 JavaScript 표현식을 직접 실행할 수 있는 기능입니다. {= ... } 문법을 사용하며, 단순한 조건 처리나 문자열 조합을 위해 Controller에 formatter 함수