Amazon CodeCatalyst는 더 이상 신규 고객에게 공개되지 않습니다. 기존 고객은 정상적으로 서비스를 계속 이용할 수 있습니다. 자세한 내용은 [CodeCatalyst에서 마이그레이션하는 방법](migration.md) 단원을 참조하십시오.

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 블루프린트에 리전 구성 요소 추가
<a name="region-comp-bp"></a>

리전 유형을 사용자 지정 블루프린트의 `Options` 인터페이스에 추가하여 블루프린트 마법사에서 구성 요소를 생성할 수 있습니다. 블루프린트 마법사에 하나 이상의 AWS 리전을 입력할 수 있습니다. 리전 유형은 `blueprint.ts` 파일의 기본 블루프린트에서 가져올 수 있습니다. 자세한 내용은 [AWS 리전](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/) 섹션을 참조하세요.

**Amazon CodeCatalyst 블루프린트 리전 유형을 가져오려면**

다음을 `blueprint.ts` 파일에 추가합니다.

```
import { Region } from '@amazon-codecatalyst/blueprints.blueprint'
```

리전 유형 파라미터는 선택할 수 있는 AWS 리전 코드의 배열이거나 지원되는 모든 AWS 리전을 포함하는 데 `*`를 사용할 수 있습니다.

**Topics**
+ [Annotations](#region-annotations-bp)
+ [리전 구성 요소 예시](#region-components-examples)

## Annotations
<a name="region-annotations-bp"></a>

JSDoc 태그를 `Options` 인터페이스의 각 필드에 추가하여 마법사에서 필드가 나타나고 동작하는 방식을 사용자 지정할 수 있습니다. 리전 유형에서 다음 태그가 지원됩니다.
+ `@displayName` 주석을 사용하여 마법사에서 필드의 레이블을 변경할 수 있습니다.

  예시: `@displayName AWS Region`
+ `@placeholder` 주석을 사용하여 선택/다중 선택 구성 요소의 자리 표시자를 변경할 수 있습니다.

  예시: `@placeholder Choose AWS Region`

## 리전 구성 요소 예시
<a name="region-components-examples"></a>

### 지정된 목록에서 리전 선택
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>;
}
```

### 지정된 목록에서 하나 이상의 리전 선택
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```

### AWS 리전 하나 선택
<a name="region-one-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['*']>;
}
```

### 지정된 목록에서 하나 이상의 리전 선택
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```