캠프 4주 4일차

도마스묵의 개발일지·2021년 7월 29일
0

부트캠프(개발_시작)

목록 보기
16/26
post-thumbnail

day25

웹사이트에 이미지 업로드를 할 때 대부분이 미리보기가 가능하다.
업로드하려는 이미지url를 서버까지 가서 받아오는게 아닌 내 컴퓨터에만 볼 수있는 임시 주소를 만들어서 빠르게 미리보기가 가능하게 구현 해보았다.

1. 이미지 프리뷰

2. 이미지 추가 선택사항

1.이미지 프리뷰

1-1 fileReader

이미지 미리보기를 하기 위해서 파일을 읽는 File API fileReader 를 사용했다.
fileReader MDN

이전 글에 이미지 업로드 처럼 구조를 짜고 fileReader 를 사용 해주는다.


여기서 data가(내컴퓨에서만 읽을 수 있는 이미 url) 임시 주소가 된다.
등록하기도 같이 하기 위해
사진 url 도 넣으면서 파일 주소 까지 같이 넣어 준다.

▶︎주의사항)게시물을 전송할때 state를 따로 만들고 미리보기 주소를 입력하면 안된다.

1-2 데이터(이미지) 전송하기

이미지를 API를 업로드 할 때 아래 방식으로 하는데 여기서 파일을 1개가 아닌 여러개를 업로드 할때 문제가 발생한다.

아래 처럼 3개를 만들어서 3개를 올릴 수도 있지만 이렇게 되면 async await가 있어서 올리고 기다리고를 반복 하게된다.

▶︎해결방법) 동시에 async,await 할때는한번에 보내기 위해 배열로 담아서 한번에 처리 해 주는 promise.all() 을 사용해 준다.
{수학 관련된 것 도와주는 게 Math (js기능)이듯이
파일 관련된 기능}



promise.all() 을 하면 데이터를 이렇게 객체로 받아서 뿌릴 수 있다.

input타입도 각자 만들어 서 id를 다르게 주자


위 처럼 .map을 이용해서 할 수 있지만 아직 직관적인 이해가 필요하기 때문에 다음에 하도록 하자!

2. 이미지 추가 선택사항

2-1 이미지 최적화

▶︎npm react-lazyload
처음부터 사진이나 파일을 전부 가져오는것이 아닌 필요한 부분에 추가적으로 받아오는것.

▶︎ pre-load

새로 받아 오지 않고 미리 불러와서 숨겨놨다가 필요할때 보여줌 이미지를 미리 테스트 할떄
(사이즈가 큰 이미지 사용할때 유용함)

▶︎webp 사용
jpeg->webp 이미지 변환 해서 사용 하자 리

💎 그 밖에 유용한 라이브러

▶︎Npm react-dropzone
드래그해서 사진 불러오기
▶︎Npm react-avatar-editor
이미지 잘라내기 ,돌리기, 확대 에디터

0개의 댓글