기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 웹 앱 클라이언트 구성
<a name="scorekeep-client"></a>

**참고**  
X-Ray SDK/데몬 유지 관리 공지 - 2026년 2월 25일에 AWS X-Ray SDKs/데몬은 유지 관리 모드로 전환되며, 여기서 AWS 는 보안 문제만 해결하도록 X-Ray SDK 및 데몬 릴리스를 제한합니다. 지원 일정에 대한 자세한 내용은 [X-Ray SDK 및 데몬 지원 타임라인](xray-sdk-daemon-timeline.md) 섹션을 참조하세요. OpenTelemetry로 마이그레이션하는 것이 좋습니다. OpenTelemetry로 마이그레이션하는 방법에 대한 자세한 내용은 [X-Ray 계측에서 OpenTelemetry 계측으로 마이그레이션](https://docs.aws.amazon.com/xray/latest/devguide/xray-sdk-migration.html)을 참조하세요.

[https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito) 브랜치에서는 Scorekeep이 Amazon Cognito를 사용하므로 사용자가 계정을 생성하고 해당 계정으로 로그인하여 Amazon Cognito 사용자 풀에서 자신의 사용자 정보를 검색할 수 있습니다. 사용자가 로그인하면 Scorekeep은 Amazon Cognito 자격 증명 풀을 사용하여에서 사용할 임시 AWS 자격 증명을 가져옵니다 AWS SDK for JavaScript.

자격 증명 풀은 로그인한 사용자가 추적 데이터를 AWS X-Ray에 쓸 수 있도록 구성되어 있습니다. 웹 앱은 이러한 자격 증명을 사용하여 로그인한 사용자의 ID, 브라우저 경로 및 Scorekeep API 호출에 대한 클라이언트의 보기를 레코딩합니다.

이러한 작업의 대부분은 이름이 `xray`인 서비스 클래스에서 수행됩니다. 이 서비스 클래스는 필수 식별자 생성, 진행 중인 세그먼트 생성, 세그먼트 종료, X-Ray API에 세그먼트 문서 전송 등의 작업을 위한 메서드를 제공합니다.

**Example [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/xray.js](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/xray.js)— 세그먼트 기록 및 업로드**  

```
...
  service.beginSegment = function() {
    var segment = {};
    var traceId = '1-' + service.getHexTime() + '-' + service.getHexId(24);

    var id = service.getHexId(16);
    var startTime = service.getEpochTime();

    segment.trace_id = traceId;
    segment.id = id;
    segment.start_time = startTime;
    segment.name = 'Scorekeep-client';
    segment.in_progress = true;
    segment.user =  sessionStorage['userid'];
    segment.http = {
      request: {
        url: window.location.href
      }
    };

    var documents = [];
    documents[0] = JSON.stringify(segment);
    service.putDocuments(documents);
    return segment;
  }

  service.endSegment = function(segment) {
    var endTime = service.getEpochTime();
    segment.end_time = endTime;
    segment.in_progress = false;
    var documents = [];
    documents[0] = JSON.stringify(segment);
    service.putDocuments(documents);
  }

  service.putDocuments = function(documents) {
    var xray = new AWS.XRay();
    var params = {
      TraceSegmentDocuments: documents
    };
    xray.putTraceSegments(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        console.log(data);
      }
    })
  }
```

이러한 메서드는 웹 앱이 Scorekeep API를 호출하는 데 사용하는 리소스 서비스의 헤더 및 `transformResponse` 함수에서 호출됩니다. API가 생성하는 세그먼트와 동일한 추적에 클라이언트 세그먼트를 포함하려면 웹 앱이 [추적 헤더](xray-concepts.md#xray-concepts-tracingheader)(`X-Amzn-Trace-Id`)에 추적 ID와 세그먼트 ID를 포함시켜야 하며, 이 헤더는 X-Ray SDK가 읽을 수 있어야 합니다. 구성된 Java 애플리케이션이 이 헤더와 함께 요청을 수신하면 Java용 X-Ray SDK는 동일한 추적 ID를 사용하고 웹 앱 클라이언트의 세그먼트를 해당 세그먼트의 상위로 만듭니다.

**Example [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/services.js](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/services.js) – Angular 리소스 호출에 대한 세그먼트 레코딩 및 추적 헤더 쓰기**  

```
var module = angular.module('scorekeep');
module.factory('SessionService', function($resource, api, XRay) {
  return $resource(api + 'session/:id', { id: '@_id' }, {
    segment: {},
    get: {
      method: 'GET',
      headers: {
        'X-Amzn-Trace-Id': function(config) {
          segment = XRay.beginSegment();
          return XRay.getTraceHeader(segment);
        }
      },
      transformResponse: function(data) {
        XRay.endSegment(segment);
        return angular.fromJson(data);
      },
    },
...
```

생성된 트레이스 맵에는 웹 앱 클라이언트용 노드가 포함됩니다.

![\[\]](http://docs.aws.amazon.com/ko_kr/xray/latest/devguide/images/scorekeep-servicemap-client.png)


웹 앱의 세그먼트를 포함하는 트레이스는 사용자가 브라우저에서 보는 URL을 표시합니다(`/#/`로 시작하는 경로). 사용자는 클라이언트 구성 없이 웹 앱이 호출하는 API 리소스의 URL을 가져오기만 합니다(`/api/`로 시작하는 경로).

![\[\]](http://docs.aws.amazon.com/ko_kr/xray/latest/devguide/images/scorekeep-traces-client.png)