# FileReader
[JavaScript] 파일 입출력 (FileReader)
type이 file인 input태그 <input type="file" /> 또는 API 요청과 같은 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사
[Swap(), 그 기록] 2. 이미지 업로드 1편 - FileReader
이 포스팅은 사이드 프로젝트를 진행하며 생겼던 여러 일들에 대해서 기록을 겸하여 작성한 글입니다. 주기적으로 작성하고자 노력은 하지만 블로그 포스팅 한번 하려고 하면 머릿속에서 나만의 언어로 정리도 하면서 작성하다가 몇시간은 사용하는 지라 주기적이지 않을 가능성이 농후
32day - FileReader, useRef, LazyLoad/PreLoad
기존의 우리가 사용하던 이미지 등록 방식은 이러했다. > 1. 브라우저에서 이미지 등록 버튼을 누르면 백엔드에 uploadFile로 전송되어 storage에 file이 보내진다. 백엔드는 storage로부터 다운로드URL을 받아와서 다시 브라우저에 돌려준다. 브라우저
[React] new FileReader(), Promise.all()
useEffect에서 setState를 사용하면 추가렌더링이 발생해서 비효율적인 경우가 있으므로 useMemo로 바꿔보자! > * 기존 이미지 업로드가 비효율적인 부분 2가지* 이미지 찌꺼기가 남는다. 이미지 미리보기가 느리다. 바뀐 이미지 업로드 방식 => 업
DAY_019[국비] 자바 웹프로그래밍 과정
- java.io 패키지 - Input / Output Stream - InputStreamReader, BufferedReader, FileWriter, FileReader, java.io.Serializable
이미지 최적화(미리보기)
이미지를 어떻게 하면 가장 효율적으로 불러올까? 아마 나와 같은 초보 개발자들은 한번쯤은 고민해 봤을거라고 생각한다. 분명 이미지를 업로드 하고 불러오는거 까지는 문제가 없는데 성능문제로 시간이 오래 걸리는 현상을 분명 경험 했을?! 거라고 생각한다. 물론 난 이미지
31일차) [React/JS] 이미지미리보기(fileReader) / Promise / 이미지 라이브러리 /preLoad
new FileReader()new FileReader() 기능은 파일 객체를 이용해 내용을 읽고 사용자 컴퓨터에 저장하는 것을 가능하게 해주는 브라우저에서 지원해주는 기능. new FileReader() 를 사용하면 new FileReader() 에 있는 기능 사용
팀프로젝트 회고(22/07/13), ReferenceError: self is not defined
오늘은 팀프로젝트 역사상? 팀원 모두 제일 힘들어했던 날이었다..(제일 힘든 날이 오늘이 마지막이길)본격적인 기능 구현을 하면서 다들 매우 많은 시도와 도전을 했기에ㅠㅠ다들 집에 갈때 영혼이 나간 모습이었다😨나는 오늘 커뮤니티 등록페이지 기능을 구현했다.그곳에 들어가
Day-31 FileReader, Promise.all, LazyLoad & PreLoad
기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않
코드캠프 FE 31일차 - TIL(FileReader,Promise.all,LazyLoad/PreLoad)
📔 학습목표 기존 업로드 방식은 비효율적이야 >> FileReader Async-await for문에서 쓰면 안된다고? >> Promise.all 내가 원할 때 이미지 불러오기 >> LazyLoad/PreLoad 업로드파일 프로세스 브라우저에서 플러스 이미지를
31) FileReader ?
Algorithm Self Study, Image Upload Process, Promise & Promise.all, LazyLoad vs PreLoad, Algorithm Class, self Study
리액트 프로젝트에서 이미지 파일 업로드하고 열람하기
AxiosJavaScript Reactmulter (백엔드에서만 사용)유저가 파일을 업로드하는 창구로서 HTML input 태그의 file 타입을 이용하겠습니다. 우리는 이미지만 받을 것이기 때문에 accept 옵션을 통해 첨부 가능한 파일을 특정 이미지 파일 확장자로
FileReader, PromiseAll, Lazy/PreLoad
1.이미지 업로드 방식 FileReader Async-await 와 for Promise.all 3.이미지 불러오기 LazyLoad/preLoad FileReader 기존의 이미지 업로드 방식은 Storage를 통해서 브라우저 => 백엔드 => Storage 로
31일차) 언제까지 사진 한 장씩 올리는거 기다릴거야! FileReader/readAsDataURL/Promise.all/ 실무 위주 !성능 높여 ! 끌어올려! Code Camp FE 6기
오늘 배울 내용 우리가 기존에 쓰던 이미지 업로드 방식 백엔드의 uploadFile api요청을 통해서 storage에 사진을 저장하고, url을 받아와서 브라우저에 url을 넘겨주었었다.그 다음에 그 url을 첨부해서 createBoard api요청을 해서게시글에 이
