선짱의 SAP

[SAP CAP] BAS DOM 관련. onBeforeRendering & onAfterRendering

* Dom ( Document Object Model ) 조회 이런 트리구조를 dom이라고한다. 실제 바뀌는 모습을 보자면 1. 개발자가 XML에 작성 2. UI5가 HTML(, …)로 변환 ← 렌더링 3. 변환된 HTML이 브라우저에 들어감 ← DOM 4. 화면에 버튼이 보임 • onBeforeRendering: DOM에 넣기 직전이라 아직 화면 요소가 없어요. → DOM을 건드릴 수 없음 (2번 직전 실행) • onAfterRendering: DOM에 넣은 직후라 화면 요소가 존재해요. → 요소의 크기·위치 확인이나 직접 조작이 가능 (3번 직후 실행) 이런 구조는 잘 사용안한다고 함. patternmatched 쓰자.

[SAP CAP] BAS 라우터의 기능

라우터는 manifest 에서 확인할 수있음. 1. Hash 값 변경을 감시해서 hash에 맞는 타겟 화면을 뿌려준다. -> Hash 값 변경을 어떻게 아냐. -> 브라우저가 알려준다. 브라우저에는 주소의 hash가 바뀔 때마다 자동으로 발생하는 hashchange 이벤트가 기본으로 있다고한다. 2. navTo를 이용하여 target으로 이동(Hash값 변경) -> this.getOwnerComponent().getRouter().navTo("Detail", { id: 123 }); 3. 라우팅간의 event 처리 4. Pattern 을 이용해서 다양하게 주소로 담아 보낸다. -> 우리가 지금 patternmatched 써서 제어한다. [화면 분석 순서] Manifest.js..

우리 회사만의 bas 구조다. 요청 진입첨은 approuter로 BTP Cloud Foundry에서 XSUAA 인증을 쓰는 앱이면 보통 이 구조라고 한다. 간단하게 설명하자면1. 사용자가 approuter로 접속하면 XSUAA 로그인 화면으로 이동2. 로그인에 성공하면 XSUAA가 JWT를 발급approuter가 이 JWT를 세션에 보관한다 BTPSIDEBYSIDE/ -> repository├─ cap-app/ -> Front-end│ ├─ approuter/ -> 진입점: login + route service1│ ├─ library/ -> 공통 UI 라이브러리│ ├─ po..

1. Mta.yaml 은 배포할 때 무엇을 어떻게 올릴지 설정을 올려두는 곳 MTA = Multi-Target Application resources: //필요한 BTP 서비스들 - name: mdm-auth type: org.cloudfoundry.managed-service parameters: service: xsuaa //로그인&권한 서비스 - name: mdm-db type: com.sap.xs.hdi-container //HANA DB 2. ui5.yaml은 ui5앱 실행할 때 필요한 설정들을 적어주는 곳 자세하게 말하면 UI5 Tooling(UI5 CLI) 이라는 도구가 읽는 설정 파일 UI5 앱 폴더마다 하나씩 있다..

cap 하면서 ui5 쪽이 부족한것같아 다시 공부중이다. 파트너님이 추천해주신 튜토리얼 사이트 : OpenUI5 Tutorials | tutorials OpenUI5 TutorialsTutorials showcasing all major development paradigms of OpenUI5 using TypeScript.ui5.github.io step1 부터 차근히 해보는 중이다. 튜토리얼에는 정말 간단하게 html 만들어라 이렇게 쓰여있는데 app 밑에 step1 … 파일 만들어서 정리하면 깔끔하다 맨 처음에 app 밑에다가 step1 만들고 실행했는데 Cannot GET /portal/portal-site/index.html 이렇게 오류 뜨더라. 알고보니 내가 아래에 webapp 을 ..

아 다시 RAP 할라고하니까 기억이 안난다. ECC 버전에는 if 문 그냥 썻는데 하나버전오니까 잘 모르겠다.. 되짚어보자. * "결과반영. LOOP AT create-zr_mp_plan_if INTO ls_data. CLEAR : ls_reported, ls_header. ls_reported-%key = ls_data-%key. ls_reported-%msg = new_message_with_text( severity = COND #( WHEN lv_status = 'S' T..

나는 원래 클래식 아밥도 했고 회사에 RAP 로 뽑혀서 개발하고 있었는데 갑자기 CAP 빵꾸가 나면서 나를 CAP를 시키더라.CAP 는 RAP 랑 전~~혀 상관없는 자바스크립트랑 node.js 기반으로 만든다.(처음에 진짜 죽는줄. 팀장님이 나 자바했다고 자바스크립트로 할줄 알거라며 시켰음.ㅋㅋ큐ㅠ뭐든 많이 알면 좋으니 일단 한다고 함 ^^ ) SAP 표준 ERP를 건드리지 않고, 그 옆에 따로 만든 웹 시스템이 BTP 이고위 BTP 화면을 만드는 개발 tool 이 BASDB는 HANASQL 연결해서 사용함 BAS 안에 구조를 긴략히 설명하자면... cap-app/approuter : 모든 요청이 여기로 먼저 들어옴. XSUAA로 로그인 확인함.cap-app/library : 테이블, 엑셀 업/다운로..

cap 를 다룰려면 cockpit 도 잘 다뤄야 할것같다. 여러가지 용어가 있는데 헷갈린다. 그 중 계속 데스티네이션 데스티네이션하하는데 그게 뭔지 알아봤다. SAP BTP의 Destination 서비스란 url 인증정보를 하드코딩 하지 않고 BTP안에 이 이름으로 접속하면 이 시스템으로 연결된다는 설정임 BTP destination을 통해 connectivity 서비스 + cloud connector 를 통해 HANA에 접속하는 구조임 지금 총 8개 destination이 있다. onCapService → /srv-api/* 요청을 core 서비스(8080)로 프록시 onMDMService → /mdm-api/* 요청을 mdm 서비스(8081)로 프록시 onPlanService → /plan-ap..

DP 기준정보 등록 화면을 만들다가 Edit 칸을 만들고 밑에 행 추가하는 구문을 만들어봤다.여기서 push라는 구문을 사용했다.Push 를 사용하면 배열 끝에 새 항목을 추가할 수 있다. 정말 쉬운 예시로Const arr = [“사과”, “바나나”];arr.push(“체리”);console.log(arr); // ["사과", "바나나", "체리"]위 배열에 마지막 체리가 추가가 되는걸 볼 수있음. 추가 버튼 클릭 ↓ 현재 리스트 꺼내기 ↓ 빈 행 1개 만들어서 리스트 끝에 push ↓ 리스트 업데이트 → 화면에 새 행 표시 ↓ 테이블 스크롤 맨 아래로 onPressNew: function () { sap.ui.getCore().getMessageManage..

[변수]Var 이름;Let 나이;Const 성별;이렇게 선언할수있다.Var은 재선언이 가능하고 아래 두개는 불가능하다.Var,let 으로 만들면 재할당이 가능하고 const로 만들면 값 변경이 안됨.Let 이름 = kim;이름 = ‘choi’ //가능 Const 나이 = 30;나이 20; //에러하지만 const 오브젝트 = { 이름 : ‘kim’ }오브젝트.이름 = ‘Choi’ //가능 [배열]주로 대괄호 안에서 배열을 생성한다.Var arrLit = [1, true, “java”];배열을 읽을 때 인덱스를 사용해서 가져오는데. 이 때 0부터 시작한다. // 연습 1: 배열 순회const fruits = ["사과", "바나나", "체리"];fruits.forEach(fruit => { cons..