풀 스택 React 애플리케이션 구축

구현

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

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

  amplify add api
  
  ? Select from one of the below mentioned services: GraphQL
  ? Here is the GraphQL API that we will create. Select a setting to edit or continue: Continue
  ? Choose a schema template: Single object with fields (e.g., "Todo" with ID, name, description)
  ? Do you want to edit the schema now? (Y/n) yes

  Code snippet copied

  복사

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

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

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
  }

  Code snippet copied

  복사

  c. 파일을 저장합니다.
  

• API 배포

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

  amplify push --y

  Code snippet copied

  복사

  이렇게 하면 다음 세 가지 작업이 수행됩니다.

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

  언제든지 계정의 GraphQL API를 보려면 다음 명령을 실행한 후 왼쪽 탐색 창에서 GraphQL API를 선택합니다.

  amplify console api
  
  > Choose GraphQL
  

  Code snippet copied

  복사

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

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

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

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

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

  import React, { useState, useEffect } from "react";
  import "./App.css";
  import "@aws-amplify/ui-react/styles.css";
  import { API } from "aws-amplify";
  import {
    Button,
    Flex,
    Heading,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from "@aws-amplify/ui-react";
  import { listNotes } from "./graphql/queries";
  import {
    createNote as createNoteMutation,
    deleteNote as deleteNoteMutation,
  } from "./graphql/mutations";
  
  const App = ({ signOut }) => {
    const [notes, setNotes] = useState([]);
  
    useEffect(() => {
      fetchNotes();
    }, []);
  
    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      setNotes(notesFromAPI);
    }
  
    async function createNote(event) {
      event.preventDefault();
      const form = new FormData(event.target);
      const data = {
        name: form.get("name"),
        description: form.get("description"),
      };
      await API.graphql({
        query: createNoteMutation,
        variables: { input: data },
      });
      fetchNotes();
      event.target.reset();
    }
  
    async function deleteNote({ id }) {
      const newNotes = notes.filter((note) => note.id !== id);
      setNotes(newNotes);
      await API.graphql({
        query: deleteNoteMutation,
        variables: { input: { id } },
      });
    }
  
    return (
      <View className="App">
        <Heading level={1}>My Notes App</Heading>
        <View as="form" margin="3rem 0" onSubmit={createNote}>
          <Flex direction="row" justifyContent="center">
            <TextField
              name="name"
              placeholder="Note Name"
              label="Note Name"
              labelHidden
              variation="quiet"
              required
            />
            <TextField
              name="description"
              placeholder="Note Description"
              label="Note Description"
              labelHidden
              variation="quiet"
              required
            />
            <Button type="submit" variation="primary">
              Create Note
            </Button>
          </Flex>
        </View>
        <Heading level={2}>Current Notes</Heading>
        <View margin="3rem 0">
          {notes.map((note) => (
            <Flex
              key={note.id || note.name}
              direction="row"
              justifyContent="center"
              alignItems="center"
            >
              <Text as="strong" fontWeight={700}>
                {note.name}
              </Text>
              <Text as="span">{note.description}</Text>
              <Button variation="link" onClick={() => deleteNote(note)}>
                Delete note
              </Button>
            </Flex>
          ))}
        </View>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  };
  
  export default withAuthenticator(App);

  Code snippet copied

  복사

  이 예의 앱에는 세 가지 주요 기능이 있습니다.

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

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

  npm start

  Code snippet copied

  복사