From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/blob/blob/index.html | 59 +++++++++++++ files/ko/web/api/blob/index.html | 151 ++++++++++++++++++++++++++++++++++ 2 files changed, 210 insertions(+) create mode 100644 files/ko/web/api/blob/blob/index.html create mode 100644 files/ko/web/api/blob/index.html (limited to 'files/ko/web/api/blob') diff --git a/files/ko/web/api/blob/blob/index.html b/files/ko/web/api/blob/blob/index.html new file mode 100644 index 0000000000..9a82b69399 --- /dev/null +++ b/files/ko/web/api/blob/blob/index.html @@ -0,0 +1,59 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Blob + - Constructor + - File API + - Reference +translation_of: Web/API/Blob/Blob +--- +
{{APIRef("File API")}}
+ +

Blob() 생성자는 새로운 {{domxref("Blob")}} 객체를 반환합니다. 해당 블롭의 콘텐츠는 매개변수로 제공한 배열을 이어붙인 값입니다.

+ +

Syntax

+ +
var aBlob = new Blob( array[, options]);
+
+ +

매개변수

+ + + +

예제

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+ +

명세서

+ + + + + + + + + + + + + + +
명세서상태비고
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}기초정의(Initial definition)
+ +

브라우저 호환성

+ + + +

{{Compat("api.Blob.Blob")}}

diff --git a/files/ko/web/api/blob/index.html b/files/ko/web/api/blob/index.html new file mode 100644 index 0000000000..09afa4aa31 --- /dev/null +++ b/files/ko/web/api/blob/index.html @@ -0,0 +1,151 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Blob + - File + - File API + - Interface + - Reference + - 파일 +translation_of: Web/API/Blob +--- +
{{APIRef("File API")}}
+ +

Blob 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.

+ +

Blob은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. {{domxref("File")}} 인터페이스는 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.

+ +

Blob 사용하기

+ +

블롭이 아닌 객체와 데이터에서 Blob을 생성하려면 {{domxref("Blob.Blob", "Blob()")}} 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 {{domxref("Blob.slice", "slice()")}} 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 Blob으로 얻는 방법은 {{domxref("File")}} 문서를 참고하세요.

+ +

Blob 객체를 허용하는 API의 목록은 File 문서에도 있습니다.

+ +
+
+ +

생성자

+ +
+
{{domxref("Blob.Blob", "Blob()")}}
+
매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 Blob 객체를 반환합니다.
+
+ +

속성

+ +
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
Blob 객체가 담은 데이터의 바이트 단위의 사이즈입니다.
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Blob 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.
+
+ +

메서드

+ +
+
{{DOMxRef("Blob.arrayBuffer()")}}
+
Blob의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 {{jsxref("Promise")}}를 반환합니다
+
{{domxref("Blob.slice()")}}
+
메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 Blob 객체를 생성하고 반환합니다.
+
{{domxref("Blob.stream()")}}
+
Blob의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다.
+
{{domxref("Blob.text()")}}
+
Blob의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.
+
+ +

예제 

+ +

블롭 생성하기

+ +

{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성하세요. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.

+ +
const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
+ +

형식 배열의 콘텐츠를 나타내는 URL 생성하기

+ +

다음 코드는 JavaScript {{jsxref("TypedArray")}}를 생성한 후, 그 데이터를 담은 Blob 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다.

+ +

HTML

+ +
<p>This example creates a typed array containing the ASCII codes
+   for the space character through the letter Z, then converts it
+   to an object URL. A link to open that object URL is created.
+   Click the link to see the decoded object URL.</p>
+ +

JavaScript

+ +

이 코드의 주제는 typedArrayToURL() 함수로, 주어진 TypedArray에서 Blob을 생성하고, 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. (물론 해당 객체가 이미지여야 합니다)

+ +
function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i < 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);
+ +

결과

+ +

{{EmbedLiveSample("형식_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}}

+ +

블롭에서 데이터 추출하기

+ +

블롭에서 데이터를 읽는 방법 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 Blob의 콘텐츠를 형식 배열로서 읽어 들입니다.

+ +
const reader = new FileReader();
+reader.addEventListener('loadend', () => {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);
+ +

또 다른 방법은 블롭을 {{domxref("Response")}}로 사용하는 것입니다. 다음 코드는 Blob의 내용을 텍스트로 읽어옵니다.

+ +
var text = await (new Response(blob)).text();
+ +

FileReader의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.

+ +

명세

+ + + + + + + + + + + + + + +
명세상태비고
{{SpecName('File API', '#blob-section', 'The Blob interface')}}{{Spec2('File API')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.Blob")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf