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

127

6

장

서버리스 함수 심화 1

이제 서비스를 배포할 준비가 되었습니다.

~ amplify push

6.5.2

리액트 애플리케이션에서 이미지 업로드

다음으로

src

/

App

.

js

를 열고 아래 코드와 같이 수정하여 이미지 리스트와 이미지 선택 버튼

을 렌더링하겠습니다.

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

import { Storage } from 'aws-amplify'

import { v4 as uuid } from 'uuid'

import './App.css'

function App() {

const [images, setImages] = useState([])

useEffect(() => {

fetchImages()

}, [])

async function onChange(e) {

// 파일이 업로드되면 고유한 이름을 생성하고 Storage API를 사용하여 저장합니다.

const file = e.target.files[0]

const filetype = file.name.split('.')[file.name.split.length - 1]

await Storage.put(`${uuid()}.${filetype}`, file)

// 파일이 업로드되면 이미지 리스트를 가져옵니다.

fetchImages() ...