백엔드 없이 UI5 개발 — Mock Server 실수 4가지 #shorts #SAP #UI5

이 글이 답하는 질문

• 백엔드 없이 UI5 앱을 어떻게 실행할 수 있나?
• Mock Server를 어디에, 어떻게 붙이나?
• 왜 내 Mock 데이터가 화면에 안 보이지?

직접 해보기

1. 디렉토리 구조 만들기

webapp/
  localService/
    mockdata/
      Products.json    ← EntitySet 이름과 파일명 정확히 일치
    metadata.xml       ← $metadata 응답 파일
  test/
    mockServer.html    ← 로컬 진입점
    initMockServer.js  ← MockServer 초기화

2. MockServer 초기화 코드

// webapp/test/initMockServer.js
sap.ui.define([
  "sap/ui/core/util/MockServer"
], function(MockServer) {
  var oServer = new MockServer({
    rootUri: "/sap/opu/odata/sap/MY_SERVICE/"
  });
  MockServer.config({
    autoRespond: true,
    autoRespondAfter: 0
  });
  oServer.simulate(
    "localService/metadata.xml",
    { sMockdataBaseUrl: "localService/mockdata/" }
  );
  oServer.start();
});

3. mockServer.html에서 초기화 순서 지키기

<!-- webapp/test/mockServer.html -->
<script>
  sap.ui.getCore().attachInit(function() {
    sap.ui.require(["test/initMockServer"], function() {
      sap.ui.require([
        "sap/m/Shell",
        "sap/ui/core/ComponentContainer"
      ], function(Shell, Container) {
        new Shell({
          app: new Container({ name: "my.app" })
        }).placeAt("content");
      });
    });
  });
</script>

삽질 노트

• rootUri 끝 슬래시 누락: /MY_SERVICE와 /MY_SERVICE/는 다르다. MockServer가 OData 요청을 가로채지 못한 채 실제 백엔드로 날아간다.
• mockdata 파일명 대소문자: Products.json과 products.json은 리눅스/BTP 환경에서 완전히 다른 파일이다. EntitySet 이름을 그대로 써야 한다.
• simulate() 경로 기준점: 첫 번째 인자는 webapp 기준 상대경로가 아닌 앱 루트 기준이다. ./localService/metadata.xml 대신 localService/metadata.xml.
• 초기화 순서 역전: Component가 먼저 로드되면 MockServer가 붙기 전에 OData 요청이 나간다. initMockServer를 반드시 먼저 require 해야 한다.

핵심 한 줄

Mock Server는 rootUri 끝 슬래시, 파일명 대소문자, 초기화 순서 세 가지만 맞으면 백엔드 없이도 OData 연동 개발이 된다.

더 파볼 주제

• MockServer의 addCustomMockData로 동적 응답 흉내 내기
• FakeService vs MockServer — 언제 뭘 쓰나
• BAS 기본 제공 Mock 설정으로 배포 없이 테스트하기