[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 버전 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*)을 삭제합니다.