220407

👩🏻‍💻 Learn

uuid

겹치지 않는 랜덤한 아이디를 생성해주는 라이브러리로 maping 할 때 key 값을 주기 위해 사용한다.

yarn add uuid 설치 후
import { v4 as uuidv4 } from 'uuid' 로 import
key={uuidv4()} 로 사용해주면 된다,

Cloud & Storage

Cloud Provider
AWS
GCP
Azure
NHN Cloud
Naver Cloud

Storage Service
여러 컴퓨터들을 연결시켜 큰 용량을 담을 수 있게 만들어 둔 것을 말한다. 백엔드에 uploadFile api 요청, 받아온 이미지를 백엔드가 storage 에 저장하면 백엔드에 다운로드 받을 수 있는 주소를 주고, 이걸 다시 프론트에 돌려준다.

image 주소가 아닌 실제 이미지를 db에 저장하면 BLOB(bianry large object) 타입으로 저장된다. 용량이 금방 차기 때문에 storge 를 이용한다.

이미지 업로드

yarn add apollo-upload-client 설치
_app.ts 파일에 아래 부분 입력

import {ApolloLink} from "@apollo/client"
import {createUploadLink} from "apollo-upload-client"

const uplodLink = createUploadLink({
		uri : "백엔드 주소"
	})
const client = new ApolloClient({
		link : ApolloLink.from([//백엔드 주소가 담긴 변수]),
		cache : new inMemoryCache(),
	})

index.ts 파일 생성 후 아래와 같이 작성해준다

const UPLOAD_FILE = gql`
	mutation uploadFile($file:Upload!){
				uploadFile(file:$file){
					url
		}
	}
`

export default function ImageUploadPage() {
const [imageUrl, setImageUrl] = useState("")
const [uploadFile] = useMutation(UPLOAD_FILE)

const ImageUPloadPage = ()=>{
	const onchangeFile = async(event)=>{
		const ImgFile = event.target.files?.[0]
        
		try{ 
          const result = await uploadFile({ variables : {file : Imgfile} })
				console.log(result.data?.uploadFile.url)
			} catch(error){
				alert(error.message)
			}
		}
	}
    
    return (
      <div>
        <input type="file" onChange={onChangeFile} />
        <img src={`https://storage.googleapis.com/${imageUrl}`} />
      </div>
  );
}