Create API 호출하기

기본적인 노트 생성 폼이 동작하니, 이제 API와 연결해 보겠습니다. S3 업로드는 조금 뒤에 진행할 예정입니다. 우리의 API는 AWS IAM으로 보호되며, Cognito User Pool이 인증 프로바이더로 사용됩니다. 다행히 Amplify가 로그인한 사용자의 세션을 활용해 이를 자동으로 처리해 줍니다.

노트 타입 정의하기

먼저 노트 객체를 위한 타입 정의를 만들어 보겠습니다. 타입을 저장할 새 디렉토리를 생성합니다.

packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ mkdir src/types

src/types/note.ts 파일을 생성하고 다음 내용을 추가하세요.

export interface NoteType {
  noteId?: string;
  content: string;
  createdAt?: string;
  attachment?: string;
  attachmentURL?: string;
}

Create API 호출하기

이제 src/containers/NewNote.tsx의 handleSubmit 함수를 다음 코드로 교체합니다.

function createNote(note: NoteType) {
  return API.post("notes", "/notes", {
    body: note,
  });
}

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();

  if (file.current && file.current.size > config.MAX_ATTACHMENT_SIZE) {
    alert(
      `파일 크기가 ${config.MAX_ATTACHMENT_SIZE / 1000000} MB보다 작아야 합니다.`
    );
    return;
  }

  setIsLoading(true);

  try {
    await createNote({ content });
    nav("/");
  } catch (e) {
    onError(e);
    setIsLoading(false);
  }
}

그리고 src/containers/NewNote.tsx 파일 상단에 다음 코드를 추가하여 API 모듈을 포함시킵니다.

import { API } from "aws-amplify";
import { NoteType } from "../types/note";
import { onError } from "../lib/errorLib";

이 함수들은 몇 가지 작업을 수행합니다.

1. createNote에서 /notes로 POST 요청을 보내고 노트 객체를 전달합니다. API.post() 메서드의 첫 두 인자는 notes와 /notes입니다. 이는 AWS Amplify 설정 챕터에서 이 API 세트를 notes라고 명명했기 때문입니다.

2. 현재 노트 객체는 단순히 노트의 내용만 포함합니다. 지금은 첨부 파일 없이 노트를 생성합니다.

3. 마지막으로 노트가 생성된 후 홈페이지로 리디렉션합니다.

이제 브라우저로 전환하여 폼을 제출하면 홈페이지로 성공적으로 이동할 것입니다.

다음으로 파일을 S3에 업로드하고 노트에 첨부 파일을 추가해 보겠습니다.