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

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

# 자습서: React 애플리케이션 생성 및 업데이트
<a name="blueprint-getting-started-tutorial"></a>

블루프린트 작성자는 사용자 지정 블루프린트를 개발하고 스페이스의 블루프린트 카탈로그에 추가할 수 있습니다. 그런 다음 스페이스 멤버가 이러한 블루프린트를 사용하여 새 프로젝트를 생성하거나 기존 프로젝트에 추가할 수 있습니다. 블루프린트를 계속 변경한 다음 풀 요청을 통해 업데이트로 사용할 수 있습니다.

이 자습서에서는 블루프린트 작성자의 관점과 블루프린트 사용자 관점에 대한 연습을 제공합니다. 이 자습서에서는 React 단일 페이지 웹 애플리케이션 블루프린트를 생성하는 방법을 보여줍니다. 그런 다음 블루프린트를 사용하여 새 프로젝트를 생성합니다. 블루프린트가 변경 사항으로 업데이트되면 블루프린트에서 생성된 프로젝트는 풀 요청을 통해 이러한 변경 사항을 통합합니다.

**Topics**
+ [사전 조건](#blueprint-getting-started-prerequisites)
+ [1단계: 사용자 지정 블루프린트 생성](#react-bluprint-tutorial-create-bp)
+ [2단계: 릴리스 워크플로 보기](#blueprint-getting-started-view-workflow)
+ [3단계: 카탈로그에 블루프린트 추가](#blueprint-getting-started-add-to-catalog)
+ [4단계: 블루프린트를 사용하여 프로젝트 생성](#blueprint-getting-started-create-project)
+ [5단계: 블루프린트 업데이트](#blueprint-getting-started-update-blueprint)
+ [6단계: 블루프린트의 게시된 카탈로그 버전을 새 버전으로 업데이트](#blueprint-getting-started-update-catalog-version)
+ [7단계: 새 블루프린트 버전으로 프로젝트 업데이트](#blueprint-getting-started-update-project)
+ [8단계: 프로젝트의 변경 사항 보기](#blueprint-getting-started-view-changes)

## 사전 조건
<a name="blueprint-getting-started-prerequisites"></a>

사용자 지정 블루프린트를 생성하고 업데이트하려면 다음과 같이 [CodeCatalyst 설정 및 로그인CodeCatalyst 설정 및 로그인](setting-up-topnode.md)의 작업을 완료해야 합니다.
+ CodeCatalyst에 로그인하기 위한 AWS Builder ID가 있어야 합니다.
+ 스페이스에 속해 해당 스페이스에서 **스페이스 관리자** 또는 **파워 유저** 역할을 할당받습니다. 자세한 내용은 [스페이스 생성](spaces-create.md), [사용자에게 스페이스 권한 부여](spaces-members.md), [스페이스 관리자 역할](ipa-role-types.md#ipa-role-space-admin) 섹션을 참조하세요.

## 1단계: 사용자 지정 블루프린트 생성
<a name="react-bluprint-tutorial-create-bp"></a>

사용자 지정 블루프린트를 생성하면 블루프린트 소스 코드와 개발 도구 및 리소스가 포함된 CodeCatalyst 프로젝트가 생성됩니다. 프로젝트는 블루프린트를 개발, 테스트 및 게시하는 곳입니다.

1. [https://codecatalyst.aws/](https://codecatalyst.aws/)에서 CodeCatalyst 콘솔을 엽니다.

1. CodeCatalyst 콘솔에서 블루프린트를 생성할 스페이스로 이동합니다.

1. **설정**을 선택하여 스페이스 설정으로 이동합니다.

1. **스페이스 설정** 탭에서 **블루프린트**를 선택하고 **블루프린트 생성**을 선택합니다.

1. 블루프린트 생성 마법사의 필드를 다음 값으로 업데이트합니다.
   + **블루프린트 이름**에 `react-app-blueprint`를 입력합니다.
   + **블루프린트 표시 이름**에 `react-app-blueprint`를 입력합니다.

1. 필요에 따라 **코드 보기**를 선택하여 블루프린트의 블루프린트 소스 코드를 미리 봅니다. 마찬가지로 **워크플로 보기**를 선택하여 블루프린트를 빌드하고 게시하는 프로젝트에서 생성될 워크플로를 미리 봅니다.

1. **블루프린트 생성**을 선택합니다.

1. 블루프린트가 생성되면 블루프린트의 프로젝트로 이동합니다. 이 프로젝트에는 블루프린트 소스 코드와 블루프린트를 개발, 테스트 및 게시하는 데 필요한 도구 및 리소스가 포함되어 있습니다. 릴리스 워크플로가 생성되어 블루프린트가 스페이스에 자동으로 게시되었습니다.

1. 이제 블루프린트 및 블루프린트 프로젝트가 생성되었으므로 다음 단계에서는 소스 코드를 업데이트하여 구성합니다. 개발 환경을 사용하여 브라우저에서 직접 소스 리포지토리를 열고 편집할 수 있습니다.

   탐색 창에서 **코드**를 선택한 다음 **개발 환경**을 선택합니다.

1. **개발 환경 생성**을 선택한 다음 **AWS Cloud9(브라우저에서)**를 선택합니다.

1. 기본 설정을 유지하고 **생성**을 선택합니다.

1. AWS Cloud9 터미널에서 다음 명령을 실행하여 블루프린트 프로젝트 디렉터리로 이동합니다.

   ```
   cd react-app-blueprint
   ```

1. 블루프린트가 생성되면 `static-assets` 폴더가 자동으로 생성되고 채워집니다. 이 자습서에서는 기본 폴더를 삭제하고 react 앱 블루프린트에 대한 새 폴더를 생성합니다.

   다음 명령을 실행하여 static-assets 폴더를 삭제합니다.

   ```
   rm -r static-assets
   ```

   AWS Cloud9는 Linux 기반 플랫폼을 기반으로 구축되었습니다. Windows 운영 체제를 사용하는 경우 대신 다음 명령을 사용할 수 있습니다.

   ```
   rmdir /s /q static-assets
   ```

1. 이제 기본 폴더가 삭제되었으므로 다음 명령을 실행하여 react-app 블루프린트용 `static-assets` 폴더를 생성합니다.

   ```
   npx create-react-app static-assets
   ```

   메시지가 표시되면 `y`를 입력하여 계속 진행합니다.

   필요한 패키지가 있는 `static-assets` 폴더에 새 React 애플리케이션이 생성되었습니다. 변경 사항을 원격 CodeCatalyst 소스 리포지토리로 푸시해야 합니다.

1. 최신 변경 사항이 있는지 확인한 뒤 다음 명령을 실행하여 변경 사항을 커밋하고 블루프린트의 CodeCatalyst 소스 리포지토리에 푸시합니다.

   ```
   git pull
   ```

   ```
   git add .
   ```

   ```
   git commit -m "Add React app to static-assets"
   ```

   ```
   git push
   ```

변경 사항이 블루프린트의 소스 리포지토리로 푸시되면 릴리스 워크플로가 자동으로 시작됩니다. 이 워크플로는 블루프린트 버전을 늘리고 블루프린트를 빌드한 다음 스페이스에 게시합니다. 다음 단계에서는 릴리스 워크플로 실행으로 이동하여 실행 상태를 확인합니다.

## 2단계: 릴리스 워크플로 보기
<a name="blueprint-getting-started-view-workflow"></a>



1. CodeCatalyst 콘솔의 탐색 창에서 **CI/CD**를 선택한 다음 **워크플로**를 선택합니다.

1. **blueprint-release** 워크플로를 선택합니다.

1. 워크플로에 블루프린트를 빌드하고 게시하는 작업이 있음을 확인할 수 있습니다.

1. **최신 실행**에서 워크플로 실행 링크를 선택하여 수행한 코드 변경에서 실행을 확인합니다.

1. 실행이 완료되면 새 블루프린트 버전이 게시됩니다. 게시된 블루프린트 버전은 스페이스 **설정**에서 볼 수 있지만 스페이스의 블루프린트 카탈로그에 추가될 때까지 프로젝트에서 사용할 수 없습니다. 다음 단계에서는 카탈로그에 블루프린트를 추가합니다.

## 3단계: 카탈로그에 블루프린트 추가
<a name="blueprint-getting-started-add-to-catalog"></a>

스페이스의 블루프린트 카탈로그에 블루프린트를 추가하면 스페이스의 모든 프로젝트에서 블루프린트를 사용할 수 있습니다. 스페이스 멤버는 블루프린트를 사용하여 새 프로젝트를 생성하거나 기존 프로젝트에 추가할 수 있습니다.

1. CodeCatalyst 콘솔에서 스페이스로 돌아갑니다.

1. **설정**을 선택한 다음 **블루프린트**를 선택합니다.

1. **react-app-blueprint를** 선택한 다음 **카탈로그에 추가**를 선택합니다.

1. **저장**을 선택합니다.

## 4단계: 블루프린트를 사용하여 프로젝트 생성
<a name="blueprint-getting-started-create-project"></a>

이제 블루프린트가 카탈로그에 추가되었으므로 프로젝트에 사용할 수 있습니다. 이 단계에서는 방금 생성한 블루프린트를 사용하여 프로젝트를 생성합니다. 이후 단계에서는 블루프린트의 새 버전을 업데이트하고 게시하여 이 프로젝트를 업데이트합니다.

1. **프로젝트** 탭을 선택한 다음 **프로젝트 생성**을 선택합니다.

1. **스페이스 블루프린트**를 선택한 다음 **react-app-blueprint**를 선택합니다.
**참고**  
블루프린트를 선택하면 블루프린트 파일의 내용을 볼 수 있습니다`README.md`.

1. **다음**을 선택합니다.

1. 
**참고**  
이 프로젝트 생성 마법사의 내용은 블루프린트에서 구성할 수 있습니다.

   프로젝트 이름을 블루프린트 사용자로 입력합니다. 이 자습서에서는 `react-app-project`을 입력합니다. 자세한 내용은 [프로젝트 요구 사항을 충족하기 위한 사용자 지정 블루프린트 개발](develop-bp.md) 섹션을 참조하세요.

다음으로 블루프린트를 업데이트하고 이 프로젝트를 업데이트하는 데 사용할 새 버전을 카탈로그에 추가합니다.

## 5단계: 블루프린트 업데이트
<a name="blueprint-getting-started-update-blueprint"></a>

블루프린트를 사용하여 새 프로젝트를 생성하거나 기존 프로젝트에 적용한 후 블루프린트 작성자로서 계속 업데이트할 수 있습니다. 이 단계에서는 블루프린트를 변경하고 새 버전을 스페이스에 자동으로 게시합니다. 그러면 새 버전을 카탈로그 버전으로 추가할 수 있습니다.

1. [자습서: React 애플리케이션 생성 및 업데이트](#blueprint-getting-started-tutorial)에서 생성된 **react-app-blueprint** 프로젝트로 이동합니다.

1. [자습서: React 애플리케이션 생성 및 업데이트](#blueprint-getting-started-tutorial)에서 생성된 개발 환경을 엽니다.

   1. 탐색 창에서 **코드**를 선택한 다음 **개발 환경**을 선택합니다.

   1. 테이블에서 개발 환경을 찾은 다음 **AWS Cloud9에서(브라우저에서) 열기**를 선택합니다.

1. 블루프린트 릴리스 워크플로가 실행되면 `package.json` 파일 업데이트를 통해 블루프린트 버전이 증가합니다. AWS Cloud9 터미널에서 다음 명령을 실행하여 에서 변경 사항을 가져옵니다.

   ```
   git pull
   ```

1. `static-assets` 폴더로 이동하여 다음 명령을 실행합니다.

   ```
   cd /projects/react-app-blueprint/static-assets
   ```

1. 다음 명령을 실행하여 `static-assets` 폴더에 `hello-world.txt` 파일을 생성합니다.

   ```
   touch hello-world.txt
   ```

   AWS Cloud9는 Linux 기반 플랫폼을 기반으로 구축되었습니다. Windows 운영 체제를 사용하는 경우 대신 다음 명령을 사용할 수 있습니다.

   ```
   echo > hello-world.text
   ```

1. 왼쪽 탐색에서 `hello-world.txt` 파일을 두 번 클릭하여 편집기에서 파일을 열고 다음 내용을 추가합니다.

   ```
   Hello, world!
   ```

   파일을 저장합니다.

1. 최신 변경 사항이 있는지 확인한 뒤 다음 명령을 실행하여 변경 사항을 커밋하고 블루프린트의 CodeCatalyst 소스 리포지토리에 푸시합니다.

   ```
   git pull
   ```

   ```
   git add .
   ```

   ```
   git commit -m "prettier setup"
   ```

   ```
   git push
   ```

변경 사항을 푸시하여 릴리스 워크플로가 시작되었으며, 이 워크플로는 새 버전의 블루프린트를 스페이스에 자동으로 게시합니다.

## 6단계: 블루프린트의 게시된 카탈로그 버전을 새 버전으로 업데이트
<a name="blueprint-getting-started-update-catalog-version"></a>

블루프린트를 사용하여 새 프로젝트를 생성하거나 기존 프로젝트에 적용한 후에도 블루프린트를 블루프린트 작성자로 업데이트할 수 있습니다. 이 단계에서는 블루프린트를 변경하고 블루프린트의 카탈로그 버전을 변경합니다.

1. CodeCatalyst 콘솔에서 스페이스로 돌아갑니다.

1. **설정**을 선택한 다음 **블루프린트**를 선택합니다.

1. **react-app-blueprint**를 선택한 다음 **카탈로그 버전 관리**를 선택합니다.

1. 새 버전을 선택하고 **저장**을 선택합니다.

## 7단계: 새 블루프린트 버전으로 프로젝트 업데이트
<a name="blueprint-getting-started-update-project"></a>

이제 스페이스의 블루프린트 카탈로그에서 새 버전을 사용할 수 있습니다. 블루프린트 사용자는 [4단계: 블루프린트를 사용하여 프로젝트 생성](#blueprint-getting-started-create-project)에서 생성된 프로젝트의 버전을 업데이트할 수 있습니다. 이렇게 하면 모범 사례를 충족하는 데 필요한 최신 변경 사항과 수정 사항이 적용됩니다.

1. CodeCatalyst 콘솔에서 [4단계: 블루프린트를 사용하여 프로젝트 생성](#blueprint-getting-started-create-project)에서 생성된 **react-app-project** 프로젝트로 이동합니다.

1. 탐색 창에서 [**블루프린트(Blueprints)**]를 선택합니다.

1. 정보 상자에서 **블루프린트 업데이트**를 선택합니다.

1. 오른쪽 **코드 변경** 패널에서 `hello-world.txt` 및 `package.json` 업데이트를 볼 수 있습니다.

1. **업데이트 적용**을 선택합니다.

**업데이트 적용**을 선택하면 업데이트된 블루프린트 버전의 변경 사항이 포함된 풀 요청이 프로젝트에 생성됩니다. 프로젝트를 업데이트하려면 풀 요청을 병합해야 합니다. 자세한 내용은 [풀 요청 검토](pull-requests-review.md) 및 [풀 요청 병합](pull-requests-merge.md)(을)를 참조하세요.

1. **블루프린트** 테이블에서 블루프린트를 찾습니다. **상태** 열에서 **보류 중인 풀 요청**을 선택한 다음 열린 풀 요청에 대한 링크를 선택합니다.

1. 풀 요청을 검토한 다음 **병합**을 선택합니다.

1. **빠른 병합**을 선택하여 기본값을 유지한 다음 **병합**을 선택합니다.

## 8단계: 프로젝트의 변경 사항 보기
<a name="blueprint-getting-started-view-changes"></a>

이제 [7단계: 새 블루프린트 버전으로 프로젝트 업데이트](#blueprint-getting-started-update-project) 이후 프로젝트에서 블루프린트에 대한 변경 사항을 사용할 수 있습니다. 블루프린트 사용자는 소스 리포지토리에서 변경 사항을 볼 수 있습니다.

1. 탐색 창에서 **소스 리포지토리**를 선택한 다음 프로젝트가 생성될 때 생성된 소스 리포지토리의 이름을 선택합니다.

1. **파일**에서 [5단계: 블루프린트 업데이트](#blueprint-getting-started-update-blueprint)에서 생성된 `hello-world.txt` 파일을 볼 수 있습니다.

1. 파일 콘텐츠를 볼 `hello-world.txt`를 선택합니다.

수명 주기 관리는 블루프린트 작성자가 특정 블루프린트가 포함된 모든 프로젝트의 소프트웨어 개발 수명 주기를 중앙에서 관리할 수 있는 기능을 제공합니다. 이 자습서에서 볼 수 있듯이 블루프린트에 업데이트를 푸시한 다음 블루프린트를 사용하여 새 프로젝트를 생성하거나 기존 프로젝트에 적용할 수 있습니다. 자세한 내용은 [블루프린트 작성자로서 수명 주기 관리 작업](lifecycle-management-dev.md) 섹션을 참조하세요.