Image Upload Process
- 일반적인 html 폼은 파일을 서버로 못 보낸다.
이미지를 저장할 공간이 필요하다.
이미지는 DB에 직접 넣지 않고 이미지를 다운받을 수 있는 주소를 넣는다.
실제 이미지는 다른 컴퓨터에 저장한다.
이미지는 용량이 굉장히 커서, 실제 이미지를 저장하는 컴퓨터는 사이즈가 매우 커야 한다.
image를 DB에 직접 넣지 않는 이유
데이터베이스는 각각의 타입이 있다. (text, integer ...)
이미지 주소가 문자열로 들어가면 text, 실제 이미지가 들어가면 blob 타입이 된다.(blob: 블랍)
blob
bynary large object 0과 1로 구성된 이진 데이터
사진을 0과 1로 변환해서 집어넣는다.
사진은 픽셀 단위로 이루어져있다.
각 픽셀은 rgb 색상을 가지고 있다. --> 색상 값에 해당하는 숫자로 변환한 숫자를 저장한다.
사이즈가 엄청 크다!
그래서 storage에 저장하고, 다운로드 할 수 있는 주소만 받아서 사용하는 방식을 쓰고 있다.
결론: 데이터베이스에 이미지를 직접 저장하는 방식은 사용하지 않는다.
이미지 업로드하기
1. 아폴로 업로드 라이브러리를 설치한다.
yarn add apollo-upload-client
yarn add --dev '@types/apollo-upload-client'
- _app.tsx 파일에서 apollo를 다시 세팅 한다.
추가한 부분 - import {createUploadLink} from 'apollo-upload-client';
class/_app.tsx
import {createUploadLink} from 'apollo-upload-client';
function MyApp({ Component, pageProps }: AppProps) {
const uploadLink = createUploadLink({
uri: "http://backend06.codebootcamp.co.kr/graphql",
})
const client = new ApolloClient({
link: ApolloLink.from([uploadLink as unknown as ApolloLink]),
cache: new InMemoryCache(),
});
return (
<Component {...pageProps} />
);
}
export default MyApp;
multiple을 쓰면 사진을 선택할 때 여러 개를 선택할 수 있다.
profile
즉 내가 이해한 내용은
이미지 업로드는, 인터넷에서 url 을 받아 적는대신, 이미지 업로드를 실제로 하는 것이다.
References
https://velog.io/@ko1586/Image-upload-process-%EC%96%B4%EB%96%BB%EA%B2%8C
