Day 19) 1. 이미지 저장 과정을 알려주세요! => image-Process 2. 이미지? 데이터베이스에 저장하면 안돼?!=> Clound-Storage 3. 그 이미지는 문제가 있어요!

오늘 목표

1교시 포트폴리오 리뷰

파이어베이스 페이지

uuidv4 는 키값이 없을 때 사용하는 값

uuid를 import 해줘야한다.

타입스크립트도 설치

2교시

스토리지: 용량이 큰 컴퓨터

이미지, 동영상 저장을 시키기 위해
다른 회사에서 제공해주는 컴퓨터( 구글을 사용 )

1. <input type = "file /> 을 사용하면 선택 버튼이 나온다
2. 선택을하고 등록하기를 누르면 백엔드 API의 uploadFile을 통해 넘긴다.
3. 백엔드에서 파일을 받으면 스토리지에 업로드하는 코드를 작성해놔서 파일이 이동한다.
4. 스토리지에 파일이 저장이 되면 다운로드 받을 수 있는 주고가 생긴다.
5. 백엔드에서 주소를 받고 받은 주소를 다시 브라우저에 알려준다.
6. 주소를 이미지 태그에 url을 이용하면 화면에서도 사진을 볼 수 있다.
7. 게시글 등록이나, 상품등록을 할 때 url을 같이 보내줘야한다.
8. 들어간 이미지 url을 state에 저장한다.
9. 게시글 등록하기 버튼 클릭하면 createBoard 요청이 들어간다.(writer,title,contents,imageUrl ...)
10. 백엔드에서 DB에 저장한다.
11. fetchBoard 할 때 들어간 data를 화면에 보여준다.

이미지 파일은 스토리지에 저장되고 다운로드 받을 수 있는 텍스트Url 만 가져와 해당 주소를 입력하고 받는 것이다.

DB에 (blob 타입: 큰 객체)으로 넣을 순 있지만, 비효율적이어서 스토리지에 넣어준다.

결론: 데이터베이스에 직접 사진을 넣지 않고, 스토리지에서 받아온 주소만 넣어준다.

이미지는 Url주소에서 다운로드를 받아와야하기 때문에 화면에 그려질 때 느리기에 다른 태그들 다음으로 보여진다.

multiple: 여러개 파일 넣기

따로 설치가 필요하다.

yarn add apollo-upload-client

간단하지 않은 기능 upload, login 등은 링크를 따로 만들어 결합해주는 방식으로 작성한다.

3교시

파일 선택 아이콘 없애기

useRef 태그를 변수에 넣는다.

1. input 타입 file을 바꾸기는 쉽지 않다.
2. 파일 선택 버튼을 숨기고, css로 이쁜 버튼을 만든다.
3. 만든 버튼을 클릭했을 때 안쪽 버튼이 눌리도록 코딩한다.
   useRef 이용
   

validation

크기

파일 검증 component

file을 넘겨준다.

return을 쓴다고 onChangeFile 함수가 끝나는 건 아니다, false 와 true를 반환하고 조건문으로 false일 때 함수 종료명령을 따로 적용해야한다.

accept 를 넣으면 설정한 확장자명 빼고는 선택이 안되게끔 할 수 있다.