백엔드 없이 OData? — Mock Server 3단계 설정 #shorts #SAP #UI5

이 글이 답하는 질문

• 백엔드 API가 없는 상황에서도 UI5 앱을 실행할 수 있나?
• Mock Server는 어떻게 설정하고 OData를 어디서 흉내 내나?
• 운영 배포 코드에 Mock이 섞이지 않게 하려면?

직접 해보기

1. 디렉토리 구조 잡기

webapp/
  localService/
    metadata.xml          ← OData 서비스 메타데이터
    mockserver.js         ← MockServer 초기화
    mockdata/
      Products.json       ← EntitySet별 JSON 파일
  test/
    mockServer.html       ← Mock 전용 진입점 (운영 index.html과 분리)

2. MockServer 초기화 코드

// webapp/localService/mockserver.js
sap.ui.define([
  "sap/ui/core/util/MockServer"
], function (MockServer) {
  return {
    init: function () {
      const oMock = new MockServer({
        rootUri: "/sap/opu/odata/sap/MY_SRV/"
      });
      MockServer.config({
        autoRespond: true,
        autoRespondAfter: 300
      });
      oMock.simulate("localService/metadata.xml", {
        sFolderPath: "localService/mockdata"
      });
      oMock.start();
    }
  };
});

3. 테스트 데이터 파일

// webapp/localService/mockdata/Products.json
{
  "d": {
    "results": [
      { "ProductId": "P001", "Name": "Monitor", "Price": 500 },
      { "ProductId": "P002", "Name": "Keyboard", "Price": 80 }
    ]
  }
}

파일명은 EntitySet 이름과 반드시 일치해야 한다. Products EntitySet이면 Products.json.

4. Mock 전용 진입점 분리

<!-- test/mockServer.html -->
<script>
  sap.ui.require(["localService/mockserver"], function (server) {
    server.init();
    sap.ui.require(["sap/m/Shell"], function (Shell) {
      new Shell({ app: ... }).placeAt("content");
    });
  });
</script>

운영용 index.html은 mockserver.js를 절대 로드하지 않는다. 이렇게 진입점을 나눠야 배포 시 Mock 코드가 번들에 포함되지 않는다.

삽질 노트

• rootUri가 실제 OData 서비스 경로와 다르면 Mock이 가로채지 못한다 — 정확히 일치시킬 것
• metadata.xml 없이 simulate()를 호출하면 콘솔 에러 없이 Mock이 조용히 실패한다
• EntitySet JSON 파일명 대소문자 오타 → 빈 배열 반환. 파일명은 CamelCase 그대로

핵심 한 줄

metadata.xml + EntitySet JSON만 있으면 백엔드 없이 완전한 OData를 로컬에서 시뮬레이션할 수 있다.

더 파볼 주제

• MockServer 커스텀 핸들러 — 특정 요청만 가로채 로직 추가하기
• OPA5 테스트에서 MockServer 재사용하기
• CAP cds mock 와 UI5 MockServer 비교