구현

• 스토리지 서비스 생성

  이미지 스토리지 기능을 추가하려면 Amplify 스토리지 카테고리를 사용합니다.
  

  amplify add storage
  
  ? Please select from one of the below mentioned services: Content
  ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? Please 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, read, update, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? N

• GraphQL 스키마 업데이트

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

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

  파일을 저장합니다.
  

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

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

  amplify push --y

• React 앱 업데이트

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

  a. 먼저, Amplify 가져오기에 스토리지 클래스를 추가합니다.

  import { API, Storage } from 'aws-amplify';

  b. 기본 앱 함수에서 이미지 업로드를 처리할 새 onChange 함수를 생성합니다.
  

  async function onChange(e) {
    if (!e.target.files[0]) return
    const file = e.target.files[0];
    setFormData({ ...formData, image: file.name });
    await Storage.put(file.name, file);
    fetchNotes();
  }
  

  c. 메모에 연결된 이미지가 있는 경우 이미지를 가져오도록 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 image = await Storage.get(note.image);
        note.image = image;
      }
      return note;
    }))
    setNotes(apiData.data.listNotes.items);
  }
  

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

  async function createNote() {
    if (!formData.name || !formData.description) return;
    await API.graphql({ query: createNoteMutation, variables: { input: formData } });
    if (formData.image) {
      const image = await Storage.get(formData.image);
      formData.image = image;
    }
    setNotes([ ...notes, formData ]);
    setFormData(initialFormState);
  }
  

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

  <input
    type="file"
    onChange={onChange}
  />
  

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

  {
    notes.map(note => (
      <div key={note.id || note.name}>
        <h2>{note.name}</h2>
        <p>{note.description}</p>
        <button onClick={() => deleteNote(note)}>Delete note</button>
        {
          note.image && <img src={note.image} style={{width: 400}} />
        }
      </div>
    ))
  }
  

• 앱 실행

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

  npm start

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

• 리소스 삭제

  개별 서비스 제거

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

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

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

  amplify push

  전체 프로젝트 삭제

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

  amplify delete