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

64

풀스택 서버리스

이제 그래프

QL

API

가 배포되고 제대로 작동한다는 것을 알았으므로 몇 가지 프런트엔드 코드

를 작성해보겠습니다.

3.4

리액트 애플리케이션 구축

가장 먼저

src

/

aws

-

exports

.

js

에 있는

Amplify

리소스를 인식하도록 리액트 애플리케이션

을 설정해야 합니다. 이를 위해

src

/

index

.

js

를 열고 마지막

import

아래에 다음을 추가하겠

습니다.

import Amplify from 'aws-amplify'

import config from './aws-exports'

Amplify.configure(config)

3.4.1

노트 리스트(그래프

QL

쿼리)

애플리케이션 설정이 완료되었으니 이제 그래프

QL

API

를 호출할 수 있습니다. 첫 번째로 모

든 노트를 나열하는 쿼리를 구현하겠습니다.

쿼리가 리스트를 반환하고 모든 항목에 대해 노트 이름, 설명, 완료 여부를 표시합니다.

먼저,

src

/

App

.

js

파일을 다음과 같이 수정하겠습니다.

import React, { useEffect, useReducer } from 'react'

import { API } from 'aws-amplify'

import { List } from 'antd'

import 'antd/dist/antd.css'

import { listNotes } from './graphql/queries' ...