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>
);
}
Author And Source
이 문제에 관하여(220407), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imnamesol/220407저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)