UI5 시니어 면접 실수 5가지 #shorts #SAP #QnA

시니어 UI5 면접은 무엇이 다른가

주니어 UI5 면접이 API 사용법과 기본 패턴을 묻는다면, 시니어 면접은 성능, 아키텍처, 트레이드오프를 묻습니다. 경험이 많은 개발자도 시니어 면접에서 자주 실수하는 5가지 패턴을 정리합니다.

실수 1: 메모리 누수를 인지하지 못함

시니어 면접에서 "UI5 앱에서 메모리 누수가 발생하는 상황은?"이라고 물으면, 이벤트 리스너와 destroy를 언급하지 못하는 경우가 많습니다.

// 잘못된 패턴: 컨트롤 동적 생성 후 미제거
onShowDialog: function() {
  // 매번 새 Dialog 생성 — 닫아도 메모리에 남음
  const oDialog = new Dialog({ title: "상세 정보" });
  oDialog.open();
  // destroy 없음 → 메모리 누수
},

// 올바른 패턴: 싱글톤 + destroy
onShowDialog: function() {
  if (!this._oDialog) {
    this._oDialog = new Dialog({ title: "상세 정보" });
    this.getView().addDependent(this._oDialog);
  }
  this._oDialog.open();
},

onExit: function() {
  if (this._oDialog) {
    this._oDialog.destroy();
    this._oDialog = null;
  }
}

addDependent()로 뷰에 등록하면 뷰가 destroy될 때 Dialog도 함께 정리됩니다.

실수 2: 바인딩 컨텍스트를 깊이 이해하지 못함

// 시니어가 설명해야 하는 바인딩 컨텍스트
// List 아이템 클릭 시 현재 행 데이터 접근
onItemPress: function(oEvent) {
  const oItem = oEvent.getSource();

  // 상대 경로 바인딩 컨텍스트 (현재 행)
  const oCtx = oItem.getBindingContext();
  const sOrderId = oCtx.getProperty("orderId");
  const nAmount = oCtx.getProperty("amount");

  // 모델 전체 경로로도 접근 가능
  const oModel = this.getView().getModel();
  const sPath = oCtx.getPath(); // "/orderList/0"
  const oFullData = oModel.getProperty(sPath);
}

실수 3: ODataModel v2 vs v4 차이를 모름

"프로젝트에 OData V4를 왜 선택했나요?"라는 질문에 단순히 "최신 버전이라서"라고 답하면 감점입니다.

// V2: 기존 ABAP OData 서비스와 호환성 우선
const oModelV2 = new sap.ui.model.odata.v2.ODataModel(
  "/sap/opu/odata/sap/ZGW_ORDERS_SRV/"
);

// V4: $batch 자동 최적화, 서버 사이드 기능 풍부
const oModelV4 = new sap.ui.model.odata.v4.ODataModel({
  serviceUrl: "/sap/opu/odata4/sap/zorders/",
  synchronizationMode: "None",
  autoExpandSelect: true  // $select, $expand 자동 생성
});

V4는 자동 $batch, Streaming, Server-Driven Paging을 지원하지만, ABAP 기존 OData 서비스 대부분은 V2입니다. 선택 기준은 백엔드 서비스 버전과 팀 역량입니다.

실수 4: 성능 최적화 경험 부재

// 대규모 리스트 성능: Growing + Threshold 설정
<List growing="true"
      growingThreshold="50"
      growingScrollToLoad="true"
      items="{/largeDataSet}">
  ...
</List>

// 모델 레벨 최적화: useBatch true (V2 기본값)
const oModel = new ODataModel(sServiceUrl, {
  useBatch: true,       // 여러 요청을 $batch로 묶음
  refreshAfterChange: false  // 변경 후 자동 리프레시 비활성화
});

실수 5: Extension Point와 컴포넌트 재사용 설명 불가

// Fiori Elements Extension Point 활용
// manifest.json
{
  "extends": {
    "component": "sap.suite.ui.generic.template.ListReport"
  },
  "customizing": {
    "sap.ui.controllerExtensions": {
      "sap.suite.ui.generic.template.ListReport.view.ListReport": {
        "controllerName": "com.myapp.ext.ListReportExtension"
      }
    }
  }
}

시니어 레벨에서는 Fiori Elements 커스터마이징, Extension Points, Fragment 재사용 전략을 설명할 수 있어야 합니다.

시니어 면접 준비 전략

성능 이슈를 실제로 경험하고 해결한 사례 준비
메모리 누수, 바인딩 컨텍스트, OData 버전 차이는 코드로 설명
Fiori Launchpad 통합, 권한 처리, 다국어 지원 경험 언급
SAP BTP와 UI5의 연동(CAP + UI5) 아키텍처 설명 가능하면 가산점

공식 문서

UI5 성능 최적화 가이드는 ui5.sap.com Performance Guide에서 확인하세요.

댓글 0