AWS 시작하기

React 애플리케이션 구축

AWS Amplify를 사용하여 간단한 웹 애플리케이션 생성

모듈 4: GraphQL API 및 데이터베이스 추가

이 모듈에서는 Amplify CLI와 라이브러리를 사용하여 GraphQL API를 구성하고 앱에 추가합니다.

소개

인증을 적용한 앱을 생성하고 구성했으므로, 이제 API를 추가해보겠습니다.

이 모듈에서는 Amplify CLI와 라이브러리를 사용하여 앱에 API를 추가해봅니다. 여기서 생성할 API는 GraphQL API로, Amazon DynamoDB(NoSQL 데이터베이스) 기반의 AWS AppSync(관리형 GraphQL 서비스)를 활용합니다. GraphQL에 대한 자세한 소개는 이 페이지를 참조하십시오.

여기서 구축할 앱은 사용자가 메모를 작성하고 삭제하고 나열할 수 있는 Notes 앱입니다. 이 예제를 통해 일반적인 유형의 CRUD+L(생성, 읽기, 업데이트, 삭제 및 나열) 애플리케이션을 구축하는 방법을 살펴볼 수 있습니다.

배우게 될 내용

  • GraphQL API 생성 및 배포
  • API와 상호 작용하는 프런트 엔드 코드 작성

주요 개념

API – 여러 소프트웨어 중개자 간의 통신과 상호 작용을 지원하는 프로그래밍 인터페이스를 제공합니다.

GraphQL – 애플리케이션의 유형이 지정된 표현을 기반으로 쿼리 언어 및 서버 측 API 구현 방식입니다. 이 API 표현 방식은 GraphQL 유형 시스템을 기반으로 한 스키마를 사용하여 선언됩니다. GraphQL에 대해 자세히 알아보려면 이 페이지를 참조하십시오.

 완료 시간

15분

 사용되는 서비스

구현

  • GraphQL API 및 데이터베이스 생성

    a. 앱 디렉터리의 루트에서 다음 명령을 실행하여 앱에 GraphQL API를 추가합니다.

    amplify add api
    
    ? Please select from one of the below mentioned services: GraphQL
    ? Provide API name: notesapp
    ? Choose the default authorization type for the API: API Key
    ? Enter a description for the API key: demo
    ? After how many days from now the API key should expire: 7 (or your preferred expiration)
    ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
    ? Do you have an annotated GraphQL schema?  No
    ? Do you want a guided schema creation?  Yes
    ? What best describes your project: Single object with fields
    ? Do you want to edit the schema now? Yes

    b. 텍스트 편집기에서 GraphQL 스키마를 엽니다. amplify/backend/api/myapi/schema.graphql.

    다음 스키마가 포함된 파일을 업데이트합니다.

    type Note @model {
      id: ID!
      name: String!
      description: String
    }
    

    c. 파일을 저장합니다. 그런 다음 명령줄로 돌아가 Enter 키를 눌러서 API 구성 단계를 완료합니다.

  • API 배포

    이제 API가 로컬로 구성되었으므로 API를 배포할 차례입니다. API를 배포하려면 Amplify 푸시 명령을 실행합니다.

    amplify push --y

    이 명령은 다음 3가지 작업을 수행합니다.

    1. AppSync API 생성
    2. DynamoDB 테이블 생성
    3. src/graphql에 있는 폴더에 API를 쿼리하는 데 사용할 수 있는 로컬 GraphQL 작업 생성

    언제든지 다음 명령을 실행하여 계정의 GraphQL API를 볼 수 있습니다.

    amplify console api
    
    > Choose GraphQL
    

    언제든지 다음 명령을 실행하여 계정의 Amplify 앱을 볼 수 있습니다.

    amplify console
  • API와 상호 작용하는 프런트 엔드 코드 작성

    백엔드가 배포되었으므로, 이제 사용자가 메모를 생성하고 나열하고 삭제할 수 있도록 코드를 작성해보겠습니다.

    다음 코드로 src/App.js를 업데이트합니다.

    import React, { useState, useEffect } from 'react';
    import './App.css';
    import { API } from 'aws-amplify';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
    import { listNotes } from './graphql/queries';
    import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
    
    const initialFormState = { name: '', description: '' }
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [formData, setFormData] = useState(initialFormState);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        setNotes(apiData.data.listNotes.items);
      }
    
      async function createNote() {
        if (!formData.name || !formData.description) return;
        await API.graphql({ query: createNoteMutation, variables: { input: formData } });
        setNotes([ ...notes, formData ]);
        setFormData(initialFormState);
      }
    
      async function deleteNote({ id }) {
        const newNotesArray = notes.filter(note => note.id !== id);
        setNotes(newNotesArray);
        await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
      }
    
      return (
        <div className="App">
          <h1>My Notes App</h1>
          <input
            onChange={e => setFormData({ ...formData, 'name': e.target.value})}
            placeholder="Note name"
            value={formData.name}
          />
          <input
            onChange={e => setFormData({ ...formData, 'description': e.target.value})}
            placeholder="Note description"
            value={formData.description}
          />
          <button onClick={createNote}>Create Note</button>
          <div style={{marginBottom: 30}}>
            {
              notes.map(note => (
                <div key={note.id || note.name}>
                  <h2>{note.name}</h2>
                  <p>{note.description}</p>
                  <button onClick={() => deleteNote(note)}>Delete note</button>
                </div>
              ))
            }
          </div>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    이 앱은 세 가지 주요 기능을 제공합니다.

    1. fetchNotes - 이 함수는 API 클래스를 사용하여 GraphQL API로 쿼리를 전송하고 메모의 목록을 가져옵니다.
    2. createNote - 이 함수도 API 클래스를 사용하여 GraphQL API로 변형을 전송합니다. 이 함수에서는 양식 데이터를 사용하여 새 메모를 생성할 수 있도록 GraphQL 변형에 필요한 변수를 전달한다는 점이 다릅니다.
    3. deleteNote - 이 함수는 createNote와 마찬가지로 몇 가지 변수와 함께 GraphQL 변형을 전송하지만 메모를 생성하는 것이 아니라 삭제합니다.
  • 앱 실행

    앱을 테스트하려면 시작 명령을 실행합니다.

    npm start

결론

이제 Notes 앱이 생성되었습니다! AWS Amplify를 사용하여 앱에 GraphQL API를 추가하고 생성, 읽기 및 삭제 기능을 구성했습니다. 다음 모듈에서는 앱에 스토리지 서비스를 추가합니다.

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.

스토리지 추가