Amazon CodeCatalyst는 더 이상 신규 고객에게 공개되지 않습니다. 기존 고객은 정상적으로 서비스를 계속 이용할 수 있습니다. 자세한 내용은 [CodeCatalyst에서 마이그레이션하는 방법](migration.md) 단원을 참조하십시오.
기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 프론트엔드 마법사를 사용하여 블루프린트 특성 수정
CodeCatalyst의 블루프린트 선택 마법사는 `blueprint.ts` 파일의 `Options` 인터페이스에서 자동으로 생성됩니다. 프론트엔드 마법사는 [JSDOC 스타일 설명과 태그](https://jsdoc.app/about-getting-started.html)를 사용하여 블루프린트의 `Options` 수정 및 특성을 지원합니다. JSDOC 스타일의 설명과 태그를 사용하여 태스크를 수행할 수 있습니다. 예를 들어 옵션 위에 표시된 텍스트를 선택하거나, 입력 검증과 같은 기능을 활성화하거나, 옵션을 축소할 수 있습니다. 마법사는 `Options` 인터페이스의 TypeScript 유형에서 생성된 추상 구문 트리(AST)를 해석하여 작동합니다. 마법사는 가능한 한 가장 잘 설명된 유형으로 자동으로 구성합니다. 일부 유형은 지원되지 않습니다. 지원되는 다른 유형에는 리전 선택기와 환경 선택기가 포함됩니다.
다음은 블루프린트트의 `Options`와 함께 JSDOC 주석 및 태그를 사용하는 마법사의 예입니다.
```
export interface Options {
/**
* What do you want to call your new blueprint?
* @validationRegex /^[a-zA-Z0-9_]+$/
* @validationMessage Must contain only upper and lowercase letters, numbers and underscores
*/
blueprintName: string;
/**
* Add a description for your new blueprint.
*/
description?: string;
/**
* Tags for your Blueprint:
* @collapsed true
*/
tags?: string[];
}
```
`Options` 인터페이스의 각 옵션 표시 이름은 기본적으로 `camelCase`에 표시됩니다. JSDOC 스타일 설명의 일반 텍스트는 마법사의 옵션 위에 텍스트로 표시됩니다.
**Topics**
+ [지원되는 태그](#supported-tags-bp)
+ [지원되는 TypeScript 유형](#supported-typescript-bp)
+ [합성 중 사용자와 통신](#communication-mid-synthesis)
## 지원되는 태그
다음 JSDOC 태그는 프런트 엔드 마법사의 사용자 지정 블루프린트의 `Options`에서 지원됩니다.
### @inlinePolicy ./path/to/policy/file.json
+ **필수** - `Role` 유형으로 선택할 수 있습니다.
+ **사용량** - 역할에 필요한 인라인 정책을 전달할 수 있습니다. `policy.json` 경로는 소스 코드 아래에 있을 것으로 예상됩니다. 역할에 대한 사용자 지정 정책이 필요한 경우 이 태그를 사용합니다.
+ **종속성** - `blueprint-cli 0.1.12` 이상
+ **예시** - `@inlinePolicy ./deployment-policy.json`
```
environment: EnvironmentDefinition{
awsAccountConnection: AccountConnection{
/**
* @inlinePolicy ./path/to/deployment-policy.json
*/
cdkRole: Role[];
};
};
```
### @trustPolicy ./path/to/policy/file.json
+ **필수** - `Role` 유형으로 선택할 수 있습니다.
+ **사용량** - 역할에 필요한 신뢰 정책을 전달할 수 있습니다. `policy.json` 경로는 소스 코드 아래에 있을 것으로 예상됩니다. 역할에 대한 사용자 지정 정책이 필요한 경우 이 태그를 사용합니다.
+ **종속성** - `blueprint-cli 0.1.12` 이상
+ **예시** - `@trustPolicy ./trust-policy.json`
```
environment: EnvironmentDefinition{
awsAccountConnection: AccountConnection{
/**
* @trustPolicy ./path/to/trust-policy.json
*/
cdkRole: Role[];
};
};
```
### @validationRegex 정규식
+ **필수** - 문자열로 선택할 수 있습니다.
+ **사용량** - 지정된 정규식을 사용하여 옵션에 대한 입력 검증을 수행하고 를 표시합니다`@validationMessage`.
+ **예시** - `@validationRegex /^[a-zA-Z0-9_]+$/`
+ **권장 사항** - `@validationMessage`와 함께 사용합니다. 검증 메시지는 기본적으로 비어 있습니다.
### @validationMessage 문자열
+ **필수** - 사용량을 검토할 `@validationRegex` 또는 기타 오류
+ **사용량** - `@validation*` 실패 시 검증 메시지를 표시합니다.
+ **예시**: - `@validationMessage Must contain only upper and lowercase letters, numbers, and underscores`
+ **권장 사항** - `@validationMessage`와 함께 사용합니다. 검증 메시지는 기본적으로 비어 있습니다.
### @collapsed boolean(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 하위 옵션을 축소할 수 있는 부울입니다. 축소된 주석이 있는 경우 기본값은 true입니다. 값을 `@collapsed false`로 설정하면 처음에 열려 있는 축소 가능한 섹션이 생성됩니다.
+ **예시** - `@collapsed true`
### @displayName 문자열
+ **필수** - 해당 없음
+ **사용량** - 옵션 표시 이름을 변경합니다. 표시 이름에 camelCase 이외의 형식을 허용합니다.
+ **예시** - `@displayName Blueprint Name`
### @displayName 문자열
+ **필수** - 해당 없음
+ **사용량** - 옵션 표시 이름을 변경합니다. 표시 이름에 [camelCase](https://en.wikipedia.org/wiki/Camel_case) 이외의 형식을 허용합니다.
+ **예시** - `@displayName Blueprint Name`
### @defaultEntropy 번호
+ **필수** - 문자열로 선택할 수 있습니다.
+ **사용량** - 지정된 길이의 무작위 배정된 영숫자 문자열을 옵션에 추가합니다.
+ **예시** - `@defaultEntropy 5`
### @placeholder 문자열(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 기본 텍스트 필드 자리 표시자를 변경합니다.
+ **예시** - `@placeholder type project name here`
### @textArea 번호(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 문자열 입력을 더 큰 텍스트 섹션의 텍스트 영역 구성 요소로 변환합니다. 숫자를 추가하면 행 수가 정의됩니다. 기본값은 모든 행입니다.
+ **예시** - `@textArea 10`
### @hidden 부울(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 검증 확인에 실패하지 않는 한 사용자로부터 파일을 숨깁니다. 기본값은 true입니다.
+ **예시** - `@hidden`
### @button 부울(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 설명은 부울 속성에 있어야 합니다. 선택하면 true로 합성되는 버튼을 추가합니다. 토글이 아닙니다.
+ **예시** - `buttonExample: boolean;`
```
/**
* @button
*/
buttonExample: boolean;
```
### @showName 부울(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 계정 연결 유형에서만 사용할 수 있습니다. 숨겨진 이름 입력을 표시합니다. 기본값은 `default_environment`입니다.
+ **예시** - `@showName true`
```
/**
* @showName true
*/
accountConnection: AccountConnection<{
...
}>;
```
### @showEnvironmentType 부울(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 계정 연결 유형에서만 사용할 수 있습니다. 숨겨진 환경 유형 드롭다운 메뉴를 표시합니다. 모든 연결은 기본적으로 `production`입니다. 옵션은 **비프로덕션** 또는 **프로덕션**입니다.
+ **예시** - `@showEnvironmentType true`
```
/**
* @showEnvironmentType true
*/
accountConnection: AccountConnection<{
...
}>;
```
### @forceDefault boolean(선택 사항)
+ **필수** - 해당 없음
+ **사용량** - 이전에 사용자가 사용한 값 대신 블루프린트 작성자가 제공한 기본값을 사용합니다.
+ **예시** - `forceDeafultExample: any;`
```
/**
* @forceDefault
*/
forceDeafultExample: any;
```
### @requires blueprintName
+ **필수 ** - `Options` 인터페이스에 주석을 지정합니다.
+ **사용량** - 현재 블루프린트의 요구 사항으로 `blueprintName` 프로젝트에 지정된 를 추가하도록 사용자에게 경고합니다.
+ **예시** - `@requires '@amazon-codecatalyst/blueprints.blueprint-builder'`
```
/*
* @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
*/
export interface Options extends ParentOptions {
...
```
### @filter 정규식
+ **필수 ** - `Selector` 또는 `MultiSelect` 인터페이스에 설명을 지정합니다.
+ **사용량** - 마법사의 드롭다운을 지정된 정규식과 일치하는 옵션으로 필터링합니다.
+ **예시** - `@filter /blueprintPackageName/`
```
/**
* @filter /myPackageName/
*/
blueprintInstantiation?: Selector;
...
```
## 지원되는 TypeScript 유형
다음 TypeScript 유형은 프런트 엔드 마법사의 사용자 지정 블루프린트의 `Options`에서 지원됩니다.
### 번호
+ **필수** - `number` 유형으로 선택할 수 있습니다.
+ **사용량** - 숫자 입력 필드를 생성합니다.
+ **예시** - `age: number`
```
{
age: number
...
}
```
### String
+ **필수** - `string` 유형으로 선택할 수 있습니다.
+ **사용량** - 문자열 입력 필드를 생성합니다.
+ **예시** - `name: string`
```
{
age: string
...
}
```
### 문자열 목록
+ **필수** - `string` 유형의 배열로 선택할 수 있습니다.
+ **사용량** - 문자열 목록 입력을 생성합니다.
+ **예시** - `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Checkbox
+ **필수** - `boolean`으로 선택할 수 있습니다.
+ **사용량** - 확인란을 생성합니다.
+ **예시** - `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Radio
+ **필수** - 3개 이하의 문자열을 결합할 수 있는 옵션입니다.
+ **사용량** - 선택한 라디오를 생성합니다.
**참고**
4개 이상의 항목이 있는 경우 이 유형은 드롭다운으로 렌더링됩니다.
+ **예시** - `color: 'red' | 'blue' | 'green'`
```
{
color: 'red' | 'blue' | 'green'
...
}
```
### Dropdown
+ **필수** - 4개 이상의 문자열을 결합할 수 있는 옵션입니다.
+ **사용량** - 드롭다운을 생성합니다.
+ **예시** - `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'`
```
{
runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
...
}
```
### Expandable section
+ **필수** - 객체로 선택할 수 있습니다.
+ **사용량** - 확장 가능한 섹션을 생성합니다. 객체의 옵션은 마법사의 확장 가능한 섹션 내에 중첩됩니다.
+ **예시** -
```
{
expandableSectionTitle: {
nestedString: string;
nestedNumber: number;
}
}
```
### Tuple
+ **필수** - `Tuple` 유형으로 선택할 수 있습니다.
+ **사용량** - 키 값 유료 입력을 생성합니다.
+ **예시** - `tuple: Tuple[string, string]>`
```
{
tuple: Tuple[string, string]>;
...
}
```
### Tuple list
+ **필수** - `Tuple` 유형의 배열로 선택할 수 있습니다.
+ **사용량** - tuple 목록 입력을 생성합니다.
+ **예시** - `tupleList: Tuple[string, string]>[]`
```
{
tupleList: Tuple[string, string]>[];
...
}
```
### Selector
+ **필수** - `Selector` 유형으로 선택할 수 있습니다.
+ **사용량** - 프로젝트에 적용된 소스 리포지토리 또는 블루프린트트의 드롭다운을 생성합니다.
+ **예시** - `sourceRepo: Selector`
```
{
sourceRepo: Selector;
sourceRepoOrAdd: Selector;
blueprintInstantiation: Selector;
...
}
```
### Multiselect
+ **필수** - `Selector` 유형으로 선택할 수 있습니다.
+ **사용량** - 다중 선택 입력을 생성합니다.
+ **예시** - `multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>`
```
{
multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
...
}
```
## 합성 중 사용자와 통신
블루프린트 작성자는 검증 메시지 외에 사용자에게 다시 통신할 수 있습니다. 예를 들어 스페이스 멤버는 명확하지 않은 블루프린트를 생성하는 옵션의 조합을 볼 수 있습니다. 사용자 지정 블루프린트는 합성을 호출하여 오류 메시지를 사용자에게 다시 전달하는 기능을 지원합니다. 기본 블루프린트는 명확한 오류 메시지를 기대하는 `throwSynthesisError(...)` 함수를 구현합니다. 다음을 사용하여 메시지를 간접 호출할 수 있습니다.
```
//blueprint.ts
this.throwSynthesisError({
name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
message: 'hello from the blueprint! This is a custom error communicated to the user.'
})
```