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

구현

• 스토리지 서비스 생성

  이미지 스토리지 기능을 추가하려면 Amplify 스토리지 카테고리를 사용합니다. 아래의 옵션은 대부분 기본값이 선택된 채로 두어도 되지만, 프롬프트를 계속 진행하려면 Enter 키를 누르기 전에 각 옵션에서 스페이스바를 눌러 생성/업데이트, 읽기 및 삭제 옵션을 개별적으로 선택해야 합니다.

  amplify add storage
  
  ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
  ? Provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? Provide bucket name: <your-unique-bucket-name>
  ? Who should have access: Auth users only
  ? What kind of access do you want for Authenticated users? create/update, read, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) no

  Code snippet copied

  복사
• GraphQL 스키마 업데이트

  다음으로, amplify/backend/api/notesapp/schema.graphql을 열고 다음 스키마로 업데이트합니다.

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

  Code snippet copied

  복사

  파일을 저장합니다.
  

• 스토리지 서비스 및 API 업데이트 배포

  스토리지 서비스를 로컬로 구성하고 GraphQL 스키마를 업데이트했으므로 이제 Amplify 푸시 명령을 실행하여 업데이트를 배포할 수 있습니다.
  

  amplify push --y

  Code snippet copied

  복사
• React 앱 업데이트

  백엔드가 업데이트되었으므로, React 앱을 업데이트하여 메모에 사용할 이미지를 업로드하고 표시하는 기능을 추가해보겠습니다. src/App.js를 열고 다음과 같이 변경합니다.

  a. 먼저 Amplify 가져오기에 스토리지 클래스와 이미지 구성 요소를 추가합니다.

  import { API, Storage } from 'aws-amplify';
  import {
    Button,
    Flex,
    Heading,
    Image,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from '@aws-amplify/ui-react';

  Code snippet copied

  복사

  b. 메모에 연결된 이미지가 있는 경우 이미지를 가져오도록 fetchNotes 함수를 업데이트합니다.
  

  async function fetchNotes() {
    const apiData = await API.graphql({ query: listNotes });
    const notesFromAPI = apiData.data.listNotes.items;
    await Promise.all(
      notesFromAPI.map(async (note) => {
        if (note.image) {
          const url = await Storage.get(note.name);
          note.image = url;
        }
        return note;
      })
    );
    setNotes(notesFromAPI);
  }

  Code snippet copied

  복사

  c. 메모에 이미지가 연결되어 있는 경우 로컬 이미지 어레이에 이미지를 추가하도록 createNote 함수를 업데이트합니다.

  async function createNote(event) {
    event.preventDefault();
    const form = new FormData(event.target);
    const image = form.get("image");
    const data = {
      name: form.get("name"),
      description: form.get("description"),
      image: image.name,
    };
    if (!!data.image) await Storage.put(data.name, image);
    await API.graphql({
      query: createNoteMutation,
      variables: { input: data },
    });
    fetchNotes();
    event.target.reset();
  }
  

  Code snippet copied

  복사

  d. 메모가 삭제될 때 스토리지에서 파일을 삭제하도록 deleteNote 함수를 업데이트합니다.

  async function deleteNote({ id, name }) {
    const newNotes = notes.filter((note) => note.id !== id);
    setNotes(newNotes);
    await Storage.remove(name);
    await API.graphql({
      query: deleteNoteMutation,
      variables: { input: { id } },
    });
  }

  Code snippet copied

  복사

  e. 반환 블록의 양식에 새 입력을 추가합니다.
  

  <View
    name="image"
    as="input"
    type="file"
    style={{ alignSelf: "end" }}
  />

  Code snippet copied

  복사

  f. 메모 어레이로 매핑할 때 이미지를 렌더링합니다(있는 경우).
  

  {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>
      {note.image && (
        <Image
          src={note.image}
          alt={`visual aid for ${notes.name}`}
          style={{ width: 400 }}
        />
      )}
      <Button variation="link" onClick={() => deleteNote(note)}>
        Delete note
      </Button>
    </Flex>
  ))}

  Code snippet copied

  복사

  g. 변경 사항을 적용하고 GitHub에 푸시합니다. 그런 다음 빌드가 완료될 때까지 기다렸다가 전체 앱을 라이브로 확인합니다.

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  복사
• 앱 실행

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

  npm start

  Code snippet copied

  복사

  이제 각 메모마다 이미지를 선택적으로 업로드할 수 있습니다.
  

• 리소스 삭제

  개별 서비스 제거

  개별 서비스를 제거하려면 Amplify 제거 명령을 사용하면 됩니다.

  amplify remove auth
  
  ? Choose the resource you would want to remove: <your-service-name>

  Code snippet copied

  복사

  그런 다음 Amplify 푸시 명령을 실행합니다.
  

  amplify push

  Code snippet copied

  복사

  전체 프로젝트 삭제

  프로젝트, 그리고 연결된 리소스를 삭제하려면 Amplify 삭제 명령을 실행하면 됩니다.

  amplify delete

  Code snippet copied

  복사