# Blob
TIL
둘 다 현재 웹 페이지에서 HTML body 요소를 가리키지만, 서로 다른 방법을 사용하여 액세스합니다.document.body는 document 객체의 속성으로, 현재 웹 페이지의 body 요소에 대한 참조를 반환합니다. 이 속성은 JavaScript를 사용하여 bo
TIL43-02 Blob 의 활용, 이미지 파일 전송
Blob을 이해하기 전에 FormData에 대한 이해가 필요하다.FormData는 HTML form 요소를 통해 전송되는 데이터를 캡슐화하기 위한 JavaScript의 인터페이스다.FormData 객체를 사용하면 파일 업로드와 같은 이진 데이터를 포함하는 AJAX 요청
TIL.23.02.17. - base64 vs Blob vs File
모두 각각 다른 객체입니다.https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f내일은 2

blob 형태의 자료를 input 태그에 넣기
Vue로 만든 프로젝트를 리팩토링 중 만난 오류 아닌 오류 기존의 사이트에서는 이렇게 @chage 이벤트를 활용해 파일 정보를 받아와 미리보기 형태로 출력되도록 코드를 구성했다. 그 후 폼 데이터를 생성하여 생성한 폼 데이터에 파일 객체를 할당하고 서버에 요청을 보내

[javascript] Blob 과 Canvas를 이용해 이미지 Crop 하기
blob, canvas에 대해 이해해 보고 javascript에서 이미지 업로드시 정방형으로 자르는 예제 코드를 작성해보았습니다.

[NodeJs] 발음 정확도 평가 정리
기업 협업 진행 중 발음 정확도 평가 기능을 구현해야 했다. 대략 설명하면 영상에 나오는 대사를 유저가 따라 녹음하고 그에 대해 발음의 정확도를 평가해 점수를 나타내 주어야 한다. 구현 과정에서 꽤 시간이 걸려서 한 번 정리해보고자 한다. 시작 유저가 녹음한 음성
Blob 이해해보기
회사 동료분이 맡은 프로젝트에서 blob을 사용하여 로직을 구현 중인데 처리에 대해 고민하신다고 하셨다. 흠.. 생각해보니 나는 blob을 모르잖아..? 하는 아찔한 깨달음과 함께 blob을 공부해보기로 했다.그럼 가보자고~!Binary Large Object의 약자로
Image download
download 속성<a href="/path/image.png" download>Chrome Block cross-origin <a download>https://developer.chrome.com/blog/chrome-65-deprecation

(번역) Blob API에 대한 소개와 활용 사례
활용 사례 : 1. 청크 업로드, 2. 인터넷에서 데이터 다운로드, 3. 이미지 압축, 4. Blob URL 생성, 5. Blob에서 Data URL로 전환
Axios로 이미지 요청해 렌더링
문제: img tag 요청이 401 status를 response unauthorized해결: fetch or axios를 사용해 http request에 Authorization 헤더를 주입해 주어야 한다why? Authorization: Bearer JWT toke
[React+Typscript] 파일다운로드 기능 구현(With. Springboot)
저의 포스팅에서는 자세한 지식보다는 사용법 위주로 작성되며, 개인적인 내용을 포함하고 있습니다!이번 포스팅은 파일 업로드/다운로드 중 파일 다운로드를 할 예정이다.업로드 할 파일 선택 > 업로드 버튼 클릭 > 파일 업로드 \* 2 > 2가지 유형의 다운로드 버튼 클릭방

SpringBoot)Large Objects may not be used in auto-commit mode.
클론코딩 중 해당 이슈가 발생하였다.가지고 오려는 데이터 중 BLOB 데이터를 포함한다.따라서 JPA에 영속되기도 벅차고 변경감지 하기에는 리소스를 너무 많이 소모되기 때문에 변경감지나 지연로딩을 수행할 수 없다.Repository 인터페이스에 @Transactiona
서버에 이미지 보내기 multi-formdata / blob
컴포넌트를 캡쳐한 이미지를 서버로 보내는 업무를 맡았다. 이미지를 서버로..?? 바이너리 개념인 Blob과 서버에 보내는 방식중 multi-formdata에 대해서 알아보자Blob(Binary Large Object)란 바이너리 형태중에서도 큰 객체를 뜻하는데, 주로
리액트 프로젝트에서 이미지 파일 업로드하고 열람하기
AxiosJavaScript Reactmulter (백엔드에서만 사용)유저가 파일을 업로드하는 창구로서 HTML input 태그의 file 타입을 이용하겠습니다. 우리는 이미지만 받을 것이기 때문에 accept 옵션을 통해 첨부 가능한 파일을 특정 이미지 파일 확장자로
2022-05-03_TIL
Binary vs Base64 vs Blob vs FileBase64, Blob URL Image Binding 기법.Blob(블랍) 이해하기

Azure Blob storage, 어디까지 써봤니? - 2
내 데이터들의 lifecycle 관리!? 흔히 사용하는 로그들을 생각해보자. 우선 정책상 쌓아 두거나 추후에 필요가 있을것 같아, 혹은 데이터 마이닝을 선진행 하는 느낌으로 쌓는 경우가 대부분일 것이다. 그런데 이렇게 쌓아만 두고 열어보지도 않는데, 거기에 대한
Azure Blob storage, 어디까지 써봤니? - 1
Blog storage는 클라우드를 위한 Microsoft의 객체 스토리지 솔루션이다.딱 한줄로 정의해보자면 위와 같으며, 매우 큰 규모의 비정형 데이터를 저장하기 위한 저장소로 보면된다.browser에 이미지 또는 문서 직접 제공분산 액세스용 파일 저장비디오 및 오디