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 함수
아직도 행마다 클릭? Fiori 일괄수정 3단계 #shorts #SAP #Fiori
이 글이 답하는 질문 Fiori List Report에서 여러 행을 한 번에 수정하려면? Mass Edit Dialog를 열 때 입력 필드가 비어 있는 이유는? OData $batch 요청을 올바르게 묶는 방법은? 직접 해보기 1. Table MultiSelect 활성화 <!--
Fiori 필수 표시 실수 3가지 #shorts #SAP #Fiori
Fiori 필수 입력 표시란? 사용자가 반드시 입력해야 하는 폼 필드에 빨간 별표(*)를 표시하는 기능입니다. UI5에서는 Label 의 required 속성 하나로 즉시 적용할 수 있어 별도 CSS 작업이 필요 없습니다. Label에 required 적용 가장 기본적인 방법입니다. L
Fiori 필수 별표 — required 금지, 90% 실수 원인 #shorts #SAP #Fiori
이 글이 답하는 질문 Fiori 폼에서 필수 입력 별표(*)는 어떻게 표시하나? Label required 속성만으로 충분한가, 아니면 Input도 건드려야 하나? 저장 버튼 클릭 시 빈 필수 필드를 어떻게 잡나? 직접 해보기 1. XML View — required 한 줄 추가 <
백엔드 없이 UI5 개발 — Mock Server 실수 4가지 #shorts #SAP #UI5
이 글이 답하는 질문 백엔드 없이 UI5 앱을 어떻게 실행할 수 있나? Mock Server를 어디에, 어떻게 붙이나? 왜 내 Mock 데이터가 화면에 안 보이지? 직접 해보기 1. 디렉토리 구조 만들기 webapp/ localService/ mockdata/ Products.json
Fiori 필수 표시 — 90%가 Label required 빼먹는다 #shorts #SAP #Fiori
이 글이 답하는 질문 Input에 required=true 줬는데 왜 별표(*)가 안 보일까? Label과 Input 중 어디에 required를 걸어야 할까? SmartForm에서는 왜 required를 직접 안 써도 될까? Fiori 필수 표시 실수 3가지 1. Input에만 req
Fiori Elements vs Freestyle — 어떤 걸 골라야? #shorts #SAP #UI5
Fiori Elements vs Freestyle SAP UI5 개발에서 가장 먼저 결정해야 할 것은 Fiori Elements를 쓸지, Freestyle UI5를 쓸지입니다. 선택에 따라 개발 방식이 완전히 달라집니다. Fiori Elements OData 어노테이션 기반으로 UI를
Mock Server 30초 — JSON이 OData 서버로 #shorts #SAP #UI5
이 글이 답하는 질문 백엔드 없이 UI5 앱을 개발하고 싶다면? MockServer.simulate()이 실제로 어떻게 동작하나? 직접 해보기 1. MockServer 초기화 // webapp/localService/mockserver.js sap.ui.define([ "sap/ui/c
ProgressIndicator 90%가 state 고정 — 포매터로 해결 #shorts #SAP #UI5
ProgressIndicator란? SAP UI5의 sap.m.ProgressIndicator 는 작업 진행률을 % 로 시각화하는 컨트롤입니다. 파일 업로드, 온보딩 단계, 예산 소진율처럼 수치로 표현 가능한 상태에 바로 사용할 수 있습니다. XML 선언 — 3줄이면 충분 <Pro
백엔드 없이 OData? — Mock Server 3단계 설정 #shorts #SAP #UI5
이 글이 답하는 질문 백엔드 API가 없는 상황에서도 UI5 앱을 실행할 수 있나? Mock Server는 어떻게 설정하고 OData를 어디서 흉내 내나? 운영 배포 코드에 Mock이 섞이지 않게 하려면? 직접 해보기 1. 디렉토리 구조 잡기 webapp/ localService/ me
OData V2 vs V4 — 성능 차이 #shorts #SAP #UI5
이 글이 답하는 질문 UI5에서 V2 모델과 V4 모델, 코드가 얼마나 다른가? V2 앱을 V4로 바꿀 때 뭐가 달라지나? 언제 V4로 넘어가야 하나? 핵심 차이 한눈에 V2 V4 모델 클래스 odata.v2.ODataModel odata.v4.ODataModel CRUD model.c
View XML 없이 — 어노테이션 3가지 #shorts #SAP #Fiori
어노테이션 기반 Fiori UI란? SAP Fiori의 Annotation Driven UI 는 별도 View XML 없이 OData 메타데이터 어노테이션 한 줄로 리스트·폼·필터를 자동 렌더링합니다. Fiori Elements가 메타데이터를 해석해 UI를 생성하므로 반복 코딩이 사라집
Dialog 매번 새로 만든다면? — Fragment 재사용 패턴 #shorts #SAP #UI5
Fragment란 무엇인가 UI5에서 Fragment 는 자체 Controller를 갖지 않는 순수 UI 조각입니다. View와 동일한 XML 문법을 사용하지만, 독립적인 컨트롤러가 없기 때문에 호출하는 View의 Controller에 이벤트 핸들러를 위임합니다. Dialog, Popo
Dialog vs MessageBox — 언제 어느 걸 쓰나 #shorts #SAP #UI5
MessageBox — 확인·알림에 쓴다 단순 확인, 경고, 에러 팝업처럼 버튼 1~2개만 쓰는 경우엔 MessageBox 가 적합합니다. 한 줄로 끝납니다. MessageBox.confirm("저장할까요?", { onClose: (sAction) => { if (sAction ===
Push vs Replace — 히스토리 남기지 말 것 #shorts #SAP #UI5
navTo는 기본으로 히스토리를 쌓는다 UI5 라우팅에서 navTo() 를 호출하면 기본적으로 브라우저 히스토리에 새 항목을 push 합니다. 뒤로 가기 버튼을 누르면 이전 화면으로 돌아갈 수 있습니다. // 기본값 — push 모드 this.getRouter().navTo("detai