[AWS SDK for JavaScript V3 API 참조 안내서](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)는 AWS SDK for JavaScript 버전 3(V3)의 모든 API 작업을 자세히 설명합니다. 기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # AWS SDK for JavaScript 시작하기 JavaScript용 AWS SDK는 브라우저 또는 Node.js 환경의 웹 서비스에 대한 액세스를 제공합니다. 이 섹션에서는 이러한 각 JavaScript 환경에서 AWS SDK for JavaScript로 작업하는 방법을 보여주는 연습을 시작했습니다. **Topics** + [를 사용한 SDK 인증 AWS](getting-your-credentials.md) + [Node.js 시작하기](getting-started-nodejs.md) + [브라우저에서 시작하기](getting-started-browser.md) + [React Native에서 시작하기](getting-started-react-native.md) # 를 사용한 SDK 인증 AWS 를 사용하여 개발할 AWS 때 코드가 로 인증되는 방법을 설정해야 합니다 AWS 서비스. 환경 및 사용 가능한 액세스에 따라 다양한 방식으로 AWS 리소스에 대한 프로그래밍 방식 AWS 액세스를 구성할 수 있습니다. 인증 방법을 선택하고 SDK에 맞게 구성하려면AWS SDK 및 도구 참조 안내서**의 [Authentication and access](https://docs.aws.amazon.com/sdkref/latest/guide/access.html)를 참조하세요. 로컬에서 개발 중이고 고용주로부터 설정 인증 방법을 받지 않은 신규 사용자에게 설정하는 것이 좋습니다 AWS IAM Identity Center. 이 방법에는 구성이 쉽고 AWS 액세스 포털 AWS CLI 에 정기적으로 로그인하기 위한 설치가 포함됩니다. 이 방법을 선택하는 경우AWS SDK 및 도구 참조 안내서**의 [IAM Identity Center authentication](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html) 절차를 완료한 후 환경에 다음 요소가 포함되어야 합니다. + 애플리케이션을 실행하기 전에 AWS 액세스 포털 세션을 시작하는 데 AWS CLI사용하는 입니다. + SDK에서 참조할 수 있는 구성 값 세트가 포함된 `[default]` 프로필이 있는 [shared AWS`config` file](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html)입니다. 이 파일의 위치를 찾으려면 **AWS SDK 및 도구 참조 가이드에서 [공유 파일의 위치](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html)를 참조하세요. + 공유 `config` 파일은 [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html) 설정을 지정합니다. 이렇게 하면 SDK AWS 리전 가 AWS 요청에 사용하는 기본값이 설정됩니다. 이 리전은 사용할 리전이 지정되지 않은 SDK 서비스 요청에 사용됩니다. + SDK는 AWS에 요청을 보내기 전에 프로필의 [SSO token provider configuration](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile)을 사용하여 보안 인증을 얻습니다. IAM Identity Center 권한 세트에 연결된 IAM 역할인 `sso_role_name` 값은 애플리케이션에 AWS 서비스 사용되는에 대한 액세스를 허용합니다. 다음 샘플 `config` 파일은 SSO 토큰 공급자 구성으로 설정된 기본 프로필을 보여줍니다. 프로필의 `sso_session` 설정은 이름이 지정된 [`sso-session` section](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session)을 참조합니다. `sso-session` 섹션에는 AWS 액세스 포털 세션을 시작하는 설정이 포함되어 있습니다. ``` [default] sso_session = my-sso sso_account_id = 111122223333 sso_role_name = SampleRole region = us-east-1 output = json [sso-session my-sso] sso_region = us-east-1 sso_start_url = https://provided-domain.awsapps.com/start sso_registration_scopes = sso:account:access ``` AWS SDK for JavaScript v3는 IAM Identity Center 인증을 사용하기 위해 애플리케이션에 추가 패키지(예: `SSO` 및 `SSOOIDC`)를 추가할 필요가 없습니다. 이 보안 인증 공급자를 명시적으로 사용하는 방법에 대한 자세한 내용은 npm(Node.js 패키지 관리자) 웹 사이트에서 [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso)를 참조하세요. ## AWS 액세스 포털 세션 시작 에 액세스하는 애플리케이션을 실행하기 전에 SDK가 IAM Identity Center 인증을 사용하여 자격 증명을 확인하려면 활성 AWS 액세스 포털 세션이 AWS 서비스필요합니다. 구성된 세션 길이에 따라 결국 액세스가 만료되고 SDK에 인증 오류가 발생합니다. AWS 액세스 포털에 로그인하려면에서 다음 명령을 실행합니다 AWS CLI. ``` aws sso login ``` 지침에 따라 기본 프로필을 설정했다면 `--profile` 옵션으로 명령을 직접적으로 호출할 필요가 없습니다. SSO 토큰 공급자 구성에서 명명된 프로필을 사용하는 경우 `aws sso login --profile named-profile` 명령을 사용합니다. 활성 세션이 이미 있는지 선택적으로 테스트하려면 다음 AWS CLI 명령을 실행합니다. ``` aws sts get-caller-identity ``` 세션이 활성 상태인 경우 이 명령에 대한 응답은 공유 `config` 파일에 구성된 IAM Identity Center 계정 및 권한 집합을 보고합니다. **참고** 이미 활성 AWS 액세스 포털 세션이 있고를 실행하는 경우 `aws sso login`자격 증명을 제공할 필요가 없습니다. 로그인 프로세스에서 데이터에 대한 AWS CLI 액세스를 허용하라는 메시지가 표시될 수 있습니다. AWS CLI 는 SDK for Python을 기반으로 구축되므로 권한 메시지에 `botocore` 이름의 변형이 포함될 수 있습니다. ## 콘솔 로그인 자격 증명 사용 기존 AWS Management Console 로그인 자격 증명을 사용하여 AWS 서비스에 프로그래밍 방식으로 액세스할 수 있습니다. 브라우저 기반 인증 흐름 후는 AWS CLI 및 AWS SDK for JavaScript와 같은 로컬 개발 도구에서 작동하는 임시 자격 증명을 AWS 생성합니다. 이 기능은 AWS CLI 자격 증명을 구성하고 관리하는 프로세스를 간소화합니다. 시작하는 방법을 알아보려면 [콘솔 자격 증명을 사용하여 AWS 로컬 개발에 로그인](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html) 지침을 따르세요. **aws login** 명령을 실행하면 활성 콘솔 세션에서 선택하거나 브라우저 기반 인증 흐름을 통해 로그인할 수 있으며, 그러면 임시 자격 증명이 자동으로 생성됩니다. AWS SDK for JavaScript는 만료 5분 전에 자격 증명을 자동으로 새로 고치며 각 자격 증명 세트는 최대 12시간 동안 유효합니다. 자세한 내용은 [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials)을 참조하세요. ## 세부 인증 정보 인간 사용자(*인간 ID*라고도 함)는 애플리케이션의 사용자, 관리자, 개발자, 운영자 및 소비자입니다. AWS 환경 및 애플리케이션에 액세스하려면 자격 증명이 있어야 합니다. 조직의 구성원인 인간 사용자, 즉 개발자는 *작업 인력 ID*라고도 합니다. 에 액세스할 때 임시 자격 증명을 사용합니다 AWS. 인간 사용자의 자격 증명 공급자를 사용하여 임시 자격 증명을 제공하는 역할을 수임하여 AWS 계정에 대한 페더레이션 액세스를 제공할 수 있습니다. 중앙 액세스 관리를 위해 AWS IAM Identity Center (IAM Identity Center)을 사용하여 계정에 대한 액세스 권한과 해당 계정 내 권한을 관리하는 것이 좋습니다. 더 많은 대안을 보려면 다음을 참조하세요. + 모범 사례에 대해 자세히 알아보려면 **IAM 사용 설명서에서 [IAM의 보안 모범 사례](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html)를 참조하세요. + 단기 AWS 자격 증명을 생성하려면 *IAM 사용 설명서*의 [임시 보안 자격 증명을 참조하세요](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html). + 다른 AWS SDK for JavaScript V3 자격 증명 공급자에 대한 자세한 내용은 SDK 및 도구 참조 안내서의 [표준화된 자격 증명 공급자](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html)를 참조하세요. *AWS SDKs * # Node.js 시작하기 이 안내서에서는 NPM 패키지를 초기화하고 패키지에 서비스 클라이언트를 추가하며 JavaScript SDK를 사용하여 서비스 작업을 직접적으로 호출하는 방법을 보여줍니다. ## 시나리오 **다음을 수행하는 하나의 기본 파일을 사용하여 새 NPM 패키지를 생성합니다.** + Amazon Simple Storage Service 버킷 생성 + Amazon S3 버킷에 객체 배치 + Amazon S3 버킷의 객체 읽기 + 사용자가 리소스 삭제를 원하는지 확인 ## 사전 조건 예를 실행하려면 먼저 다음을 수행해야 합니다. + SDK 인증을 구성합니다. 자세한 내용은 [를 사용한 SDK 인증 AWS](getting-your-credentials.md) 단원을 참조하십시오. + 개발을 위해 [Node.js](https://nodejs.org/en/download)의 활성 LTS 버전을 사용하여 Node.js. AWS recommends를 설치합니다. ## 1단계: 패키지 구조 설정 및 클라이언트 패키지 설치 패키지 구조를 설정하고 클라이언트 패키지를 설치하려면 다음을 수행합니다. 1. 패키지를 포함할 새 `nodegetstarted` 폴더를 생성합니다. 1. 명령줄에서 새 폴더로 이동합니다. 1. 다음 명령을 실행하여 기본 `package.json` 파일을 생성합니다. ``` npm init -y ``` 1. 다음 명령을 실행하여 Amazon S3 클라이언트 패키지를 설치합니다. ``` npm i @aws-sdk/client-s3 ``` 1. `package.json` 파일에 `"type": "module"`을 추가합니다. 이렇게 하면 Node.js가 최신 ESM 구문을 사용하게 됩니다. 최종 `package.json`은 다음과 비슷해야 합니다. ``` { "name": "example-javascriptv3-get-started-node", "version": "1.0.0", "description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.", "main": "index.js", "scripts": { "test": "vitest run **/*.unit.test.js" }, "author": "Your Name", "license": "Apache-2.0", "dependencies": { "@aws-sdk/client-s3": "^3.420.0" }, "type": "module" } ``` ## 2단계: 필요한 가져오기 및 SDK 코드 추가 `nodegetstarted` 폴더의 `index.js`라는 파일에 다음 코드를 추가합니다. ``` // This is used for getting user input. import { createInterface } from "node:readline/promises"; import { S3Client, PutObjectCommand, CreateBucketCommand, DeleteObjectCommand, DeleteBucketCommand, paginateListObjectsV2, GetObjectCommand, } from "@aws-sdk/client-s3"; export async function main() { // A region and credentials can be declared explicitly. For example // `new S3Client({ region: 'us-east-1', credentials: {...} })` would //initialize the client with those settings. However, the SDK will // use your local configuration and credentials if those properties // are not defined here. const s3Client = new S3Client({}); // Create an Amazon S3 bucket. The epoch timestamp is appended // to the name to make it unique. const bucketName = `test-bucket-${Date.now()}`; await s3Client.send( new CreateBucketCommand({ Bucket: bucketName, }), ); // Put an object into an Amazon S3 bucket. await s3Client.send( new PutObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", Body: "Hello JavaScript SDK!", }), ); // Read the object. const { Body } = await s3Client.send( new GetObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", }), ); console.log(await Body.transformToString()); // Confirm resource deletion. const prompt = createInterface({ input: process.stdin, output: process.stdout, }); const result = await prompt.question("Empty and delete bucket? (y/n) "); prompt.close(); if (result === "y") { // Create an async iterator over lists of objects in a bucket. const paginator = paginateListObjectsV2( { client: s3Client }, { Bucket: bucketName }, ); for await (const page of paginator) { const objects = page.Contents; if (objects) { // For every object in each page, delete it. for (const object of objects) { await s3Client.send( new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }), ); } } } // Once all the objects are gone, the bucket can be deleted. await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName })); } } // Call a function if this file was run directly. This allows the file // to be runnable without running on import. import { fileURLToPath } from "node:url"; if (process.argv[1] === fileURLToPath(import.meta.url)) { main(); } ``` 코드 예는 [여기 GitHub에서](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js) 찾을 수 있습니다. ## 3단계: 예시 실행 **참고** 로그인하는 것을 잊지 마세요\$1 IAM Identity Center를 사용하여 인증하는 경우 명령을 사용하여 AWS CLI `aws sso login` 로그인해야 합니다. 1. `node index.js`를 실행합니다. 1. 버킷을 비우고 삭제할지 여부를 선택합니다. 1. 버킷을 삭제하지 않는 경우 나중에 수동으로 비우고 삭제해야 합니다. # 브라우저에서 시작하기 이 섹션에서는 브라우저에서 AWS SDK for JavaScript 버전 3(V3)을 실행하는 방법을 보여주는 예제를 안내합니다. **참고** 브라우저에서 V3를 실행하는 것은 버전 2(V2)와 약간 다릅니다. 자세한 내용은 [V3에서 브라우저 사용](welcome.md#v3_browsers) 단원을 참조하십시오. AWS SDK for JavaScript의 (V3)를 사용하는 다른 예는 섹션을 참조하세요[SDK for JavaScript(v3) 코드 예](javascript_code_examples.md). **이 웹 애플리케이션 예는 다음을 보여줍니다.** + 인증을 위해 Amazon Cognito를 사용하여 AWS 서비스에 액세스하는 방법. + AWS Identity and Access Management (IAM) 역할을 사용하여 Amazon Simple Storage Service(Amazon S3) 버킷의 객체 목록을 읽는 방법. **참고** 이 예제에서는 인증 AWS IAM Identity Center 에를 사용하지 않습니다. ## 시나리오 Amazon S3는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. Amazon S3를 사용하여 버킷이라는 컨테이너 내에 객체로 데이터를 저장할 수 있습니다. Amazon S3에 관한 자세한 내용은 [Amazon S3 사용 설명서](https://docs.aws.amazon.com/AmazonS3/latest/userguide/)를 참조하세요. 이 예는 Amazon S3 버킷에서 읽을 IAM 역할을 맡는 웹 앱을 설정하고 실행하는 방법을 보여줍니다. 이 예에서는 React 프런트엔드 라이브러리와 Vite 프런트엔드 도구를 사용하여 JavaScript 개발 환경을 제공합니다. 웹 앱은 Amazon Cognito 자격 증명 풀을 사용하여 AWS 서비스에 액세스하는 데 필요한 자격 증명을 제공합니다. 포함된 코드 예제는 웹 앱에서 AWS SDK for JavaScript를 로드하고 사용하기 위한 기본 패턴을 보여줍니다. ## 1단계: Amazon Cognito 자격 증명 풀 및 IAM 역할 생성 이 연습에서는 Amazon Cognito 자격 증명 풀을 생성해서 사용하여 Amazon S3 서비스용 웹 앱에 대한 미인증 액세스 권한을 제공합니다. 자격 증명 풀을 생성하면 인증되지 않은 게스트 사용자를 지원하는 AWS Identity and Access Management (IAM) 역할도 생성됩니다. 이 예에서는 작업에 집중할 수 있도록 미인증 사용자 역할만 사용해 작업합니다. 자격 증명 공급자 및 인증된 사용자에 대한 지원은 나중에 통합할 수 있습니다. Amazon Cognito 자격 증명 풀 추가에 관한 자세한 내용은 *Amazon Cognito 개발자 안내서*의 [자습서: 자격 증명 풀 생성](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) 단원을 참조하세요. **Amazon Cognito 자격 증명 풀 및 연결된 IAM 역할 생성 방법** 1. 에 로그인 AWS Management Console 하고 [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/) Amazon Cognito 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 **자격 증명 풀**을 선택합니다. 1. **자격 증명 풀 생성**을 선택합니다. 1. **자격 증명 풀 신뢰 구성**에서 사용자 인증을 위한 **게스트 액세스**를 선택합니다. 1. **권한 구성**에서 **새 IAM 역할 생성**을 선택하고 **IAM 역할 이름**에 이름(예: *getStartedRole*)을 입력합니다. 1. **속성 구성**에서 **자격 증명 풀 이름**에 이름(예: *getStartedPool*)을 입력합니다. 1. **검토 및 생성**에서 새 자격 증명 풀에 대한 선택 사항을 확인합니다. **편집**을 선택하여 마법사로 돌아가서 설정을 변경합니다. 완료하면 **자격 증명 풀 생성**을 선택합니다. 1. 새로 생성된 Amazon Cognito 자격 증명 풀의 **자격 증명 풀 ID** 및 **리전**을 기록해 둡니다. 이러한 값은 [4단계: 브라우저 코드 설정](#getting-started-browser-create-html)에서 *IDENTITY\$1POOL\$1ID* 및 *REGION*을 바꾸는 데 필요합니다. Amazon Cognito 자격 증명 풀을 생성하면 웹 앱에 필요한 Amazon S3에 대한 권한을 추가할 준비가 된 것입니다. ## 2단계: 생성된 IAM 역할에 정책 추가 웹 앱에서 Amazon S3 버킷에 대한 액세스를 활성화하려면 Amazon Cognito 자격 증명 풀(예: *getStartedPool*)에 대해 생성한 미인증 IAM 역할(예: *getStartedRole*)을 사용합니다. 이렇게 하려면 역할에 IAM 정책을 연결해야 합니다. IAM 역할 수정에 관한 자세한 내용은 *IAM 사용 설명서*의 [역할 권한 정책 수정](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) 단원을 참조하세요. **미인증 사용자와 연결된 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 자격 증명 풀을 생성하고 미인증 사용자의 IAM 역할에 Amazon S3에 대한 권한을 추가하면 Amazon S3 버킷을 추가하고 구성할 준비가 된 것입니다. ## 3단계: Amazon S3 버킷 및 객체 추가 이 단계에서는 예를 위해 Amazon S3 버킷 및 객체를 추가합니다. 또한 버킷에 대해 교차 오리진 리소스 공유(CORS)를 활성화합니다. Amazon S3 버킷 및 객체 생성에 관한 자세한 내용은 *Amazon S3 사용 설명서*의 [Amazon S3 시작하기](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html) 단원을 참조하세요. **CORS를 사용하여 Amazon S3 버킷 및 객체를 추가하는 방법** 1. 에 로그인 AWS Management Console 하고 [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/) Amazon S3 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 **버킷**을 선택한 다음, **버킷 생성**을 선택합니다. 1. [버킷 이름 지정 규칙](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html)(예: *getstartedbucket*)을 준수하는 버킷 이름을 입력하고 **버킷 생성**을 선택합니다. 1. 생성한 버킷을 선택한 다음, **객체** 탭을 선택합니다. 그런 다음, **업로드**를 선택합니다. 1. **파일 및 폴더(Files and folders)**에서 **파일 추가(Add files)**를 선택합니다. 1. 업로드할 파일을 선택한 후 **열기**를 선택합니다. 그런 다음, **업로드**를 선택하여 버킷에 객체 업로드 작업을 완료합니다. 1. 다음으로, 버킷의 **권한** 탭을 선택한 다음, **교차 오리진 리소스 공유(CORS)** 섹션에서 **편집**을 선택합니다. 다음 JSON을 입력합니다. ``` [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] ``` 1. **변경 사항 저장**을 선택합니다. Amazon S3 버킷과 객체를 추가했다면 브라우저 코드를 설정할 준비가 된 것입니다. ## 4단계: 브라우저 코드 설정 애플리케이션 예는 단일 페이지의 React 애플리케이션으로 구성되어 있습니다. 이 예를 위한 파일은 [여기 GitHub에서](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects) 찾을 수 있습니다. **애플리케이션 예를 설정하는 방법** 1. [Node.js](https://nodejs.org/en/download)를 설치합니다. 1. 명령줄에서 [AWS 코드 예 리포지토리](https://github.com/awsdocs/aws-doc-sdk-examples/)를 복제합니다. ``` git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git ``` 1. 다음과 같이 애플리케이션 예로 이동합니다. ``` cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/ ``` 1. 다음 명령을 실행하여 필수 패키지를 설치합니다. ``` npm install ``` 1. 다음으로, 텍스트 편집기에서 `src/App.tsx`를 열고 다음을 완료합니다. + *YOUR\$1IDENTITY\$1POOL\$1ID*를 [1단계: Amazon Cognito 자격 증명 풀 및 IAM 역할 생성](#getting-started-browser-create-identity-pool)에서 기록해 둔 Amazon Cognito 자격 증명 풀 ID로 바꿉니다. + 리전 값을 Amazon S3 버킷 및 Amazon Cognito 자격 증명 풀에 할당된 리전으로 바꿉니다. 두 서비스의 리전은 모두 동일해야 합니다(예: *us-east-2*). + *bucket-name*을 [3단계: Amazon S3 버킷 및 객체 추가](#getting-started-browser-create-s3-bucket)에서 생성한 버킷 이름으로 바꿉니다. 텍스트를 바꿨다면 `App.tsx` 파일을 저장합니다. 이제 웹 앱을 실행할 준비가 되었습니다. ## 5단계: 예 실행 **애플리케이션 예를 실행하는 방법** 1. 명령줄에서 다음과 같이 애플리케이션 예로 이동합니다. ``` cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/ ``` 1. 명령줄에서 다음 명령을 실행합니다. ``` npm run dev ``` Vite 개발 환경은 다음 메시지와 함께 실행됩니다. ``` VITE v4.3.9 ready in 280 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help ``` 1. 웹 브라우저에서 위에 나와 있는 URL(예: http://localhost:5173)로 이동합니다. 앱 예에서는 Amazon S3 버킷의 객체 파일 이름 목록을 보여줍니다. ## 정리 이 자습서를 진행하는 동안 생성한 리소스를 정리하려면 다음을 수행합니다. + [Amazon S3 콘솔](https://console.aws.amazon.com/s3/)에서, 생성한 객체와 버킷(예: *getstartedbucket*)을 삭제합니다. + [IAM 콘솔](https://console.aws.amazon.com/iam/home#/roles)에서, 역할 이름(예: *getStartedRole*)을 삭제합니다. + [Amazon Cognito 콘솔](https://console.aws.amazon.com/cognito/home#/identity)에서, 자격 증명 풀 이름(예: *getStartedPool*)을 삭제합니다. # 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"} />