AWS SDK for JavaScript v2가 지원 종료에 도달했습니다. [AWS SDK for JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/)로 마이그레이션하실 것을 권장합니다. 마이그레이션 방법에 대한 자세한 내용은 해당 [공지 사항](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)을 참조하세요.

# 브라우저에서 Amazon S3 버킷의 사진 보기
<a name="s3-example-photos-view"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**이 브라우저 스크립트 코드 예제는 다음을 보여 줍니다.**
+ Amazon Simple Storage Service(S3) 버킷에서 사진 앨범을 생성하고 미인증 사용자가 사진을 볼 수 있도록 허용하는 방법

## 시나리오
<a name="s3-example-photos-view-scenario"></a>

이 예제에서는 단순한 HTML 페이지를 통해 사진 앨범의 사진을 볼 수 있는 브라우저 기반 애플리케이션이 제공됩니다. 사진 앨범은 사진이 업로드되는 Amazon S3 버킷에 있습니다.

![\[사진 앨범에 Amazon S3 버킷을 사용하는 브라우저 스크립트의 JavaScript\]](http://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


브라우저 스크립트는 SDK for JavaScript를 사용하여 Amazon S3 버킷과 상호 작용합니다. 스크립트는 Amazon S3 클라이언트 클래스의 [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property) 메서드를 사용하여 사진 앨범을 볼 수 있게 합니다.

## 사전 필수 작업
<a name="s3-example-photos-view-scenario-prerequisites"></a>

이 예제를 설정하고 실행하려면 먼저 다음 작업을 완료합니다.

**참고**  
이 예제에서는 Amazon S3 버킷과 Amazon Cognito 자격 증명 풀에 대해 동일한 AWS 리전을 사용해야 합니다.

### 버킷 생성
<a name="s3-example-photos-view-prereq-bucket"></a>

[Amazon S3 콘솔](https://console.aws.amazon.com/s3/)에서 앨범과 사진을 저장할 수 있는 Amazon S3 버킷을 생성합니다. 콘솔을 사용한 S3 버킷 생성에 대한 자세한 내용을 알아보려면 *Amazon Simple Storage Service 사용 설명서*의 [버킷 생성](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html)을 참조하세요.

S3 버킷 생성 시에는 다음을 수행합니다.
+ 후속 사전 필수 작업인 역할 권한 구성 시 사용할 수 있도록 버킷 이름을 메모해 둡니다.
+ 버킷을 생성할 AWS 지역을 선택합니다. 후속 사전 필수 작업인 자격 증명 풀 생성 시 Amazon Cognito 자격 증명 풀을 생성하는 데 사용할 리전과 동일한 리전이어야 합니다.
+ **Amazon Simple Storage Service 사용 설명서의 [웹 사이트 액세스에 대한 권한 설정](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html)을 따라 버킷 권한을 구성합니다.

### 자격 증명 풀 생성
<a name="s3-example-photos-view-prereq-idpool"></a>

*브라우저 스크립트에서 시작하기*의 [1단계: Amazon Cognito 자격 증명 풀 생성](getting-started-browser.md#getting-started-browser-create-identity-pool) 섹션을 참조하여 [Amazon Cognito 콘솔](https://console.aws.amazon.com/cognito/)에서 Amazon Cognito 자격 증명 풀을 생성합니다.

자격 증명 풀을 생성할 때는 **인증되지 않은** 자격 증명의 역할 이름과 자격 증명 풀의 이름을 메모해 둡니다.

### 역할 권한 구성
<a name="s3-example-photos-view-prereq-perms"></a>

앨범 및 사진 보기를 허용하려면 방금 생성한 자격 증명 풀의 IAM 역할에 권한을 추가해야 합니다. 다음과 같이 정책을 생성하며 시작합니다.

1. [IAM 콘솔](https://console.aws.amazon.com/iam/)을 엽니다.

1. 왼쪽 탐색 창에서 **정책**을 선택한 후 **정책 생성** 버튼을 선택합니다.

1. **JSON** 탭에 다음의 JSON 정의를 입력하되, *BUCKET\$1NAME*은 버킷 이름으로 대체합니다.

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement": [
         {
            "Effect": "Allow",
            "Action": [
               "s3:ListBucket"
            ],
            "Resource": [
               "arn:aws:s3:::BUCKET_NAME"
            ]
         }
      ]
   }
   ```

------

1. **정책 검토** 버튼을 선택하고 정책 이름을 지정한 다음 설명을 입력하고(원할 경우), **정책 생성** 버튼을 선택합니다.

   나중에 찾아서 IAM 역할에 연결할 수 있도록 이름을 메모해 둡니다.

정책이 생성되면 [IAM 콘솔](https://console.aws.amazon.com/iam/)로 돌아갑니다. 이전 사전 필수 작업인 자격 증명 풀 생성에서 Amazon Cognito가 생성한 **미인증** 자격 증명의 IAM 역할을 찾습니다. 방금 생성한 정책을 사용하여 이 자격 증명에 권한을 추가합니다.

이 작업의 워크플로는 일반적으로 *브라우저 스크립트에서 시작하기*의 [2단계: 생성된 IAM 역할에 정책 추가](getting-started-browser.md#getting-started-browser-iam-role) 섹션과 동일하지만 몇 가지 차이점이 있습니다.
+ Amazon Polly에 대한 정책이 아닌 방금 생성한 새로운 정책을 사용합니다.
+ **권한 연결** 페이지에서 새로운 정책을 빠르게 찾아 보려면 **필터 정책** 목록을 열고 **고객 관리형**을 선택합니다.

IAM 역할 생성에 관한 추가 정보는 *IAM 사용 설명서*의 [AWS 서비스에 대한 권한을 위임할 역할 생성](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) 섹션을 참조하세요.

### CORS 구성
<a name="s3-example-photos-view-cors-configuration"></a>

브라우저 스크립트가 Amazon 버킷에 액세스하려면 다음과 같이 [CORS 구성](cors.md#configuring-cors-s3-bucket)을 설정해야 합니다.

**중요**  
새 S3 콘솔에서 CORS 구성은 JSON이어야 합니다.

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ]
    }
]
```

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
```

------

### 앨범 생성 및 사진 업로드
<a name="s3-example-photos-view-create-albums"></a>

이 예제에서는 사용자가 이미 버킷에 있는 사진만 볼 수 있기 때문에 버킷에 앨범을 생성하고 그 앨범으로 사진을 업로드해야 합니다.

**참고**  
이 예제의 경우, 사진 파일의 파일명은 하나의 밑줄("\$1")로 시작해야 합니다. 이 문자는 나중에 필터링하는 데 중요합니다. 또한, 사진 소유자의 저작권을 존중해 주십시오.

1. [Amazon S3 콘솔](https://console.aws.amazon.com/s3/)에서 앞서 생성한 버킷을 엽니다.

1. **개요** 탭에서 **폴더 만들기** 버튼을 선택하여 폴더를 생성합니다. 이 예제에서는 폴더명을 "album1", "album2" 및 "album3"으로 지정합니다.

1. **album1**과 **album2**에 대해 폴더를 선택한 다음 다음과 같이 사진을 업로드합니다.

   1. **업로드** 버튼을 선택합니다.

   1. 사용할 사진 파일을 끌거나 선택하고 **다음**을 선택합니다.

   1. **퍼블릭 권한 관리**에서 **이 객체에 퍼블릭 읽기 액세스 권한을 부여함**을 선택합니다.

   1. **업로드** 버튼(왼쪽 아래 모서리)을 선택합니다.

1. **album3**은 비워둡니다.

## 웹페이지 정의
<a name="s3-example-photos-view-html"></a>

사진 보기 애플리케이션을 위한 HTML은 브라우저 스크립트가 보기 인터페이스를 생성하는 `<div>` 요소로 구성됩니다. 첫 번째 `<script>` 요소는 SDK를 브라우저 스크립트에 추가합니다. 두 번째 `<script>` 요소는 브라우저 스크립트 코드를 담는 외부 JavaScript 파일을 추가합니다.

이 예제에서는 파일명이 `PhotoViewer.js`로 지정되었으며 HTML 파일과 동일한 폴더에 위치합니다. [AWS SDK for JavaScript API 참조 가이드](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)의 SDK for JavaScript에 대한 API 참조 섹션에서 현재 SDK\$1VERSION\$1NUMBER를 찾을 수 있습니다.

```
<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>
```



## SDK 구성
<a name="s3-example-photos-view-config"></a>

`CognitoIdentityCredentials` 메서드를 호출하여 SDK를 구성하는 데 필요한 자격 증명을 획득합니다. Amazon Cognito 자격 증명 풀 ID를 제공해야 합니다. 그런 다음, `AWS.S3` 서비스 객체를 생성합니다.

```
// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}
```

이 예제에 있는 코드의 나머지 부분은 버킷의 앨범과 사진에 관한 정보를 수집 및 제공하기 위해 다음의 함수를 정의합니다.
+ `listAlbums`
+ `viewAlbum`

## 버킷에 있는 앨범 목록 표시
<a name="s3-example-photos-view-list-albums"></a>

버킷에 있는 모든 앨범의 목록을 표시하기 위해 애플리케이션의 `listAlbums` 함수는 `listObjects` 서비스 객체의 `AWS.S3` 메서드를 호출합니다. 이 함수는 `CommonPrefixes` 속성을 사용하므로 이 호출은 앨범으로 사용된 객체(폴더)만 반환합니다.

이 함수의 나머지 부분은 Amazon S3 버킷에서 앨범 목록을 가져오고 웹 페이지에 앨범 목록을 표시하는 데 필요한 HTML을 생성합니다.

```
// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          '<button style="margin:5px;" onclick="viewAlbum(\'' +
            albumName +
            "')\">",
          albumName,
          "</button>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml(["<p>Click on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}
```

## 앨범 보기
<a name="s3-example-photos-view-viewing-album"></a>

Amazon S3 버킷에 앨범의 콘텐츠를 표시하기 위해 애플리케이션의 `viewAlbum` 함수는 앨범 이름을 가져오고 해당 앨범에 대한 Amazon S3 키를 생성합니다. 그런 다음 이 함수는 `listObjects` 서비스 객체의 `AWS.S3` 메서드를 호출하여 앨범에 있는 모든 객체(사진)의 목록을 획득합니다.

이 함수의 나머지 부분은 앨범에 있는 객체 목록을 가져오고 웹 페이지에 사진을 표시하는 데 필요한 HTML을 생성합니다.

```
// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        "<br/>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>The following photos are present.</p>"
      : "<p>There are no photos in this album.</p>";
    var htmlTemplate = [
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      "<h2>",
      "End of Album: " + albumName,
      "</h2>",
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
    ];
    document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    document
      .getElementsByTagName("img")[0]
      .setAttribute("style", "display:none;");
  });
}
```