CLI Ignite UI 활용한 단계별 가이드

    Ignite UI CLI 단계별 모드는 프로젝트 생성, 템플릿 선택, 테마 설정, 그리고 Ignite UI CLI 기반 Angular 프로젝트의 컴포넌트 뷰 추가를 안내하는 인터랙티브 마법사입니다. 비인터랙ig newig add 티브 및 명령어와 동일한 연산을 포함하지만, 모든 인수를 처음부터 요구하지 않고 각 단계에서 안내를 줍니다.

    단계별 모드는 스크립트 또는 비인터랙티브 사용을 지원하지 않으며, 이를 위해서는 명시적 인수를 가진 직접ig newig add 명령어와 명령을 사용하세요. 이 마법사는 다음과 같은 것에Inquirer.js 의존합니다; 호환성에 대해서는 지원되는 터미널을 참조하세요.

    마법사를 활성화하려면 다음을 실행하세요:

    ig
    

    or:

    ig new
    
    동영상 재생: 첫 Ignite UI CLI 앱 만들기

    첫 번째 Ignite UI CLI 앱 빌드

    Create new project

    먼저 애플리케이션 이름을 입력하라는 메시지가 표시됩니다.

    단계별 새 프로젝트 이름 프롬프트

    프레임워크를 선택한Angular 후에는 생성할 프로젝트 유형을 선택하라는 안내가 나옵니다:

    단계별 프로젝트 유형 선택

    그 후 사용 가능한 프로젝트 템플릿 중 하나를 선택하도록 안내됩니다. 빈 프로젝트, 사이드 내비게이션이 있는 프로젝트, 또는 기본 인증 모듈이 있는 인증 프로젝트를 만들 수 있습니다. 화살표 키를 사용해 사용 가능한 옵션을 탐색한 후 ENTER를 눌러 선택을 확인하세요:

    단계별 프로젝트 템플릿 선택

    다음 단계는 애플리케이션에 맞는 테마를 선택하는 것입니다. 기본 옵션을 선택하면 프로젝트igniteui-angular.css 내 기본 Ignite UI for Angular 테마가 포함된 사전 컴파일된 CSS 파일(angular.json)이 포함됩니다. 커스텀 옵션은 테마 APIapp/styles.scss를 사용하여 색상 팔레트와 테마 구성을 생성합니다.

    단계별 신규 프로젝트 주제 선택

    위 단계를 완료하면 애플리케이션 구조가 생성되고, Git 저장소가 초기화되며, 프로젝트가 커밋됩니다. 그 후 프로세스를 완료할지 아니면 애플리케이션에 새로운 뷰를 추가할지 묻습니다:

    단계별 신규 프로젝트 실행 프롬프트

    Add view

    Ignite UI CLI는 프로젝트에 추가할 수 있는 여러 컴포넌트 템플릿과 시나리오 템플릿을 지원합니다. 이 모드는 프로젝트 생성 후 계속 활성화하거나 아래 명령어를 사용하여 기존 프로젝트 내에서 활성화할 수 있습니다.

    ig add
    

    카테고리별로 그룹화된 사용 가능한 템플릿 목록이 제공됩니다.

    단계별 템플릿 그룹 선택

    화살표 키를 사용해 옵션을 탐색하고, ENTER 키를 눌러 선택하세요. 일부 템플릿Custom Grid의 경우, SPACE 키로 토글할 수 있는 선택적 기능 목록이 제공됩니다:

    단계별 컴포넌트 기능 토글

    시나리오를 신청서에 추가하기로 선택하면, 사용 가능한 시나리오 템플릿 목록도 함께 받게 됩니다:

    단계별 시나리오 템플릿 선택

    템플릿을 추가한 후에는 뷰를 추가할지 또는 프로세스를 완료할지 묻습니다. 완료 후 남은 패키지 의존성이 설치되고, 애플리케이션은 기본 브라우저에서 실행되고 제공됩니다.

    마법사 없이 프로젝트에 더 많은 Ignite UI for Angular 뷰를 추가하려면 직접 명령어를add 사용하세요:

    ig add [template] [name]