풀스택 서버리스: 리액트, AWS, 그래프QL을 이용한 최신 애플리케이션 개발

69

3

장

첫 번째 애플리케이션 만들기

item: { textAlign: 'left' },

p: { color: '#1890ff' }

}

이제 애플리케이션을 실행할 준비가 완료되었습니다! 터미널에서

start

명령어를 이용해서 애

플리케이션을 실행하겠습니다.

~ npm start

애플리케이션이 실행되면 [그림

3

-

4

]와 같이 화면에 현재 노트 리스트가 렌더링됩니다.

그림

3-4

노트 리스트

3.4.2

노트 생성(그래프

QL

뮤테이션)

이제 노트 리스트를 쿼리하는 방법을 알았으니 새 노트를

생성

하는 방법을 알아보겠습니다. 새

노트를 만들기 위해서는 다음 세 가지가 필요합니다.

1

.

새 노트 생성을 위한 양식

2

.

사용자가 양식에 입력할 때 상태를 변경하는 함수

3

.

API

를 호출하여 새 노트를 생성하고 생성된 새 노트를

UI

에 추가하는 함수

70

풀스택 서버리스

먼저 클라이언트에 대한 고유한 식별자를 만들 수 있도록

UUID

라이브러리를 가져오겠습니

다. 이는 이후 서브스크립션을 구현할 때 노트를 만든 클라이언트를 식별할 수 있도록 해줍니

다. 또한

Ant

Design

에서

Input

컴포넌트와 ...