최신 App Builder 업데이트: GitHub Pages 배포 및 계층적 그리드
최신 App Builder 릴리스에서는 리포지토리에서 직접 정적 사이트를 호스팅하기 위해 구성 요소 도구 상자 및 GitHub Pages 배포에 새로운 계층적 그리드를 추가했습니다. 자세히 알아보고 새로운 컨트롤과 기능을 사용해 보세요.
즈드라브코 콜레프
7분 읽기
2025년이 다가옴에 따라 차별화된 사용자 경험과 고성능 앱을 구축하는 데 필요한 모든 구성 요소와 기능을 갖출 수 있도록 최신 App Builder 업데이트를 서둘러 진행할 예정입니다! 그리고 이 App Builder 릴리스에서는 리포지토리에서 직접 정적 사이트를 호스팅하기 위해 구성 요소 도구 상자 및 GitHub Pages 배포에 새로운 계층적 그리드를 추가했습니다.
이러한 새로운 기능에 대해 자세히 알아보기 전에 App Builder에 대해 처음 배우는 경우 조직의 애플리케이션 개발 프로세스에서 핵심 도구로 고려해야 하는 이유를 빠르게 공유하겠습니다.
- 시각적 앱 빌더 – 제품 관리자, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
- 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
- Figma 설계에서 생산 준비가 완료된 Blazor 코드, Angular 코드, React 코드 및 Web Components 코드를 생성하는 로우 코드 툴 입니다.
최신 App Builder 업데이트의 일부로 GitHub Pages 배포
최신 App Builder 업데이트는 이제 사이트 호스팅에 대한 원활한 경험을 제공합니다.
GitHub Pages 개요– GitHub Pages는 GitHub 리포지토리에서 직접 웹 사이트를 호스팅하기 위한 훌륭한 솔루션을 제공합니다. 이 서비스는 최소한의 설정으로 프로젝트 문서, 개인 포트폴리오 또는 블로그를 배포하려는 개발자에게 적합합니다. GitHub Pages의 작동 방식은 다음과 같습니다.
- 원활한 통합: 각 GitHub 리포지토리는 웹 사이트의 호스트 역할을 할 수 있습니다. https://your-username.github.io/your-repo-name 와 같은 URL을 통해 콘텐츠에 즉시 액세스할 수 있습니다.
- 자동 업데이트: 리포지토리에 푸시된 변경 사항은 웹 사이트에 자동으로 반영되므로 사이트가 항상 최신 상태로 유지됩니다.
- 정적 사이트 생성: GitHub Pages에는 Markdown을 HTML로 변환하여 콘텐츠 관리를 간단하게 하는 Jekyll에 대한 지원이 포함되어 있습니다.
- 사용자화: 고유한 스타일을 위해 사용자 정의 CSS를 적용할 수 있는 기능과 함께 사용자 정의할 수 있는 다양한 Jekyll 테마가 있습니다.
- 사용자 지정 도메인: GitHub는 하위 도메인을 제공하지만 전문적인 터치를 위해 사용자 지정 도메인을 사이트에 연결할 수도 있습니다.
App Builder Platform과 통합
Angular, React, Blazor 및 Web Components를 생성하는 로우 코드 기능으로 알려진 이 App Builder 이제 GitHub Pages와 통합되어 개발자를 위한 배포 옵션을 향상시켰습니다. 이 통합의 현재 모습은 다음과 같습니다.
무료 플랜(표준) GitHub 사용자의 경우:
- 자동 GitHub Pages 배포: 배포 확인란을 선택하면 퍼블릭 리포지토리로 배포될 때 App Builder 프로젝트에 대해 GitHub Pages를 자동으로 사용하도록 설정합니다. 즉, 클라이언트 쪽 프로젝트는 추가 구성 없이 GitHub에서 직접 라이브로 전환할 수 있습니다.
- 옵트아웃 옵션: 사용자가 배포 시 프로젝트에 GitHub Pages를 사용하도록 설정할지 여부를 결정할 수 있습니다. 이를 통해 개발자는 프로젝트의 가시성과 배포 전략을 제어할 수 있습니다.
Enterprise 및 Pro 플랜에 대한 참고 사항:
엔터프라이즈 및 프로 GitHub 사용자가 GitHub Pages에 대한 배포 설정을 자동으로 배포하거나 선택할 수 있도록 하는 통합은 향후 반복을 위해 지연됩니다. 즉, 이 단계에서는 현재 표준 사용자의 경험을 향상시키는 데 중점을 두고 있습니다.
실제 사용자 스토리 활용 사례
- 프로젝트 배포: App Builder 플랫폼을 사용하여 React 애플리케이션을 구축했다고 상상해 보십시오. 현재 통합을 사용하면 프로젝트를 공개 GitHub 리포지토리로 푸시하면 GitHub Pages가 사이트를 자동으로 호스팅하여 최소한의 노력으로 전 세계에서 액세스할 수 있습니다.
- 배포 제어: 프로젝트를 공개적으로 호스팅하고 싶지 않거나 배포 타임라인을 제어해야 하는 사용자를 위해 향후 UI 개선 사항을 통해 GitHub Pages를 켜거나 끌 수 있으므로 프로젝트의 가시성을 유연하게 관리할 수 있습니다.
간단히 말해서 최신 App Builder 업데이트에서 GitHub Pages와 App Builder Platform의 통합은 정적 사이트의 배포를 간소화하기 위한 중요한 단계를 나타냅니다. 취미 개발자이든, 전문 개발자이든, 대기업의 일원이든, 이 통합은 웹 호스팅과 관련된 복잡성을 줄이는 것을 목표로 하여 인프라 관리보다 개발에 더 집중할 수 있도록 합니다. 더 많은 사용자 제어와 더 광범위한 계획 지원을 포함하도록 이 통합을 계속 확장하므로 추가 업데이트를 계속 지켜봐 주십시오.
Toolbox의 Hierarchical Grid 구성 요소
우리의 WYSIWYG App Builder AB Grids 구성 요소 벤치의 마지막 그리드 지점을 채우는 강력한 새 구성 요소로 더욱 좋아졌습니다. 이제 Grid, HGrid, TreeGrid 및 PivotGrid가 있으며 모두 AB의 도구 상자의 일부입니다.
HGrid(Hierarchical Grid)는 복잡한 중첩 데이터 구조를 표시하고 상호 작용하기 위한 강력한 도구입니다. 최대 5개 레벨의 깊이를 처리하도록 설계된 HGrid는 직관적인 RowIslands 기능을 통해 계층적 데이터의 시각화 및 관리를 단순화합니다. 계층적 그리드의 각 RowIsland는 기본적으로 정렬 및 필터링과 같은 기능으로 가득 차 있지만 중첩된 데이터에 맞게 특별히 조정된 플랫 그리드입니다.
중요 사항: RowIslands의 페이징, 정렬 또는 필터링과 같은 원격 데이터 작업은 현재 데이터 관리를 위한 중첩 구조보다는 하위 리소스 및 연결을 옹호하는 RESTful API 원칙을 준수하기 위해 비활성화 되어 있습니다.
Hierarchical Grid의 주요 기능Key Features of Hierarchical Grid
- 자동 RowIsland 생성: HGrid를 계층적 데이터 소스에 바인딩하면 최대 5개 수준까지 각 데이터 수준에 대해 RowIslands가 자동으로 생성됩니다.
- 구성 가능한 RowIslands: 각 RowIsland는 열 설정 및 템플릿과 같은 기능을 사용하여 독립적으로 구성할 수 있으므로 각 계층 수준에서 유연성을 보장할 수 있습니다.
- 탐색 용이성: HGrid를 선택하면 첫 번째 행이 자동으로 확장되어 자식 그리드가 표시됩니다. 계층을 통한 탐색은 Outline 패널을 통해 직관적으로 이루어집니다. 사용자는 각 RowIsland에 대한 맞춤형 제어를 통해 정렬 및 페이지 매김과 같은 기능을 사용자 지정할 수 있지만 그룹화 및 원격 작업은 지원되지 않습니다. 그리드가 확장되어 자식 그리드가 표시되며, 사용자는 레벨을 탐색하여 각 RowIsland를 선택하고 구성할 수 있습니다.
- 계층 관리: Data Hierarchy 구성 요소는 부모-자식 관계를 시각적으로 나타내므로 사용자는 필요에 따라 자식 그리드를 선택적으로 표시하거나 숨길 수 있습니다. 사용자는 표시하거나 숨길 데이터 수준을 선택할 수 있으므로 데이터 복잡성을 관리하여 사용자 경험을 향상시킬 수 있습니다.
추가 기능 및 통합 시나리오Extra functionalities and integration scenarios
- 드롭 및 바인딩: 도구 상자에서 HGrid를 놓으면 Northwind.Orders와 같은 샘플 데이터 세트에 자동으로 바인딩되어 계층 구조를 설정합니다.
- 디자인 표면 상호 작용: 디자인 캔버스에서 자식 그리드를 선택하여 자세한 구성을 확인합니다.
- 데이터 계층 시각화: 구성 요소는 데이터 구조를 표시하여 그리드의 계층 구조를 이해하고 조작하는 데 도움이 됩니다.
- 향후 개선 사항: 수준 간 더 쉬운 구성을 위한 이동 경로 탐색과 같은 기능은 다음 버전에 계획되어 있습니다.
HGrid 사용에 대한 모범 사례
- 깊이 제한: 데이터를 구성할 때 5단계 깊이 제한에 유의하세요.
- 구성: 속성 패널을 사용하여 다른 RowIsland에 영향을 주지 않고 각 RowIsland를 사용자 지정할 수 있습니다.
- 계층 관리: Data Hierarchy 선택기를 활용하여 기본 데이터를 변경하지 않고 가시성과 구조를 관리할 수 있습니다.
다른 릴리스 개선 사항
- Angular 앱은 Ignite UI for Angular 19.0.0을 사용하여 생성됩니다.
- 웹 구성 요소 앱은 Ignite UI for Web Components 5.1.2를 사용하여 생성됩니다.
- Blazor 앱은 Ignite UI for Blazor 24.2.6을 사용하여 생성됩니다.
- React 앱은 Ignite UI for React 18.7.4를 사용하여 생성됩니다.
마무리
결론적으로 App Builder 앱 개발 프로세스의 판도를 바꾸는 역할을 합니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 꼭 필요한 도구입니다. 오늘 사용해 보세요! 더 자세한 내용이 필요하시면 다음을 확인해 보시기 바랍니다.
최신 App Builder 업데이트의 모든 기능을 경험하려면 고객 포털을 방문하여 최신 버전을 다운로드하세요. 늘 그렇듯이 우리는 항상 귀하의 피드백을 받고 귀하가 추가하거나 추천하고 싶은 것을 듣게 되어 기쁩니다. 따라서 zkolev@appbuilder.dev로 이메일을 보내 Infragistics를 통해 고객에게 지속적으로 가치를 제공하는 데 도움이 될 수 있는 방법을 알려주십시오.
