이번 시간에는 이미지 업로드 과정에 대해 알아보는 시간을 가지자.
여기서 중요한 것은 실제 이미지는 구글, 아마존 같은 Storage에 저장하고, 주소를 활용해 처리한다. 이미지는 DB에 직접 넣지 않고 이미지를 다운받을 수 있는 주소를 넣는다. 실제 이미지는 Storage에 저장한다.
이미지는 용량이 굉장히 커서, 실제 이미지를 저장하는 컴퓨터는 사이즈가 매우 커야 한다.
< 이미지 업로드 과정 >
-
Back-end에 파일을 업로드하는 API를 만든다.
-
브라우저에 파일 태그인 < input type="file" />를 만든다.
-
2의 태그를 통해 파일을 선택하면 파일 객체가 들어오고, 그 객체를 state나 변수에 저장할 수 있다.
-
파일을 uploadFile API에 보내면 Back-end에서 Storage로 파일을 전송한다.
-
Storage에서는 파일을 저장해주고 그 파일을 다운받을 수 있는 주소를 준다.
-
Back-end가 그 주소를 받아서 다시 프런트엔드에 돌려준다.
전달받은 주소를 img 태그 등에 사용하면 실제로 브라우저에서 해당 이미지를 볼 수 있게 된다. -
createBoard API에 writer, title, contents, image 주소를 넘긴다.
DB에 이미지 주소를 등록하고, fetchBoard하면 마찬가지로 image 주소를 받아와서 화면에 보여준다.
여기서 이미지를 DB에 직접 넣지 않는 이유는
데이터베이스는 각각의 타입이 있는데 (text, integer 등등) 이미지 주소가 문자열로 들어가면 text, 실제 이미지가 들어가면 blob 타입이 된다.
blob 타입은
bynary large object으로 0과 1로 구성된 이진 데이터
사진을 0과 1로 변환해서 집어넣는다.
사진은 픽셀 단위로 이루어져있다.
각 픽셀은 rgb 색상을 가지고 있는데, 색상 값에 해당하는 숫자로 변환한 숫자를 저장한다.
사진은 사이즈가 엄청
그래서 storage에 저장하고, 다운로드 할 수 있는 주소만 받아서 사용하는 방식을 쓰고 있다.
