[AWS SDK for JavaScript V3 API 참조 안내서](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)는 AWS SDK for JavaScript 버전 3(V3)의 모든 API 작업을 자세히 설명합니다. 기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # React Native에서 시작하기 이 자습서에서는 [React Native CLI](https://reactnative.dev/docs/environment-setup)를 사용하여 React Native 앱을 생성하는 방법을 보여줍니다. ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **이 자습서에서는 다음을 보여줍니다.** + 프로젝트에서 사용하는 AWS SDK for JavaScript 버전 3(V3) 모듈을 설치하고 포함하는 방법. + Amazon Simple Storage Service(Amazon S3)에 연결하여 Amazon S3 버킷을 생성하고 삭제하는 코드를 작성하는 방법입니다. ## 시나리오 Amazon S3는 클라우드 서비스로, 언제 어디서나 웹에 원하는 양의 데이터를 저장하고 검색할 수 있습니다. React Native는 모바일 애플리케이션을 생성할 수 있는 개발 프레임워크입니다. 이 자습서에서는 Amazon S3에 연결하여 Amazon S3 버킷을 생성 및 삭제할 수 있는 React Native 앱을 생성하는 방법을 보여줍니다. 앱은 다음 AWS SDK for JavaScript APIs를 사용합니다. + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) 생성자 + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) 생성자 ## 사전 필수 작업 **참고** 다른 자습서나 기존 구성을 통해 다음 단계를 이미 완료한 경우 해당 단계를 건너뛰십시오. 이 단원에서는 이 자습서를 완료하는 데 필요한 최소 설정을 제공합니다. 이 내용을 전체 설정으로 간주해서는 안됩니다. 자세한 내용은 [JavaScript용 SDK 설정](setting-up.md) 단원을 참조하십시오. + 다음 도구를 설치합니다. + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + iOS에서 테스트하는 경우 [Xcode](https://developer.apple.com/xcode/) + Android에서 테스트하는 경우 [Android Studio](https://developer.android.com/studio/) + [React Native 개발 환경](https://reactnative.dev/docs/environment-setup) 설정 + 이러한 노드 TypeScript 예제를 실행하도록 프로젝트 환경을 설정하고 필요한 AWS SDK for JavaScript 및 타사 모듈을 설치합니다. [GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md)의 지침을 따릅니다. + AWS 서비스를 사용하여 개발할 AWS 때 코드가를 인증하는 방법을 설정해야 합니다. 자세한 내용은 [를 사용한 SDK 인증 AWS](getting-your-credentials.md) 단원을 참조하십시오. **참고** 이 예제에서 IAM 역할은 **AmazonS3FullAccess** 권한을 사용하도록 설정해야 합니다. ## 1단계: Amazon Cognito 자격 증명 풀 생성 이 연습에서는 Amazon Cognito ID 풀을 생성해서 사용하여 Amazon S3 서비스용 앱에 대한 미인증 액세스 권한을 제공합니다. 자격 증명 풀을 생성하면 두 개의 AWS Identity and Access Management (IAM) 역할도 생성됩니다. 하나는 자격 증명 공급자가 인증한 사용자를 지원하는 역할이고 다른 하나는 인증되지 않은 게스트 사용자를 지원하는 역할입니다. 이 연습에서는 인증되지 않은 사용자 역할만 사용해 작업하여 작업에 집중할 수 있도록 합니다. 자격 증명 공급자 및 인증된 사용자에 대한 지원은 나중에 통합할 수 있습니다. **Amazon Cognito ID 풀을 생성하려면** 1. 에 로그인 AWS Management Console 하고 Amazon Web Services 콘솔에서 Amazon Cognito [콘솔](https://console.aws.amazon.com/cognito/)을 엽니다. 1. 콘솔 열기 페이지에서 **ID 풀**을 선택합니다. 1. 다음 페이지에서 **Create new identity pool(새 자격 증명 풀 만들기)**을 선택합니다. **참고** 다른 ID 풀이 없는 경우 Amazon Cognito 콘솔에서는 이 페이지를 건너뛰고 대신 다음 페이지를 엽니다. 1. **자격 증명 풀 신뢰 구성**에서 사용자 인증을 위한 **게스트 액세스**를 선택합니다. 1. **권한 구성**에서 **새 IAM 역할 생성**을 선택하고 **IAM 역할 이름**에 이름(예: *getStartedReactRole*)을 입력합니다. 1. **속성 구성**에서 **ID 풀 이름**에 이름(예: *getStartedReactPool*)을 입력합니다. 1. **검토 및 생성**에서 새 자격 증명 풀에 대한 선택 사항을 확인합니다. **편집**을 선택하여 마법사로 돌아가서 설정을 변경합니다. 완료하면 **자격 증명 풀 생성**을 선택합니다. 1. 새로 생성된 ID 풀의 ID 풀 ID 및 리전을 기록해 둡니다. 이러한 값은 브라우저 스크립트에서 *리전* 및 *identityPoolId*를 바꾸는 데 필요합니다. Amazon Cognito ID 풀을 생성하면 React Native 앱에 필요한 Amazon S3에 대한 권한을 추가할 준비가 된 것입니다. ## 2단계: 생성된 IAM 역할에 정책 추가 Amazon S3에 대한 브라우저 스크립트 액세스를 활성화하여 Amazon S3 버킷을 생성하고 삭제하려면 Amazon Cognito ID 풀에 대해 생성된 인증되지 않은 IAM 역할을 사용합니다. 이 단계를 수행하려면 해당 역할에 IAM 정책을 추가해야 합니다. IAM 역할에 대한 자세한 내용은 *IAM 사용 설명서*의 [AWS 서비스에 대한 권한을 위임할 역할 생성을 참조하세요](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html). **미인증 사용자와 연결된 IAM 역할에 Amazon S3 정책을 추가하는 방법** 1. 에 로그인 AWS Management Console 하고 [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) IAM 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 **역할**을 선택합니다. 1. 수정하려는 역할의 이름(예: *getStartedRole*)을 선택한 다음, **권한** 탭을 선택합니다. 1. **권한 추가**를 선택한 다음, **정책 연결**을 선택합니다. 1. 이 역할의 **권한 추가** 페이지에서 **AmazonS3ReadOnlyAccess** 확인란을 찾아 선택합니다. **참고** 이 프로세스를 사용하여 모든 AWS 서비스에 대한 액세스를 활성화할 수 있습니다. 1. **권한 추가**를 선택합니다. Amazon Cognito ID 풀을 생성한 후 미인증 사용자의 IAM 역할에 Amazon S3에 대한 권한을 추가하면 앱을 빌드할 준비가 된 것입니다. ## 3단계: create-react-native-app을 사용하여 앱 생성 다음 명령을 실행하여 React Native 앱을 생성합니다. ``` npx react-native init ReactNativeApp --npm ``` ## 4단계: Amazon S3 패키지 및 기타 종속성 설치 프로젝트의 디렉터리 내에서 다음 명령을 실행하여 Amazon S3 패키지를 설치합니다. ``` npm install @aws-sdk/client-s3 ``` 이 명령은 프로젝트에 Amazon S3 패키지를 설치하고 `package.json`을 업데이트하여 Amazon S3를 프로젝트 종속성으로 나열합니다. [https://www.npmjs.com/](https://www.npmjs.com/)npm 웹 사이트에서 ‘@aws-sdk’를 검색하여 이 패키지에 대한 정보를 찾을 수 있습니다. 이러한 패키지와 연결된 코드는 프로젝트의 `node_modules` 하위 디렉터리에 설치됩니다. Node.js 패키지 설치에 대한 자세한 내용은 [로컬에서 패키지 다운로드 및 설치](https://docs.npmjs.com/downloading-and-installing-packages-locally) 및 [npm(Node.js 패키지 관리자) 웹 사이트의](https://www.npmjs.com/) [Node.js 모듈 생성](https://docs.npmjs.com/creating-node-js-modules) 섹션을 참조하세요. AWS SDK for JavaScript 다운로드 및 설치에 대한 자세한 내용은 섹션을 참조하세요[SDK for JavaScript 설치](setting-up.md#installing-jssdk). 인증에 필요한 다른 종속성을 설치합니다. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## 5단계: React Native 코드 작성 다음 코드를 `App.tsx`에 추가합니다. *identityPoolId* 및 *리전*을 Amazon S3 버킷이 생성될 ID 풀 ID 및 리전으로 바꿉니다. ``` import React, { useCallback, useState } from "react"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import "react-native-get-random-values"; import "react-native-url-polyfill/auto"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; const client = new S3Client({ // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region. region: "us-east-1", credentials: fromCognitoIdentityPool({ // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region. identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492", // Replace the value of 'region' with your Amazon Cognito Region. clientConfig: { region: "us-east-1" }, }), }); enum MessageType { SUCCESS = 0, FAILURE = 1, EMPTY = 2, } const App = () => { const [bucketName, setBucketName] = useState(""); const [msg, setMsg] = useState<{ message: string; type: MessageType }>({ message: "", type: MessageType.EMPTY, }); const createBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" created.`, type: MessageType.SUCCESS, }); } catch (e) { console.error(e); setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); const deleteBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" deleted.`, type: MessageType.SUCCESS, }); } catch (e) { setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); return ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />