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

# Amplify를 사용한 React 앱 생성과 Amazon Cognito를 사용한 인증 추가
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## 요약
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

이 패턴은 Amplify를 사용하여 React 기반 앱을 생성하는 방법과 Amazon Cognito를 사용하여 프런트엔드에 인증을 추가하는 방법을 보여줍니다. Amplify는 AWS상의 모바일 및 웹 앱 개발을 가속화하는 도구 세트(오픈 소스 프레임워크, 시각적 개발 환경, 콘솔)와 서비스(웹 앱 및 정적 웹 사이트 호스팅)로 구성되어 있습니다.

## 사전 조건 및 제한 사항
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**사전 조건**
+ 활성 상태의 AWS 계정
+ 시스템에 설치된 [Node.js](https://nodejs.org/en/download/) 및 [npm](https://www.npmjs.com/get-npm)

**제품 버전**
+ Node.js 버전 10.x 이상(버전을 확인하려면 터미널 창에서 `node -v`(을)를 실행)
+ npm version 6.x 이상(버전을 확인하려면 터미널 창에서 `npm -v`(을)를 실행)

## 아키텍처
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**대상 기술 스택 **
+ Amplify
+ Amazon Cognito

## 도구
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Amplify 명령줄 인터페이스(CLI)](https://docs.amplify.aws/cli/)
+ [Amplify Libraries](https://docs.amplify.aws/lib/q/platform/react-native/)(오픈 소스 클라이언트 라이브러리)
+ [Amplify Studio](https://docs.amplify.aws/console/)(시각적 인터페이스)

## 에픽
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Amplify CLI 설치
<a name="install-aws-amplify-cli"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| Amplify CLI를 설치합니다. | Amplify CLI는 React 앱용 AWS 클라우드 서비스 생성을 위한 통합 툴체인입니다. Amplify CLI를 설치하려면, 다음을 실행합니다.<pre>npm install -g @aws-amplify/cli</pre>새 주요 버전이 출시되면 npm에서 알려줍니다. 그 경우 다음 명령을 사용하여 npm 버전을 업그레이드합니다.<pre>npm install -g npm@9.8.0</pre>여기서 9.8.0은 설치하려는 버전을 의미합니다. | 앱 개발자 | 

### React App 생성
<a name="create-a-react-app"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| React App을 생성합니다. | 새 AMI를 생성하려면 명령을 사용합니다.<pre>npx create-react-app amplify-react-application</pre>여기서 `ampify-react-application`(은)는 앱 이름입니다.앱이 성공적으로 생성되면 다음과 같은 메시지가 표시됩니다.<pre>Success! Created amplify-react-application</pre>다양한 하위 폴더가 있는 디렉터리가 React 앱용으로 생성됩니다. | 앱 개발자 | 
| 로컬 시스템에서 앱을 실행합니다. | 이전 단계에서 생성한 `amplify-react-application` 디렉터리로 이동하여 다음 명령을 실행합니다.<pre>amplify-react-application% npm start</pre>그러면 로컬 시스템에서 React 앱이 실행됩니다. | 앱 개발자 | 

### Amplify CLI 구성
<a name="configure-the-amplify-cli"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| AWS 계정에 연결되도록 Amplify를 구성합니다. | 다음 명령을 실행하여 Amplify를 구성합니다.<pre>amplify-react-application % amplify configure</pre>Amplify CLI는 다음 절차에 따라 AWS 계정에 대한 액세스 권한을 설정하도록 요청합니다.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)이 시나리오에서는 프로그래밍 방식 액세스 권한과 장기 보안 인증이 있는 IAM 사용자가 필요하며 이는 보안 위험을 내포합니다. 이 위험을 줄이려면 이러한 사용자에게 작업을 수행하는 데 필요한 권한만 제공하고 더 이상 필요하지 않을 경우 이러한 사용자를 제거하는 것이 좋습니다. 필요한 경우 액세스 키를 업데이트할 수 있습니다. 자세한 내용은 *IAM 사용 설명서*의 [액세스 키 업데이트](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey)를 참조하세요.이 절차는 터미널에 다음과 같이 표시됩니다.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>이 절차에 대한 자세한 내용은 Amplify Dev Center의 [설명서](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli)를 참조하십시오. | 일반 AWS, 앱 개발자 | 

### Amplify 초기화
<a name="initialize-amplify"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| Amplify를 초기화합니다. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | 앱 개발자, 일반 AWS | 

### 프런트엔드에 인증 추가
<a name="add-authentication-to-the-frontend"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| 인증 추가 | `amplify add <category>` 명령을 사용하여 사용자 로그인 또는 백엔드 API와 같은 기능을 추가할 수 있습니다. 이 단계에서는 명령을 사용하여 인증을 추가합니다.Amplify는 Amazon Cognito, 프런트엔드 라이브러리, 드롭인 인증자 UI 구성 요소를 포함한 백엔드 인증 서비스를 제공합니다. 기능에는 사용자 가입, 사용자 로그인, 다중 인증, 사용자 로그아웃, 암호 없는 로그인이 포함됩니다. Amazon, Google과 Facebook 같은 페더레이션된 자격 증명 공급자와 통합합으로써 사용자를 인증할 수도 있습니다. Amplify 인증 범주는 API, 분석 장치, 스토리지와 같은 다른 Amplify 범주와 원활하게 통합되므로 인증된 사용자 및 인증되지 않은 사용자에 대한 권한 부여 규칙을 정의할 수 있습니다.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | 앱 개발자, 일반 AWS | 

### App.js 파일 변경
<a name="change-the-app-js-file"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| App.js 파일을 변경합니다. | `src` 폴더에서 `App.js` 파일을 열고 수정합니다. 수정된 파일은 다음과 같아야 합니다.<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | 앱 개발자 | 
| React 패키지를 가져옵니다. | `App.js` 파일은 두 개의 React 패키지를 가져옵니다. 다음 명령을 사용하여 이 패키지를 설치합니다.<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | 앱 개발자 | 

### React 앱을 실행하고 인증을 확인합니다.
<a name="launch-the-react-app-and-check-authentication"></a>


| 작업 | 설명 | 필요한 기술 | 
| --- | --- | --- | 
| 앱을 실행합니다. | 로컬 머신에서 React 앱을 시작합니다.<pre>amplify-react-application1 % npm start</pre> | 앱 개발자, 일반 AWS | 
| 인증을 확인합니다. | 앱에 인증 파라미터를 입력하라는 프롬프트가 표시되는지 확인합니다. (이 예제에서는 이메일을 로그인 방법으로 구성했습니다.)프론트엔드 UI에 로그인 자격 증명을 입력하라는 프롬프트가 표시되고 계정을 생성할 수 있는 옵션이 있어야 합니다.또한 Amplify 빌드 프로세스를 구성하여 지속적 배포 워크플로의 부분으로서 백엔드를 추가할 수 있습니다. 하지만 이 패턴에서는 그러한 옵션을 다루지 않습니다. | 앱 개발자, 일반 AWS | 

## 관련 리소스
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [시작하기](https://docs.npmjs.com/getting-started)(npm 설명서)
+ [독립 실행형 계정 생성](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html)(계정 관리 설명서) 
+ [Amplify 설명서](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Amazon Cognito 설명서](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)