App 초기화 순서(SAPUI5가 처음 로팅되는 순서)

SAPUI5를 어느정도 익히고 사용하다보면 내부 구조나 어떤 순서로 동작하는지 알아야 할 때가 있습니다.

여기서는 Fiori launchpad나 HTML 페이지를 사용해서 app이 호출될 때 내부적으로 어떤순서로 동작하는지에 대한 설명을 하려고 합니다.

1. app을 시작합니다.

2. Component container는 app의 component(component.js)를 읽어드립니다.(여기에서 Component container는 ComponentContainer Control을 가리킵니다. iHTML페이지를 사용해서 호출할때는 ComponentContainer가 먼저가 아니라 ComponentSupport라는 control이 index.html의 세팅값을 읽어서 ComponentContainer를 호출합니다.)

3. Component는 Component.js 파일이 참조하고 있는 descriptor(manifest.json)을 읽어드립니다.

4. Component는 descriptor(기본 모델, resource모델(i18n))에 정의된 모델을 생성합니다.

5. Component.js의 init 함수를 실행합니다.

6. Component의 init 함수는 부모의 UIComponent의 init 함수를 호출합니다.(이 부분은 app개발자가 구현)

UIComponent.prototype.init.apply(this, arguments); ->Component.js에 선언하는 이부분 입니다.

7. UIComponent의 init 함수는 router와 descriptor에 정의된 root view를 생성합니다.

8. root view는 root control을 생성합니다.

9. Component의 init 함수가 router를 초기화합니다.(이 부분은 app개발자가 구현)

this.getRouter().initialize(); ->Component.js에 선언하는 이부분 입니다.

10. router는 app이 시작된 URL의 해시에 따라 필요한 view를 생성합니다.

11. View는 연결된 controller를 읽어드립니다.

12. Controller의 init 함수가 실행됩니다.

13. router는 root control에 view를 배치합니다. 이제 view와 해당 controller 에서 모델을 사용할 수 있습니다.

14. View의 binding이 평가됩니다.(binding된 path를 확인하는 정도로 이해하면 될 것 같습니다)

15. 모델로부터 데이터가 조회됩니다.(binding된 path에 따라 모델로부터 데이터를 불러옴)

16. View가 업데이트 됩니다.

17. 사용자가 app과 상호작용 할 수 있습니다.(app 사용 가능)

이 순서가 크게 중요하지 않을수도 있습니다. 하지만 개발을 하다보면 개발자가 생각하는대로 동작을 하지 않는 경우가 생깁니다.

오류나 버그가 있어서 그럴수도 있지만 이 순서를 몰라서 발생하는 경우도 생길 수 있습니다.

예를 들어 이런 경우 입니다.

onInit에서 model을 가져오지 못하는 경우

순서상 12번에서 Model을 가져오려고 시도하는데 Model은 13번이 지나야 사용가능합니다.

이러한 경우가 있기 때문에 대략적이라도 실행되는 순서를 알아야 합니다.

위의 순서는 아래의 도식을 실행되는 순서대로 나열한 것입니다. 도식을 보시면서 순서를 익히시면 좀 더 오래갈 거 같네요.

참고

https://sapui5.hana.ondemand.com/#/topic/d2f58695fce3476f92fdfc07c9e8f7c6