으엉으엉어어엉 힘들어
오늘의 목표
- 기존의 이미지 업로드 방식은 비효율적이야 fileReader
- Async-await를 for문에서 쓰면 안된다고? 모아서 전송Promise.all
- 이미지를 내가 원할 떄 불러올 수 있대 이미지로드LazyLoad/PreLoad
1. 기존의 이미지 업로드 방식은 비효율적이야 fileReader
기존은 파일을 올리면 백엔드에서 스토리지로 보내 url을 받아서
url을 이용하여 미리보기하는 방법을 사용하였다.
이젠 바로 파일을 스토리지에 저장하고
이미지 주소를 서버에서 가져오는 것이 아니라, 미리보기 용으로 만든 임시 주소를 만드는 방법을 써서 데이터를 절약할수 있다!
등록 버튼을 누르면 이미지 저장과 게시물 등록이 동시에 이뤄지게 된다
new FileReader()
파일 객체를 이용해 내용을 읽고 사용자 컴퓨터에 저장하는 것을 가능하게 해줌
- readAsDataURL() : Data URL을 얻을 수 있게 됨 우리가 넣은 파일을 넣으면된다
- onload() : 파일읽기가 성공하면 실행되는 것
- Blob(BinaryLargeObject):Blob 객체는 파일류의 불변하는 미가공 데이터 텍스트와 이진 데이터의 형태로 읽을 수 있으며, ReadableStream으로 변환한 후 스트림 메서드를 사용해 데이터를 처리할수 있음
이제 미리보기를 최적화하고 얻은 데이터값이다.
이 데이터를 그대로 백으로 보낸다면
파일 자체보다 커지기 때문에 미리 보기 용도로만 사
용해야한다.
이렇게 2개의 주소가 발생되고 따로 사용해야한는 점은 기억해야한다
- URL.createObjectURL(file);
내 컴퓨터에서만 열리는 가짜 주소
최근 생긴 기능으로 브라우저마다 열리지 않을 수 있기에
fileReader를 사용하는 것이 좋다
+) createObjectURL과 fileReader 둘 다 이미지 업로드 시 이미지를 불러와 미리보기가 가능함
createObjectURL을 사용하게 되면 소스코드가 짧아져 작성하기 쉽고 좋겠지만, fileReader와는 다르게 createObjectURL은 blob 객체로 이미지를 생성하기 때문에 해당 데이터를 서버와 통신할 때 사용 불가. createObjectURL보다는 fileReader가 브라우저 호환성이 좋기 때문에 사용자 편의를 생각한다면 fileReader를 사용하는 것이 좋음
진짜 주소라도 파일이 너무 크기에 전송을 금지하며
가짜주소는 보이지 않기에 전송이 금지된다.
Promise
- 함수의 요소들에 각각 프로미스를 주게되면 그 요소들은 순서를 기다렸다가 실행이 됨.
- Promise에서 resolve가 실행이 되면 종료, reject가 실행되면 오류
Promise.all()
- promise.all 내부의 모든 함수들을 동시에 실행
Promise.all()-@@@
- map,for,forEach를 사용 할수 있음
const onClickPromiseAll = async () => {
const result = await Promise.all(["http://storage.url1.jpg",
"http://storage.url1.jpg", "http://storage.url1.jpg"].map((el)
=> new Promise((resolve, reject) => {
setTimeout(() => {
resolve(el)
}, 3000)
})
))
};다중 이미지 업로드
3. 이미지를 내가 원할 떄 불러올 수 있대 LazyLoad/PreLoad
LazyLoad
-
페이지에 모든 것을 미리 데이터를 받아오는 것이 아니라
화면에 보일때 데이터를 받아오는 것 -
즉 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술
-
스크롤이 내려가면서 필요한 때가 되면 로드가 되어야함.
-
이미지가 많은 페이지의 경우 전체를 받아온 뒤 실행하면 속도가 느림
-
반대로 전체를 받아왔으나 보지않고 다른 페이지로 갈경우 데이터 낭비
PreLoad
- 페이지를 읽어들일 때 미리 리소스를 받아놓는 기술
- 이미지가 많은 페이지의 경우 데이터를 로드하고 대기시키는 것
lazy Load 라이브러리
이미지 라이브러리 (React-lazy-load, React-dropzone, react-avator-editor, ant-design)
https://www.npmjs.com/package/react-lazy-load
- React-lazy-load
React-lazy-load는 스크롤이 내려가면서 해당 이미지가 들어가있는 컴포넌트가 등장할 때 사진을 다운로드
https://www.npmjs.com/package/react-dropzone
- React-dropzone
React-dropzone은 react에서 제공하는 대표적인 이미지 라이브러리
https://www.npmjs.com/package/react-avatar-editor
-React-avator-editor
React-dropzone에 비하면 다운로드 수가 많이 적지만, 좋은 기능들을 담고 있는 라이브러리
이미지 사이즈 동그라미 형태등으로 변경시키고 싶을 떄 사용
https://ant.design/components/image/
ant-design
antd에서도 라이브러리가 있음
https://www.npmjs.com/package/react-beautiful-dnd
드래그와 드롭을 할수 있는 라이브러리
사용도가 높음
https://pagespeed.web.dev/
사이트 내의 다운로드 속도 확인 가능함
어떤것을 하면 좀더 빨라질지 알려줌
