UI5 면접 암기 없이 통과? #shorts #SAP #QnA

UI5 면접에서 실제로 무엇을 물어보는가

SAP UI5 개발자 면접은 단순 암기로는 통과하기 어렵습니다. 실무에서 자주 마주치는 문제 상황을 코드로 해결할 수 있는지를 검증합니다. 이 글에서는 자주 나오는 질문 유형과, 암기 대신 원리를 이해해서 답변하는 방법을 다룹니다.

질문 유형 1: MVC 패턴과 데이터 바인딩

면접관이 자주 묻는 질문: "UI5에서 MVC란 무엇이고, 데이터 바인딩은 어떻게 동작하나요?"

암기식 답변 대신 코드로 설명하는 방법:

// Model (JSONModel)
const oModel = new sap.ui.model.json.JSONModel({
  orderList: [
    { orderId: "SO-001", amount: 5000, status: "Open" },
    { orderId: "SO-002", amount: 3200, status: "Closed" }
  ],
  totalOrders: 2
});
this.getView().setModel(oModel);

// View에서 바인딩
// <Text text="{/totalOrders}" />
// <List items="{/orderList}">
//   <StandardListItem title="{orderId}" description="{amount}" />
// </List>

"Model은 데이터를 담는 컨테이너이고, View는 XML로 선언적으로 작성하며, Controller는 사용자 이벤트를 처리합니다. 바인딩 경로 {/orderList}는 JSON 객체의 최상위 경로를 참조합니다."라고 설명하면 원리 이해를 보여줄 수 있습니다.

질문 유형 2: 이벤트 처리와 컨트롤 접근

"버튼 클릭 시 특정 입력 필드 값을 읽는 방법은?"

// XML View
// <Input id="orderIdInput" placeholder="주문 ID 입력" />
// <Button text="검색" press="onSearch" />

// Controller
onSearch: function(oEvent) {
  // byId로 컨트롤 참조
  const sOrderId = this.byId("orderIdInput").getValue();

  if (!sOrderId) {
    MessageToast.show("주문 ID를 입력하세요.");
    return;
  }

  // 모델 데이터 필터링
  const oList = this.byId("orderList");
  const oBinding = oList.getBinding("items");
  oBinding.filter(
    new sap.ui.model.Filter("orderId", "EQ", sOrderId)
  );
}

이 코드를 그릴 수 있다면 실무 경험이 있음을 증명할 수 있습니다.

질문 유형 3: 라우팅과 네비게이션

"리스트에서 상세 페이지로 이동하는 방법은?"

// manifest.json 라우팅 설정
{
  "routes": [
    {
      "name": "OrderList",
      "pattern": "",
      "target": "orderList"
    },
    {
      "name": "OrderDetail",
      "pattern": "orders/{orderId}",
      "target": "orderDetail"
    }
  ]
}

// Controller에서 네비게이션
onOrderPress: function(oEvent) {
  const oItem = oEvent.getSource();
  const oCtx = oItem.getBindingContext();
  const sOrderId = oCtx.getProperty("orderId");

  this.getOwnerComponent().getRouter().navTo("OrderDetail", {
    orderId: encodeURIComponent(sOrderId)
  });
},

// 상세 페이지에서 파라미터 읽기
onRouteMatched: function(oEvent) {
  const sOrderId = decodeURIComponent(
    oEvent.getParameter("arguments").orderId
  );
  this._loadOrderDetail(sOrderId);
}

질문 유형 4: OData 연동

"OData 서비스를 UI5에 연결하고 데이터를 읽는 방법은?"

// manifest.json에서 OData 서비스 등록
{
  "dataSources": {
    "mainService": {
      "uri": "/sap/opu/odata/sap/ZGW_ORDERS_SRV/",
      "type": "OData",
      "settings": { "odataVersion": "2.0" }
    }
  },
  "models": {
    "": {
      "dataSource": "mainService",
      "type": "sap.ui.model.odata.v2.ODataModel"
    }
  }
}

// Controller에서 읽기
const oModel = this.getView().getModel();
oModel.read("/SalesOrderSet", {
  filters: [new Filter("Status", "EQ", "Open")],
  success: (oData) => {
    console.log("주문 목록:", oData.results);
  },
  error: (oError) => {
    MessageBox.error("데이터 로드 실패: " + oError.message);
  }
});

면접 통과를 위한 실전 전략

각 질문에 코드 예제를 들어 설명할 수 있도록 준비
SAPUI5 Demo Kit(ui5.sap.com)의 예제를 직접 수정해보기
실제 Fiori 앱 하나를 처음부터 만들어보면 모든 개념이 연결됨
"왜 이렇게 동작하는가"를 설명할 수 있으면 고점수

공식 문서와 학습 자료

UI5 공식 데모킷(ui5.sap.com)의 Walkthrough 예제를 처음부터 끝까지 직접 타이핑해보는 것이 가장 효율적인 면접 준비입니다.

댓글 0