📝스트림
스트림은 데이터를 바이트 단위로 연속적으로 전달하는 일련의 데이터입니다
📝버퍼 / 버퍼링
스트림 데이터를 조금씩 저장하며 처리하고 비우기를 반복하는 메모리 공간으로 이러한 행위를 버퍼링이라고합니다
📝스트림 + 버퍼
동영상의 경우 전부 다운 받은 후에 영상을 재생시킨다면 엄청나게 오래 기다려야할 수도 있다 이럴 경우 스트림을 이용하며 버퍼에 처리된 걸 담은 후에 사용자에게 보내주면 사용자는 모든 영상이 로드될 때까지 안 기다려도 볼 수 있다
📝Blob (Binary Large Object)
이진 데이터를 저장하기 위한 데이터 형식으로 주로 이미지, 오디오, 비디오, 문서 등의 바이너리 데이터를 저장하는 사용됩니다
멀티미디어 파일들은 대다수 용량이 큰 경우가 많기 때문에, 이를 데이터베이스에 효과적으로 저장하기 위해 고안된 자료형으로 바이너리 데이터를 다루기 위해 객체(Object) 저장한다
📝ArrayBuffer
객체는 이미지, 동영상과 같은 멀티미디어 데이터 덩어리를 표준 자바스크립트(브라우저)에서 다루기 위해 도입됐다 즉, 자바스크립트에서 원시 데이터(바이너리 데이터)를 직접 다루는 수단이다
이러한 이진데이터를 직접 보거나 수정하기 위해서는 위해서는 TypedArray가 따로 필요하다
TypedArray에는 여러개가 있다
- Uint8Array
- 0 ~ 255 범위를 다룬다
- Uint16Array
- 0 ~ 65535 범위를 다룬다
- Uint32Array
- 0 ~ 4294967295 범위를 다룬다
- Float64Array
- 8바이트 단위로 부동 소수점 방식으로 접근 가능한 view 객체
let buffer = new ArrayBuffer(16);
let view = new Uint8Array(buffer);
view[0] = 255;
console.log(buffer);
console.log(view);ArrayBuffer에 데이터 넣어서 확인해볼 수 있다 Unit8Array이기 때문에 255까지 표현이 가능하기 때문에 256이 들어오면 0이 된다
콘솔창에 메모리 아이콘을 누르면 바이너리를 확인할 수 있다 FF 즉 255가 들어간 걸 확인 가능
📝 ArrayBuffer로 데이터 보내기
<input type="file" id="fileInput">
document.getElementById('fileInput').addEventListener('change', async (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onloadend = async () => {
const arrayBuffer = reader.result;
// fetch API를 사용하여 서버로 데이터 전송
const response = await fetch('your-backend-endpoint-url', {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
},
body: arrayBuffer,
});
// 서버로부터의 응답 처리
const result = await response.text();
console.log(result);
};
// File To ArrayBuffer
reader.readAsArrayBuffer(file);
});<input type="file">에서 등록된 파일의 정보를 읽어 ArrayBuffer로 바꾼 뒤 octet-stream이라는 이진형태로 보내겠다는 Content-Type을 설정하고 보내면 된다
문제사항은 얘가 이미지인지 텍스트인지 동영상인지 등에 대한 정보가 없기 때문에 Base64로 인코딩 및 MIME-TYPE을 Json에 담아서 보낸다 이럴 경우 ArrayBuffer로 못 보낸다 근데 굳이 ArrayBuffer로 어렵게 보내는 것보다는 아래에 설명하는 방법으로 하는게 더 적합하다
📝File로 파일 업로드
document.getElementById('uploadButton').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('your-backend-endpoint-url', {
method: 'POST',
body: formData
}).then(response => {
return response.text();
}).then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});
}
});
<input type="file" id="fileInput"><input type="file">의 경우 파일 업로드할 때 사용되는데 File 객체를 가진다 이건 Blob을 상속받아 만들어진 것이다
formData객체를 만들어서 보낼 경우 Content-Type 설정 안 해도 알아서 설정된다
📝FormData vs Json
FormData랑 Json이랑 키-값으로 이루어진 건 비슷하다 하지만 Json은 텍스트, 숫자, 배열, 객체 등 다양한 데이터 타입을 지원하지만, 이진 데이터(예: 파일)를 직접적으로 다루지는 않습니다 그에 반해 FormData는 이진데이터도 취급을 한다
🔗 참고 및 출처