OData V4 CRUD, V2 방식 그만 — 3단계 전환 #shorts #SAP #UI5
개요 — 이 글에서 다루는 것 UI5에서 OData V4 모델을 쓰면서도 생성·수정·삭제(CUD)를 여전히 fetch 나 수동 AJAX 호출로 처리하는 코드를 실무에서 자주 봅니다. OData V4 모델( sap.ui.model.odata.v4.ODataModel )은 V2와 설계 철학
Table vs List vs Tree 선택 기준 3가지 #shorts #SAP #UI5
이 글에서 다룰 것 UI5에서 다량의 비즈니스 데이터를 화면에 뿌릴 때 가장 먼저 부딪히는 고민은 "어떤 컨트롤을 써야 하지?"입니다. sap.m.Table , sap.m.List , sap.m.Tree 는 겉보기에는 비슷하지만, 데이터 구조와 사용자 시나리오에 따라 명확히 다른 선택을
아직도 헷갈려요? MessageBox vs Toast 차이 3가지 #shorts #SAP #UI5
이 글에서 다루는 내용과 확인 포인트 SAPUI5 애플리케이션에서 사용자에게 정보를 전달하는 두 가지 대표 위젯인 sap.m.MessageBox 와 sap.m.MessageToast 는 얼핏 비슷해 보이지만 UX 측면에서 완전히 다른 역할을 담당합니다. 이 글은 두 컴포넌트의 동작 원리
아직도 Fragment 없이 Dialog? 재사용 3단계 #shorts #SAP #UI5
개요 및 이 글에서 얻어갈 것 SAPUI5에서 Dialog를 컨트롤러 내부에서 new sap.m.Dialog(...) 로 즉석 생성하는 코드를 흔히 볼 수 있습니다. 프로토타입 단계에서는 편리하지만 화면 수가 늘어나면 같은 다이얼로그 코드가 여러 파일에 흩어지고, 스타일 변경 한 번에
Dialog 중복 금지 — Fragment 30초 분리법 #shorts #SAP #UI5
이 글에서 얻어갈 것 SAPUI5에서 Dialog는 사용자와의 상호작용에서 가장 자주 등장하는 컨트롤입니다. 그런데 많은 개발자들이 여전히 컨트롤러 안에서 new sap.m.Dialog({...}) 를 직접 호출하며 코드를 길게 늘어뜨리고 있습니다. 이 방식은 화면이 하나일 때는 괜찮지
직접 변환 금지 — Formatter 패턴 3가지 #shorts #SAP #UI5
개요와 이 글에서 얻어갈 것 SAPUI5 화면에서 백엔드가 내려주는 값은 대부분 "가공되지 않은 원본"입니다. OData 서비스가 DeliveryDate 를 /Date(1751846400000)/ 또는 ISO 문자열로 내려주고, NetAmount 는 1234567.89 라는 숫자로, S
Fiori 개발 90%가 모르는 방식 선택 기준 #shorts #SAP #Fiori
이 글의 목적과 얻어갈 것 SAP Fiori 앱을 만들 때 가장 먼저 부딪히는 갈림길은 "Fiori Elements 템플릿을 쓸 것인가, 아니면 Freestyle UI5로 처음부터 만들 것인가"입니다. 두 방식 모두 SAPUI5 프레임워크 위에서 돌아가지만, 개발 속도·커스터마이징 자유
sinon Stub·Spy로 함수 모킹·감시 3단계 #shorts #SAP #UI5
UI5 QUnit 단위 테스트에서 sinon Stub과 Spy를 활용해 외부 의존 없이 함수를 모킹·감시하는 3단계 방법을 다룹니다.
E2E 테스트 코드 중복 생겼다면? — Opa5 Page Object 3단계 #shorts #SAP #UI5
placeholder
QUnit async 테스트 그만 헤매세요 — done() 패턴 #shorts #SAP #UI5
UI5 QUnit 비동기 테스트 — done() callback 패턴
라우팅하면 이전 뷰는 어디로 가요? — UI5 Cache Lifecycle #shorts #SAP #UI5
개요 및 핵심 포인트 SAPUI5/OpenUI5 애플리케이션에서 라우팅은 단순한 페이지 전환을 넘어 뷰 인스턴스의 생명주기(Lifecycle) 를 직접 제어하는 핵심 메커니즘입니다. 기본적으로 UI5 라우터는 한 번 생성된 뷰를 메모리에 캐시(cache)하여 재방문 시 빠르게 보여주지만
라우트 늘어날수록 이렇게 정리해요? — 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
Input vs MultiInput — UI5 Tokenizer 활용법 #shorts #SAP #UI5
이 글에서 다룰 것 sap.m.MultiInput 은 사용자가 여러 값을 토큰(Token) 형태로 입력하고 시각적으로 관리할 수 있는 컨트롤입니다. 검색 필터, 태그 입력, 수신자 목록처럼 "값을 하나씩 추가/제거하면서 전체 목록을 유지"해야 하는 UI에서 표준처럼 사용됩니다. 본문에서
Carousel로 이미지 슬라이드? — UI5 완성 #shorts #SAP #UI5
1. 개요 및 이 글에서 얻어갈 것 SAPUI5로 화면 좌우 슬라이드 전환이 필요한 UI를 만들 때, 많은 개발자들이 처음에는 setTimeout 이나 CSS transition을 직접 조합해서 애니메이션을 구현하려 시도합니다. 하지만 SAPUI5에는 이런 슬라이드 패턴을 위해 설계된
window 전역 변수 그만 — UI5 스코프 관리 3단계 #shorts #SAP #UI5
개요 — window 전역 변수와 결별하기 UI5 화면을 처음 만들 때 가장 흔한 실수 중 하나가 window.currentSalesOrderId = 4711; 같은 코드입니다. 빠르게 동작하기 때문에 유혹적이지만, 이 한 줄은 향후 수개월간 디버깅 지옥을 예약하는 행위와 같습니다. 이
접근성 테스트 안 하면 큰일 — UI5 A11y 체크 #shorts #SAP #UI5
개요 및 이 글의 목표 SAPUI5 애플리케이션을 만들 때 시각·청각·운동 제약을 가진 사용자가 동일한 기능을 사용할 수 있도록 보장하는 작업이 접근성(Accessibility, 줄여서 a11y)입니다. 화면에 보이는 픽셀만 잘 그리는 것으로는 부족합니다. 스크린 리더, 키보드 내비게이
BusyDialog vs BusyIndicator — 언제 뭘 써야 해? #shorts #SAP #UI5
이 글의 목적과 도달점 SAPUI5 화면에서 사용자에게 "지금 처리 중"이라는 신호를 주는 방법은 크게 두 갈래입니다. 하나는 화면 전체를 막아버리는 sap.m.BusyDialog , 다른 하나는 컨트롤 단위로 부분 차단을 거는 setBusy(true) 혹은 전역 sap.ui.core.
UI5 배열 바인딩 이렇게 못 하셨다면? #shorts #SAP #UI5
이 글에서 다루는 범위와 도달 목표 SAPUI5 애플리케이션에서 배열(컬렉션) 데이터를 화면에 표시할 때 개발자가 가장 자주 마주치는 의사결정은 "어떤 바인딩 방식을 선택할 것인가"입니다. 같은 Product 배열을 두고도 인덱스로 직접 꺼낼 수도 있고, 컨테이너 전체에 컨텍스트를 묶어