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

# Amplify 클라이언트를 사용하여 클라이언트 애플리케이션 빌드
<a name="building-a-client-app"></a>

모든 AWS AppSync GraphQL 클라이언트를 사용하여GraphQL API에 연결할 수 있지만 Amplify v6 클라이언트를 사용하는 것이 좋습니다. Amplify는 GraphQL API에 확실하게 형식이 맞춰진 클라이언트 SDK를 자동 생성할 뿐만 아니라 클라이언트 애플리케이션에서 실시간 데이터 및 향상된 GraphQL 쿼리 기능을 지원합니다. 웹 애플리케이션의 경우 Amplify는 JavaScript 클라이언트를 생성할 수 있습니다. 교차 플랫폼 또는 모바일 환경을 대상으로 하는 애플리케이션을 위해 Amplify는 Android, iOS 및 React Native를 지원합니다. 이러한 플랫폼의 클라이언트 코드 생성에 대해 더 알아보려면 Amplify [설명서](https://docs.amplify.aws/cli/graphql/client-code-generation/)를 참조하세요. 다음은 JavaScript React 애플리케이션으로 여정을 시작하는 방법에 대한 가이드입니다.

**참고**  
시작하기 전에 [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)과 [Amazon CLI](https://aws.amazon.com/cli/)를 모두 설치하고 구성해야 합니다. Amplify v6 클라이언트를 사용할 경우 [이 가이드를 따르세요](https://docs.amplify.aws/react/build-a-backend/graphqlapi/connect-to-api/#configure-the-default-authorization-mode).

시작하려면 다음을 수행하세요.

1. 로컬 컴퓨터에서 프로젝트 디렉터리로 이동합니다. 아래 명령을 사용하여 Amplify 라이브러리를 설치합니다.

   ```
   npm install aws-amplify
   ```

1. 구성 파일을 다운로드하여 프로젝트 폴더에 넣습니다. 구성 파일에는 일반적으로 일부 설정(엔드포인트, 리전, 권한 부여 모드 등)이 정의된 `config` 변수가 포함됩니다. 예를 들어 다음과 같이 표시될 수 있습니다.

   ```
   const config =  {
       API: {
           GraphQL: {
             endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
             region: 'us-west-2',
             defaultAuthMode: 'apiKey',
             apiKey: ''
           }
       }
   };
   
   export default config;
   ```

1. 코드에서 Amplify 라이브러리와 구성을 가져와 Amplify를 설정합니다.

   ```
   import { Amplify } from 'aws-amplify';
   import config from './aws-exports.js';
   
   Amplify.configure(config);
   ```

   또는 API 구성의 코드 조각을 사용하여 Amplify를 직접 설정합니다.

   ```
   import { Amplify } from 'aws-amplify';
   
   Amplify.configure({
     API: {
       GraphQL: {
         endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
         region: 'us-west-2',
         defaultAuthMode: 'apiKey',
         apiKey: ''
       }
     }
   });
   ```

1. Amplify 도구 체인을 사용하면 스키마를 기반으로 작업을 자동 생성할 수 있으므로 수동 스크립팅에 드는 수고를 덜 수 있습니다. 애플리케이션의 루트 디렉터리에서 다음 CLI 명령을 사용합니다.

   ```
   npx @aws-amplify/cli codegen add --apiId <id goes here> --region <region goes here>
   ```

   이렇게 하면 API 스키마가 다운로드되고 기본적으로 `src/graphql` 폴더에 클라이언트 도우미 코드가 생성됩니다. 모든 API 배포 후 다음 명령을 다시 실행하여 업데이트된 GraphQL 문 및 유형을 생성할 수 있습니다.

   ```
   npx @aws-amplify/cli codegen
   ```

1. 이제 Android, Swift, Flutter 및 JavaScript DataStore 모델을 생성할 수 있습니다. 다음 명령을 사용하여 스키마를 다운로드합니다.

   ```
   aws appsync get-introspection-schema --api-id <id goes here> --region <region goes here> --format SDL schema.graphql
   ```

   그런 다음, 애플리케이션의 루트 디렉터리에서 다음의 명령을 실행합니다.

   ```
   npx @aws-amplify/cli codegen models \
   --model-schema schema.graphql \
   --target [android|ios|flutter|javascript|typescript] \
   --output-dir ./
   ```