From 5e61f18c970f256815c1da2e004b2f3fd2e4aa1e Mon Sep 17 00:00:00 2001 From: alattalatta Date: Sat, 19 Feb 2022 22:55:54 +0900 Subject: [PATCH] Update Blob docs, add Blob.type (#3929) * Update Blob docs * Add Blob.type * Update syntax section * Proofread Blob index * Apply Blob() review * Clarify that `array` can contain mixed types --- files/ko/web/api/blob/blob/index.html | 59 ---------- files/ko/web/api/blob/blob/index.md | 52 +++++++++ files/ko/web/api/blob/index.html | 151 -------------------------- files/ko/web/api/blob/index.md | 143 ++++++++++++++++++++++++ files/ko/web/api/blob/size/index.html | 31 ------ files/ko/web/api/blob/size/index.md | 73 +++++++++++++ files/ko/web/api/blob/type/index.md | 85 +++++++++++++++ 7 files changed, 353 insertions(+), 241 deletions(-) delete mode 100644 files/ko/web/api/blob/blob/index.html create mode 100644 files/ko/web/api/blob/blob/index.md delete mode 100644 files/ko/web/api/blob/index.html create mode 100644 files/ko/web/api/blob/index.md delete mode 100644 files/ko/web/api/blob/size/index.html create mode 100644 files/ko/web/api/blob/size/index.md create mode 100644 files/ko/web/api/blob/type/index.md diff --git a/files/ko/web/api/blob/blob/index.html b/files/ko/web/api/blob/blob/index.html deleted file mode 100644 index 9a82b69399624f..00000000000000 --- a/files/ko/web/api/blob/blob/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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/blob/index.md b/files/ko/web/api/blob/blob/index.md new file mode 100644 index 00000000000000..a8b7cd8de505fd --- /dev/null +++ b/files/ko/web/api/blob/blob/index.md @@ -0,0 +1,52 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Blob + - Constructor + - File API + - Reference +browser-compat: api.Blob.Blob +translation_of: Web/API/Blob/Blob +--- +{{APIRef("File API")}} + +**`Blob()`** 생성자는 새로운 {{domxref("Blob")}} 객체를 반환합니다. 반환하는 블롭의 데이터는 `array` 매개변수에 제공한 배열을 이어붙인 값입니다. + +## 구문 + +```js +new Blob(array); +new Blob(array, options); +``` + +### 매개변수 + +- `array` + - : {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}} 또는 이 값들을 혼합해 구성한 {{jsxref("Array")}}입니다. {{domxref("Blob")}}의 데이터를 구성하게 됩니다. `USVString`은 UTF-8로 인코딩됩니다. +- `options` {{optional_inline}} + - : 다음 속성을 지정할 수 있는 {{domxref("BlobPropertyBag")}} 객체입니다. + - `type` {{optional_inline}} + - : 블롭에 저장할 데이터의 {{Glossary("MIME type", "MIME 유형")}}입니다. 기본 값은 빈 문자열(`''`)입니다. + - `endings` {{optional_inline}} {{non-standard_inline}} + - : 데이터가 텍스트일 때, 개행 문자(`\n`)를 어떻게 해석할지 지정합니다. 기본 값인 `transparent`는 개행 문자를 바꾸지 않고 블롭 데이터로 복사합니다. `native`를 지정하면 호스트 시스템 컨벤션에 맞춰서 변환합니다. + +### 반환 값 + +지정한 데이터를 담은 새로운 {{domxref("Blob")}} 객체. + +## 예제 + +```js +const array = ['hey!']; // 하나의 DOMString을 포함한 배열 +const blob = new Blob(array, {type : 'text/html'}); // 생성한 블롭 +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} \ No newline at end of file diff --git a/files/ko/web/api/blob/index.html b/files/ko/web/api/blob/index.html deleted file mode 100644 index 09afa4aa31d6ed..00000000000000 --- a/files/ko/web/api/blob/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -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")}}

- -

같이 보기

- - diff --git a/files/ko/web/api/blob/index.md b/files/ko/web/api/blob/index.md new file mode 100644 index 00000000000000..7e64586ef7ea0e --- /dev/null +++ b/files/ko/web/api/blob/index.md @@ -0,0 +1,143 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Blob + - File API + - Interface + - Reference + - 파일 +browser-compat: api.Blob +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의 목록도 {{domxref("File")}} 문서에 있습니다. + +## 생성자 + +- {{domxref("Blob.Blob", "Blob()")}} + - : 매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 `Blob` 객체를 반환합니다. + +## 속성 + +- {{domxref("Blob.prototype.size")}} {{readonlyinline}} + - : `Blob` 객체가 담은 데이터의 바이트 단위의 사이즈입니다. +- {{domxref("Blob.prototype.type")}} {{readonlyinline}} + - : `Blob` 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다. + +## 인스턴스 메서드 + +- {{DOMxRef("Blob.prototype.arrayBuffer()")}} + - : `Blob`의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 프로미스를 반환합니다 +- {{domxref("Blob.prototype.slice()")}} + - : 메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 `Blob` 객체를 생성하고 반환합니다. +- {{domxref("Blob.prototype.stream()")}} + - : `Blob`의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다. +- {{domxref("Blob.prototype.text()")}} + - : `Blob`의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 프로미스를 반환합니다. + +## 예제 + +### 블롭 생성하기 + +{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성할 수 있습니다. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다. + +```js +const obj = {hello: 'world'}; +const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); +``` + +### 형식화 배열의 콘텐츠를 나타내는 URL 생성하기 + +다음 코드는 JavaScript [형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)을 생성하고, 배열의 데이터를 담은 `Blob` 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다. + +#### HTML + +```html +

이 예제는 스페이스 문자부터 대문자 Z까지의 ASCII + 코드를 담은 형식화 배열을 생성한 후 객체 URL로 + 변환합니다. 아래에 링크를 추가했으니, 클릭해서 + 디코딩한 객체 URL을 확인하세요.

+``` + +#### JavaScript + +아래 코드의 주제는 `typedArrayToURL()` 함수로, 주어진 형식화 배열에서 `Blob`을 생성한 후 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 (데이터가 이미지 정보라면) {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. + +```js +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 = '배열 URL 열기'; + +document.body.appendChild(link); +``` + +#### 결과 + +예제의 링크를 클릭해서 브라우저가 객체 URL을 디코딩한 결과를 확인하세요. + +{{EmbedLiveSample("형식화_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}} + +### 블롭에서 데이터 추출하기 + +블롭에서 데이터를 읽는 방법 중 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 `Blob`의 콘텐츠를 형식화 배열로 가져옵니다. + +```js +const reader = new FileReader(); +reader.addEventListener('loadend', () => { + // reader.result에 블롭의 내용이 형식화 배열로 들어있음 +}); +reader.readAsArrayBuffer(blob); +``` + +{{domxref("Response")}}를 사용하는 방법도 있습니다. 다음 코드는 `Blob`의 내용을 텍스트로 가져옵니다. + +```js +const text = await (new Response(blob)).text(); +``` + +텍스트로 가져올 땐 {{DOMxRef("Blob.prototype.text()")}}를 사용할 수도 있습니다. + +```js +const text = await blob.text(); +``` + +`FileReader`의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("BlobBuilder")}} +- {{domxref("FileReader")}} +- {{domxref("File")}} +- {{domxref("URL.createObjectURL")}} +- [웹 애플리케이션에서 파일 사용하기](/ko/docs/Web/API/File/Using_files_from_web_applications) diff --git a/files/ko/web/api/blob/size/index.html b/files/ko/web/api/blob/size/index.html deleted file mode 100644 index df9a7bfa60c0e7..00000000000000 --- a/files/ko/web/api/blob/size/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: File.size -slug: Web/API/Blob/size -translation_of: Web/API/File/size -original_slug: Web/API/File/size ---- -

{{APIRef("File API") }}

- -

Summary

- -

파일의 크기를 바이트 단위로 반환합니다.

- -

Syntax

- -
var size = instanceOfFile.size
- -

Value

- -

숫자

- -

Specification

- -

사양에 포함되지 않았습니다.

- -

See also

- - - -

 

diff --git a/files/ko/web/api/blob/size/index.md b/files/ko/web/api/blob/size/index.md new file mode 100644 index 00000000000000..622bc7ca9b5b3b --- /dev/null +++ b/files/ko/web/api/blob/size/index.md @@ -0,0 +1,73 @@ +--- +title: Blob.size +slug: Web/API/Blob/size +tags: + - API + - Blob + - Bytes + - File API + - Files + - Property + - Reference + - length + - size +browser-compat: api.Blob.size +translation_of: Web/API/Blob/size +--- +{{APIRef("File API") }} + +{{domxref("Blob")}} 인터페이스의 **`size`** 속성은 {{domxref("Blob")}} 또는 {{domxref("File")}}의 크기를 바이트 단위로 반환합니다. + +## 값 + +`Blob` 또는 {{domxref("File")}}과 같은 `Blob` 기반 객체의 데이터 크기를 바이트 단위로 나타낸 숫자입니다. + +## 예제 + +이 예제는 `file` 유형의 {{htmlelement("input")}} 요소를 통해 사용자가 선택한 여러 파일을 순회하면서, 각각의 파일 이름과 바이트 크기를 출력합니다. + +### HTML + +```html + +파일 선택... +``` + +```css hidden +output { + display: block; + margin-top: 16px; +} +``` + +### JavaScript + +```js +const input = document.getElementById('input'); +const output = document.getElementById('output'); + +input.addEventListener('change', (event) => { + output.innerText = ''; + + for (const file of event.target.files) { + output.innerText += `${file.name}의 크기는 ${file.size} 바이트입니다.\n`; + } +}); +``` + +### 결과 + +{{EmbedLiveSample("예제")}} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("Blob")}} +- [웹 애플리케이션에서 파일 사용하기](/ko/docs/Web/API/File/Using_files_from_web_applications) diff --git a/files/ko/web/api/blob/type/index.md b/files/ko/web/api/blob/type/index.md new file mode 100644 index 00000000000000..7fe4e3f0992b4b --- /dev/null +++ b/files/ko/web/api/blob/type/index.md @@ -0,0 +1,85 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - Blob + - DOM + - File + - File API + - Format + - MIME + - MIME Type + - Property + - Reference + - Type +browser-compat: api.Blob.type +translation_of: Web/API/Blob/type +--- +{{APIRef("File API")}} + +{{domxref("Blob")}} 객체의 **`type`** 속성은 데이터의 {{Glossary("MIME type", "MIME 유형")}}을 반환합니다. + +## 값 + +파일의 MIME 유형을 나타내는 {{domxref("DOMString")}}. 유형을 알아낼 수 없는 경우 빈 문자열입니다. + +## 예제 + +이 예제는 사용자가 선택한 모든 파일 각각에 대해, 허용된 이미지 파일 유형 중 하나인지 검사합니다. + +### HTML + +```html + +이미지 파일 선택... +``` + +```css hidden +output { + display: block; + margin-top: 16px; +} +``` + +### JavaScript + +```js +// 우리 애플리케이션에서는 GIF, PNG, JPEG 이미지만 허용 +const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; + +const input = document.getElementById('input'); +const output = document.getElementById('output'); + +input.addEventListener('change', (event) => { + const files = event.target.files; + + if (files.length === 0) { + output.innerText = '이미지 파일 선택...'; + return; + } + + if (Array.from(files).every((file) => allowedFileTypes.includes(file.type))) { + output.innerText = '모든 파일 사용 가능!'; + } else { + output.innerText = '이미지 파일만 선택하세요.'; + } +}); +``` + +### 결과 + +{{EmbedLiveSample("예제")}} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("Blob")}} +- [웹 애플리케이션에서 파일 사용하기](/ko/docs/Web/API/File/Using_files_from_web_applications)