기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # Amplify를 사용하여 서버리스 React Native 모바일 앱 구축 *Deekshitulu Pentakota, Amazon Web Services* ## 요약 이 패턴은 Amplify 및 다음 서비스를 사용하여 React Native 모바일 앱을 위한 서버리스 백엔드를 생성하는 방법을 보여줍니다. + AppSync + Amazon Cognito + Amazon DynamoDB Amplify를 사용하여 앱의 백엔드를 구성하고 배포한 후 Amazon Cognito는 앱 사용자를 인증하고 앱 액세스를 승인합니다. 그러면 AppSync가 프런트엔드 앱 및 백엔드 DynamoDB 테이블과 상호 작용하여 데이터를 생성하고 가져옵니다. **참고** 이 패턴은 간단한 “TodoList” 앱을 예로 사용하지만 비슷한 절차를 사용하여 모든 React Native 모바일 앱을 만들 수 있습니다. ## 사전 조건 및 제한 사항 **사전 조건 ** + 활성 상태의 계정 + [Amplify 명령줄 인터페이스(Amplify CLI](https://docs.amplify.aws/cli/start/install/)), 설치 및 구성 + XCode(모든 버전) + Microsoft Visual Studio(모든 버전, 모든 코드 편집기, 모든 텍스트 편집기) + Amplify에 대한 지식 + Amazon Cognito에 대한 지식 + AppSync에 대한 지식 + DynamoDB에 대한 지식 + Node.js에 대한 지식 + npm에 대한 지식 + React 및 React Native에 대한 지식 + JavaScript 및 ECMAScript 6(ES6) 에 대한 지식 + GraphQL에 대한 지식 ## 아키텍처 다음 다이어그램은 클라우드에서 React Native 모바일 앱의 백엔드를 실행하기 위한 예제 아키텍처를 보여줍니다. ![AWS 서비스로 React Native 모바일 앱을 실행하기 위한 워크플로.](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) 다이어그램은 다음 아키텍처를 보여줍니다: 1. Amazon Cognito는 앱 사용자를 인증하고 앱 액세스를 승인합니다. 1. 데이터를 생성하고 가져오기 위해 AppSync는 GraphQL API를 사용하여 프런트엔드 앱 및 백엔드 DynamoDB 테이블과 상호 작용합니다. ## 도구 **서비스** + [Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)는 프런트엔드 웹 및 모바일 개발자가 에서 풀스택 애플리케이션을 빠르고 쉽게 구축할 수 있도록 특별히 제작된 도구 및 기능 세트입니다. + [AppSync](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html)는 애플리케이션 개발자가 Amazon DynamoDB, Lambda, HTTP API를 비롯한 여러 소스의 데이터를 결합할 수 있도록 확장 가능한 GraphQL 인터페이스를 제공합니다. + [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)는 웹 및 모바일 앱에 대한 인증, 권한 부여 및 사용자 관리를 제공합니다. + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html)는 빠르고 예측 가능하고 확장 가능한 성능을 제공하는 완전 관리형 NoSQL 데이터베이스 서비스입니다. **코드** 이 패턴에 사용되는 샘플 애플리케이션의 코드는 GitHub [aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) 리포지토리에서 확인할 수 있습니다. 샘플 파일을 사용하려면 이 패턴의 **에픽** 섹션에 있는 지침을 따르십시오. ## 에픽 ### React Native 앱 생성 및 실행 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | React Native 개발 환경을 설정합니다. | 자세한 지침은 React Native 문서의 [개발 환경 설정](https://reactnative.dev/docs/next/environment-setup)을 참조하십시오. | 앱 개발자 | | iOS 시뮬레이터에서 TodoList React Native 모바일 앱을 만들고 실행합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 앱 개발자 | ### 앱의 새 백엔드 환경을 초기화합니다. | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | Amplify에서 앱을 지원하는 데 필요한 백엔드 서비스를 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)이 패턴에서 사용되는 TodoList 앱 설정의 경우 다음 예제 구성을 적용하십시오.
**React Native Amplify 앱 구성 설정 예시**
? Name: ToDoListAmplify

? Environment: dev

? Default editor: Visual Studio Code

? App type: javascript

? Javascript framework: react-native

? Source Directory Path: src

? Distribution Directory Path: /

? Build Command: npm run-script build

? Start Command: npm run-script start

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use: default

자세한 내용은 Amplify 개발 센터 설명서에서 [새 Amplify 백엔드 만들기](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend)를 참조하십시오.`amplify init` 명령은 [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)을 사용하여 다음 리소스를 프로비저닝합니다. [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 앱 개발자 | ### Amplify React Native 앱에 Amazon Cognito 인증 추가 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | Amazon Cognito 인증 서비스를 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)이 패턴에서 사용되는 TodoList 앱 설정의 경우 다음 예제 구성을 적용하십시오.
**인증 서비스 구성 설정 예시**
? Do you want to use the default authentication and security configuration? \ 
Default configuration
 
? How do you want users to be able to sign in? \ 
Username 

? Do you want to configure advanced settings? \ 
No, I am done
`amplify add auth` 명령은 프로젝트의 루트 디렉터리 내 로컬 폴더(**amplify**)에 필요한 폴더, 파일 및 종속성 파일을 만듭니다. 이 패턴에서 사용되는 TodoList 앱 설정의 경우 이 용도로 **aws-exports.js** 파일이 생성됩니다. | 앱 개발자 | | Amazon Cognito 서비스를 클라우드에 배포합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)프로젝트에 배포된 서비스를 보려면 다음 명령을 실행하여 Amplify 콘솔로 이동합니다.`amplify console` | 앱 개발자 | | React Native에 필요한 Amplify 라이브러리와 iOS용 CocoaPods 종속 프로그램을 설치합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 앱 개발자 | | Amplify 서비스를 가져오고 구성합니다. | 앱의 진입점 파일(예: ** App.js**)에서 다음 코드 줄을 입력하여 Amplify 서비스의 구성 파일을 가져오고 로드합니다.
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
앱의 진입점 파일에서 Amplify 서비스를 가져온 후 오류가 발생하면 앱을 중지하십시오. 그런 다음 XCode를 열고 프로젝트의 iOS 폴더에서 **ToDoListAmplify.xcworkspace** 작업 영역을 선택하고 앱을 실행합니다. | 앱 개발자 | | withAuthenticator 고차 구성 요소(HOC)를 사용하도록 앱의 진입점 파일을 업데이트하십시오. | `withAuthenticator` HOC는 단 몇 줄의 코드만으로 앱의 로그인, 가입 및 비밀번호 분실 워크플로를 제공합니다. 자세한 내용은 Amplify Dev 센터의 [옵션 1: 사전 빌드 UI 구성 요소 사용](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components)을 참조하십시오. 또한 React 설명서에 있는 [고차 컴포넌트](https://reactjs.org/docs/higher-order-components.html)도 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**withAuthenticator HOC 코드 예제**
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
import { withAuthenticator } from 'aws-amplify-react-native';


const App = () => {
  return null;
};


export default withAuthenticator(App);
iOS 시뮬레이터에서 앱은 Amazon Cognito 서비스에서 제공하는 로그인 화면을 표시합니다. | 앱 개발자 | | 인증 서비스 설정을 테스트하십시오. | iOS 시뮬레이터에서 다음을 수행합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)[Amazon Cognito 콘솔](https://console.aws.amazon.com/cognito/)을 열고 **ID 풀**에 새 사용자가 생성되었는지 여부를 확인할 수도 있습니다. | 앱 개발자 | ### AppSync API와 DynamoDB 데이터베이스를 앱에 연결 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | AppSync API 및 DynamoDB 데이터베이스를 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)이 패턴에서 사용되는 TodoList 앱 설정의 경우 다음 예제 구성을 적용하십시오.
**API 및 데이터베이스 구성 설정 예시**
? Please select from one of the below mentioned services: \ 
GraphQL 

? Provide API name: todolistamplify

? Choose the default authorization type for the API \ 
Amazon Cognito User Pool

Do you want to use the default authentication and security configuration

? Default configuration How do you want users to be able to sign in? \ 
Username

Do you want to configure advanced settings? \ 
No, I am done.

? Do you want to configure advanced settings for the GraphQL API \ 
No, I am done.

? Do you have an annotated GraphQL schema? \ 
No

? Choose a schema template: \ 
Single object with fields (e.g., "Todo" with ID, name, description)

? Do you want to edit the schema now? \ 
Yes

**예제 GraphQL 스키마**
 type Todo @model {
   id: ID!
   name: String!
   description: String
}
| 앱 개발자 | | AppSync API를 배포합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)이 패턴에서 사용되는 TodoList 앱 설정의 경우 다음 예제 구성을 적용하십시오.
**AppSync API 구성 설정의 예**다음 구성은 AppSync에 GraphQL API를 생성하고 Dynamo DB에 **Todo** 테이블을 생성합니다.
 ? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - \ 
queries, mutations and subscriptions Yes
? Enter maximum statement depth \
[increase from default if your schema is deeply nested] 2
| 앱 개발자 | | 앱의 프론트엔드를 AppSync API에 연결합니다. | 이 패턴으로 제공된 예제 TodoList 앱을 사용하려면 [aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) GitHub 리포지토리의 **App.js** 파일에서 코드를 복사하십시오. 그런 다음 예제 코드를 로컬 환경에 통합하십시오.
리포지토리의 **App.js** 파일에 제공된 예제 코드는 다음을 수행합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 앱 개발자 | ## 관련 리소스 + [Amplify](https://aws.amazon.com/amplify/) + [Amazon Cognito](https://aws.amazon.com/cognito/) + [AppSync](https://aws.amazon.com/appsync/) + [Amazon DynamoDB](https://aws.amazon.com/dynamodb/) + [React](https://reactjs.org/) (React 문서)