======================================================================
■ UI5 Fragment 핵심 가이드라인 및 Component 개념 비교 요약 ■
■ 작성자 : KYH
■ 작성일자 : 2026.06.03
■ 특이사항 :
----------------------------------------------------------------------
수정자 : 
수정일자 :
변경사항 :
----------------------------------------------------------------------
수정자 : 
수정일자 :
변경사항 :
----------------------------------------------------------------------
수정자 : 
수정일자 :
변경사항 :
======================================================================

1. Fragment(프래그먼트)의 기본 개념
----------------------------------------------------------------------
- 한 줄 요약: "자신만의 컨트롤러가 없는, 가볍고 재사용 가능한 UI 조각"입니다.
- 특징: 
  ① .fragment.xml 확장자를 가지며, 뷰(View)와 똑같이 XML로 화면을 그립니다.
  ② 가장 중요한 점은 자신만의 Controller가 없다는 것입니다.
  ③ 프래그먼트를 불러온 '부모 뷰의 컨트롤러'와 '부모 뷰의 모델'을 그대로 기생해서 사용합니다.
- 주로 쓰이는 곳: 모달 팝업창(Dialog), 알림창(Popover), 여러 페이지에서 반복되는 공통 UI 블록


2. Component(컴포넌트)의 기본 개념
----------------------------------------------------------------------
- 한 줄 요약: "자신만의 모델, 라우터, 뷰, 컨트롤러를 모두 갖춘 독립적인 미니 앱"입니다.
- 특징:
  ① Component.js를 중심으로 구동되며, 앱 전체의 뼈대와 환경 설정을 통제합니다.
  ② 완전히 독립되어 있기 때문에, 다른 UI5 프로젝트에 통째로 이식해서 재사용할 수 있습니다.
  ③ 우리가 manifest.json에서 세팅한 모든 것들이 결국 이 Component 안에서 돌아갑니다.


3. 💡 핵심 비교: 체급 차이 이해하기 (Fragment vs Component)
----------------------------------------------------------------------
화면을 분리하고 재사용할 때, 어떤 것을 선택해야 할지 기준이 되는 표입니다.

+-------------------+---------------------------------+---------------------------------+
| 구 분             | Fragment (프래그먼트)           | Component (컴포넌트)            |
+-------------------+---------------------------------+---------------------------------+
| 체급 (무게)       | 초경량 (Lightweight)            | 중량형 (Heavyweight)            |
+-------------------+---------------------------------+---------------------------------+
| 자체 Controller   | 없음 (부모 컨트롤러에 기생)     | 있음 (자체 로직 소유)           |
+-------------------+---------------------------------+---------------------------------+
| 자체 manifest     | 없음 (부모 manifest 따름)       | 있음 (독립적 환경 설정)         |
+-------------------+---------------------------------+---------------------------------+
| 주요 용도         | - 버튼 눌렀을 때 뜨는 팝업창     | - 사내 메인 포털 속 '챗봇 앱'   |
|                   | - 주소 검색창                   | - 통째로 재사용할 '결재 모듈'   |
|                   | - 단순 반복되는 UI 레이아웃     | - 독립된 거대 기능 단위         |
+-------------------+---------------------------------+---------------------------------+
| 비유               | 주방에서 쓰는 '접시, 집기류'     | 주방에 새로 들인 '식기세척기'   |
+-------------------+---------------------------------+---------------------------------+


4. Fragment 실무 구현 예시 (팝업창 만들기)
----------------------------------------------------------------------
예를 들어 Main 페이지에서 "도움말" 팝업창을 프래그먼트로 띄운다면 다음과 같이 작성합니다.

[단계 1] 프래그먼트 화면 파일 생성 (webapp/view/fragments/HelpDialog.fragment.xml)
<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog title="도움말 팝업">
        <content>
            <Text text="회사 홈페이지 이용 방법 안내입니다." />
        </content>
        <beginButton>
            <Button text="닫기" press="onCloseDialog" /> 
            </beginButton>
    </Dialog>
</core:FragmentDefinition>



[단계 2] 부모 컨트롤러에서 팝업 호출 (Main.controller.js)
onOpenDialog: function () {
    if (!this._oDialog) {
        // 프래그먼트 파일을 비동기로 로드하여 부모 뷰에 연결합니다.
        this.loadFragment({
            name: "homepage.view.fragments.HelpDialog"
        }).then(function (oDialog) {
            this._oDialog = oDialog;
            this._oDialog.open(); // 팝업 열기
        }.bind(this));
    } else {
        this._oDialog.open();
    }
},

onCloseDialog: function () {
    this._oDialog.close(); // 팝업 닫기
}


5. 유지보수를 위한 프래그먼트 작성 팁
----------------------------------------------------------------------
- 프래그먼트 파일들은 관리하기 쉽게 `webapp/view/fragments/` 폴더를 따로 만들어서 모아두는 것이 좋습니다.
- 프래그먼트 안의 버튼 이벤트 함수는 그것을 호출한 부모 컨트롤러(예: Main.controller.js)에 
  적어야 하므로, 주석으로 "어느 컨트롤러에서 이 이벤트를 처리하는지" 명시해 두면 다음 작업자가 편합니다.
- 만약 "UI 조각을 재사용하고 싶은데, 페이지마다 데이터나 버튼 로직이 아예 달라야 한다"면 
  프래그먼트가 아니라, 비즈니스 로직까지 통째로 독립된 'Component'로 
  설계를 격상해야 합니다.

======================================================================