스키매틱으로 코드 생성하기

스키매틱은 복잡한 로직을 지원하는 템플릿 기반 코드 생성기입니다. 코드를 생성하거나 수정해서 소프트웨어 프로젝트를 변환하는 명령의 집합입니다. 스키매틱은 컬렉션으로 묶어서 패키지로 배포하며 npm으로 설치합니다.

스키매틱 컬렉션은 어떤 소프트웨어 프로젝트든 생성하고 수정하고 유지보수하는 강력한 도구가 될 수 있지만, Angular 프로젝트를 조직의 요구사항에 맞게 구성할 때 특히 유용합니다. 예를 들어 미리 정의한 템플릿이나 레이아웃으로 자주 사용하는 UI 패턴이나 특정 컴포넌트를 생성할 수 있습니다. 스키매틱으로 아키텍처 규칙과 관례를 적용하면 프로젝트의 일관성과 상호운용성을 유지할 수 있습니다.

Angular CLI용 스키매틱

스키매틱은 Angular 생태계의 일부입니다. Angular CLI는 스키매틱으로 웹 앱 프로젝트에 변환 작업을 적용합니다. 이 스키매틱을 수정하거나 새로 정의해서 의존성의 호환성이 깨지는 변경에 맞춰 코드를 수정하거나 기존 프로젝트에 새 설정 옵션이나 프레임워크를 추가할 수 있습니다.

ng generate와 ng add 명령어는 기본적으로 @schematics/angular 컬렉션에 포함된 스키매틱을 실행합니다. 이 패키지에는 ng generate component, ng generate service 등의 ng generate 하위 명령어에서 CLI가 사용할 수 있는 옵션을 설정하는 이름 있는 스키매틱이 들어 있습니다. ng generate의 하위 명령어는 해당 스키매틱을 간단하게 실행하는 표현입니다. 특정 스키매틱이나 스키매틱 컬렉션을 지정해서 생성하려면 전체 형식을 사용하세요:

ng generate my-schematic-collection:my-schematic-name

CLI 스키매틱 설정하기

스키매틱에 연결된 JSON 스키마는 명령어와 하위 명령어에서 사용할 수 있는 옵션과 기본값을 Angular CLI에 알려줍니다. 명령줄에서 옵션에 다른 값을 지정하면 이 기본값을 덮어쓸 수 있습니다. 워크스페이스의 생성 옵션 기본값을 변경하는 방법은 워크스페이스 설정을 참고하세요.

CLI가 프로젝트와 프로젝트 구성 요소를 생성하는 데 사용하는 기본 스키매틱의 JSON 스키마는 @schematics/angular 패키지에 모여 있습니다. 이 스키마는 --help 출력에 표시되는 것처럼 각 ng generate 하위 명령어에서 CLI가 사용할 수 있는 옵션을 설명합니다.

라이브러리용 스키매틱 개발하기

라이브러리 개발자는 커스텀 스키매틱 컬렉션을 만들어서 라이브러리를 Angular CLI와 통합할 수 있습니다.

• 추가 스키매틱 을 제공하면 개발자가 ng add로 Angular 워크스페이스에 라이브러리를 설치할 수 있습니다.
• 생성 스키매틱 은 ng generate 하위 명령어에 프로젝트 수정, 설정과 스크립트 추가, 라이브러리에 정의된 구성 요소의 기본 코드 생성 방법을 알려줍니다.
• 업데이트 스키매틱 은 새 버전을 배포할 때 ng update 명령어에 라이브러리 의존성을 업데이트하고 호환성이 깨지는 변경에 대응하는 방법을 알려줍니다.

구체적인 형태와 작성 방법은 다음 문서를 참고하세요:

추가 스키매틱

추가 스키매틱 은 보통 라이브러리와 함께 제공하며, ng add로 기존 프로젝트에 라이브러리를 추가할 수 있게 합니다. add 명령어는 패키지 매니저로 새 의존성을 다운로드하고 스키매틱으로 구현된 설치 스크립트를 실행합니다.

예를 들어 @angular/material 스키매틱은 add 명령어가 Angular Material과 테마를 설치하고 설정하며, ng generate로 생성할 수 있는 새로운 시작용 컴포넌트를 등록하도록 합니다. 추가 스키매틱을 직접 만들 때 이 스키매틱을 예제와 모델로 참고하세요.

파트너와 서드 파티 라이브러리도 추가 스키매틱으로 Angular CLI를 지원합니다. 예를 들어 @ng-bootstrap/schematics는 앱에 ng-bootstrap을 추가하고, @clr/angular는 VMWare의 Clarity를 설치하고 설정합니다.

추가 스키매틱 은 프로젝트의 설정을 변경하거나 추가 의존성(폴리필 등)을 설치하거나 패키지별 초기화 코드를 생성할 수도 있습니다. 예를 들어 @angular/pwa 스키매틱은 애플리케이션 매니페스트와 서비스 워커를 추가해서 애플리케이션을 PWA로 만듭니다.

생성 스키매틱

생성 스키매틱은 ng generate 명령어를 위한 지침입니다. 문서에 나와 있는 하위 명령어는 기본 Angular 생성 스키매틱을 사용하지만, 하위 명령어 대신 다른 스키매틱을 지정하면 라이브러리에 정의된 구성 요소를 생성할 수 있습니다.

예를 들어 Angular Material은 자체 UI 컴포넌트를 위한 생성 스키매틱을 제공합니다. 다음 명령어는 이러한 스키매틱 중 하나를 사용해서 정렬과 페이지 나누기를 위한 데이터 소스가 미리 설정된 Angular Material <mat-table>을 생성합니다.

ng generate @angular/material:table <component-name>

업데이트 스키매틱

ng update 명령어로 워크스페이스의 라이브러리 의존성을 업데이트할 수 있습니다. 옵션을 지정하지 않거나 도움말 옵션을 사용하면 워크스페이스를 검사하고 업데이트할 라이브러리를 제안합니다.

ng update
We analyzed your package.json, there are some packages to update:

    Name                                      Version                     Command to update
    --------------------------------------------------------------------------------
    @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
    @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
    @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
    @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
    rxjs                                      6.3.3 -> 6.4.0           ng update rxjs

업데이트할 라이브러리 목록을 명령어에 전달하면 해당 라이브러리, 그 피어 의존성, 해당 라이브러리를 피어 의존성으로 사용하는 의존성을 업데이트합니다.

처음부터 모든 의존성을 강제로 업데이트하는 방식은 권장하지 않습니다. 먼저 특정 의존성부터 업데이트해 보세요.

ng update 명령어의 동작 방식은 업데이트 명령어를 참고하세요.

호환성이 깨질 수 있는 변경을 포함한 새 라이브러리 버전을 만든다면 업데이트 스키매틱 을 제공해서 ng update 명령어가 업데이트 대상 프로젝트에 필요한 변경을 자동으로 적용하게 할 수 있습니다.

예를 들어 Angular Material 라이브러리를 업데이트한다고 해 봅시다.

ng update @angular/material

이 명령어는 워크스페이스의 package.json에서 @angular/material과 그 의존성인 @angular/cdk를 모두 업데이트합니다. 둘 중 어느 패키지든 기존 버전에서 새 버전으로 마이그레이션하는 업데이트 스키매틱이 있다면 워크스페이스에서 해당 스키매틱을 실행합니다.