diff options
Diffstat (limited to 'files/ko/web/api/blob/index.html')
| -rw-r--r-- | files/ko/web/api/blob/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
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 +--- +<div>{{APIRef("File API")}}</div> + +<p><span class="seoSummary"><code>Blob</code> 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다.</span> 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.</p> + +<p><code>Blob</code>은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. {{domxref("File")}} 인터페이스는 사용자 시스템의 파일을 지원하기 위해 <code>Blob</code> 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.</p> + +<h2 id="Blob_사용하기"><code>Blob</code> 사용하기</h2> + +<p>블롭이 아닌 객체와 데이터에서 <code>Blob</code>을 생성하려면 {{domxref("Blob.Blob", "Blob()")}} 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 {{domxref("Blob.slice", "slice()")}} 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 <code>Blob</code>으로 얻는 방법은 {{domxref("File")}} 문서를 참고하세요.</p> + +<p><code>Blob</code> 객체를 허용하는 API의 목록은 <code>File</code> 문서에도 있습니다.</p> + +<dl> +</dl> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{domxref("Blob.Blob", "Blob()")}}</dt> + <dd>매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 <code>Blob</code> 객체를 반환합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt> + <dd><code>Blob</code> 객체가 담은 데이터의 바이트 단위의 사이즈입니다.</dd> + <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt> + <dd><code>Blob</code> 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt> + <dd><code>Blob</code>의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 {{jsxref("Promise")}}를 반환합니다</dd> + <dt>{{domxref("Blob.slice()")}}</dt> + <dd>메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 <code>Blob</code> 객체를 생성하고 반환합니다.</dd> + <dt>{{domxref("Blob.stream()")}}</dt> + <dd><code>Blob</code>의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다.</dd> + <dt>{{domxref("Blob.text()")}}</dt> + <dd><code>Blob</code>의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd> +</dl> + +<h2 id="예제">예제 </h2> + +<h3 id="블롭_생성하기">블롭 생성하기</h3> + +<p>{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성하세요. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.</p> + +<pre class="brush: js">const obj = {hello: 'world'}; +const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre> + +<h3 id="형식_배열의_콘텐츠를_나타내는_URL_생성하기">형식 배열의 콘텐츠를 나타내는 URL 생성하기</h3> + +<p>다음 코드는 JavaScript {{jsxref("TypedArray")}}를 생성한 후, 그 데이터를 담은 <code>Blob</code> 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>이 코드의 주제는 <code>typedArrayToURL()</code> 함수로, 주어진 <code>TypedArray</code>에서 <code>Blob</code>을 생성하고, 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. (물론 해당 객체가 이미지여야 합니다)</p> + +<pre class="brush: 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 = 'Open the array URL'; + +document.body.appendChild(link);</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("형식_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}}</p> + +<h3 id="블롭에서_데이터_추출하기">블롭에서 데이터 추출하기</h3> + +<p>블롭에서 데이터를 읽는 방법 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 콘텐츠를 형식 배열로서 읽어 들입니다.</p> + +<pre class="brush: js">const reader = new FileReader(); +reader.addEventListener('loadend', () => { + // reader.result contains the contents of blob as a typed array +}); +reader.readAsArrayBuffer(blob);</pre> + +<p>또 다른 방법은 블롭을 {{domxref("Response")}}로 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 내용을 텍스트로 읽어옵니다.</p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> text <span class="operator token">=</span> <span class="keyword token">await</span> <span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Response</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p><code>FileReader</code>의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('File API', '#blob-section', 'The <code>Blob</code> interface')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Blob")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("BlobBuilder")}}</li> + <li>{{domxref("FileReader")}}</li> + <li>{{domxref("File")}}</li> + <li>{{domxref("URL.createObjectURL")}}</li> + <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a></li> +</ul> |