Blob
๋ธ๋
ArrayBuffer and views are a part of ECMA standard, a part of JavaScript.
๋ฐฐ์ด๋ฒํผ(ArrayBuffer)์ ๋ทฐ๊ฐ์ฒด(view)๋ ECMA ํ์ค์ ์ผ๋ถ์ด๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ผ๋ถ์ด๋ค.
In the browser, there are additional higher-level objects, described in File API, in particular Blob.
๋ธ๋ผ์ฐ์ ์์, ํ์ผ API๋ก ๋ฌ์ฌ๋๋, "Blob"์ด๋ผ๋ ๋ถ๋ฅด๋ ๊ณ ์ฐจ์ ๊ฐ์ฒด(higher-level object)๋ค์ด ์๋ค.
Blob consists of an optional string type (a MIME-type usually), plus blobParts โ a sequence of other Blob objects, strings and BufferSource.
๋ธ๋(blob)์ ์ถ๊ฐ์ ์ธ ๋ฌธ์์ด ํ์ (๋ณดํต์ MIMEํ์ )๊ณผ ๋ธ๋์์๋ค(๋ค๋ฅธ ๋ธ๋ ๊ฐ์ฒด๋ค์ ์ํ์ค์ ๋ฌธ์์ด๋ค, ๊ทธ๋ฆฌ๊ณ ๋ฒํผ์์ค(BufferSource))๋ก ์ด๋ฃจ์ด์ ธ์๋ค.
The constructor syntax is:
์์ฑ์ ๋ฌธ๋ฒ์ ์๋์ ๊ฐ๋ค:
- blobParts is an array of Blob/BufferSource/String values.
'๋ธ๋์์'๋ "๋ธ๋/๋ฒํผ์์ค/๋ฌธ์์ด" ๊ฐ๋ค์ ๋ฐฐ์ด์ด๋ค.- options optional object:
'์ต์ '์ ์ถ๊ฐ์ ์ธ ๊ฐ์ฒด:
- type โ Blob type, usually MIME-type, e.g. image/png,
'type'์ ๋ธ๋ ํ์ , ๋ณดํต์ MIME ํ์ , ์ฆ. image/png- endings โ whether to transform end-of-line to make the Blob correspond to current OS newlines (\r\n or \n). By default "transparent" (do nothing), but also can be "native" (transform).
'์๋ฉ'์ OS์ ๋ด๋ผ์ธ(\r\n or \n)์ ๋์ํญ๋ ๋ธ๋์ผ๋ก "end-of-line(๋ง์ง๋ง์ค)"์ ๋ณํํ ์ง ๋ง์ง์ ๋ํ ๋ถ๋ถ ๊ฒ. ๋ํดํธ๋ "transparent"๋ก ๋ณํ ์ํจ. "native"๋ ๋ณํํ๋ ๊ฒ.
For example:
์๋ฅผ ๋ค๋ฉด,
We can extract Blob slices with:
๋ธ๋ ์ฌ๋ผ์ด์ค์์ ์ถ์ถํ ์ ์๋ ๊ฒ๋ค:
- byteStart โ the starting byte, by default 0.
์์๋ฐ์ดํธ: ์์ํ๋ ๋ฐ์ดํธ, ๋ํดํธ๋ 0- byteEnd โ the last byte (exclusive, by default till the end).
๋๋ฐ์ดํธ: ๋ง์ง๋ง ๋ฐ์ดํธ (์ ์ผํ๊ฒ, ๋ํดํธ๋ก ๋ง์ง๋ง ๊น์ง)- contentType โ the type of the new blob, by default the same as the source.
์ฝํ ์ธ ํ์ : ์๋ก์ด ๋ธ๋์ ํ์ , ๋ํดํธ๋ก ์๋ณธ(source)๊ณผ ๋์ผ
The arguments are similar to array.slice, negative numbers are allowed too.
์ธ์(argument)๋ array.slice์ ๋์ผํ๊ณ , ์์๋ ํ์ฉํ๋ค.
๋ธ๋ ๊ฐ์ฒด๋ ๋ถ๋ณํ๋ค(immutable)
blob์ ๋ฐ์ดํฐ๋ฅผ ์ง์ ๋ณ๊ฒฝํ ์ ์๋ค. ํ์ง๋ง, ๋ธ๋์ ์์๋ค์ slice ํ ์ ์๊ณ , sliceํ ๊ฒ์ผ๋ก๋ถํฐ ์๋ก์ด ๋ธ๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ ์ ์๊ณ , sliceํ ๊ฒ๋ค์ ์์ด์ ์๋ก์ด ๋ธ๋์ผ๋ก ๋ง๋ค ์ ์๋ค.
์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ์์ด๊ณผ ์ ์ฌํ๋ค: ๋ฌธ์์ด์ ๋ฌธ์๋ฅผ ๋ณ๊ฒฝํ ์๋ ์์ง๋ง, ์์ ๋ ์๋ก์ด ๋ฌธ์์ด์ ๋ง๋ค ์๋ ์๋ค.
Blob as URL
A Blob can be easily used as an URL for <a>, <img> or other tags, to show its contents.
๋ธ๋์ ๋ธ๋์ ์ฝํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด์ aํ๊ทธ, imgํ๊ทธ ๋๋ ๋ค๋ฅธ ํ๊ทธ์ URL๋ก์จ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ค.
Thanks to type, we can also download/upload Blob objects, and the type naturally becomes Content-Type in network requests.
ํ์ ๋๋ถ์, ์ฐ๋ฆฌ๋ ๋ํ ๋ธ๋๊ฐ์ฒด๋ฅผ ๋ค์ด๋ก๋/์ ๋ก๋ํ ์ ์์ผ๋ฉฐ, ํ์ ์ ์์ฐ์ค๋ฝ๊ฒ ๋คํธ์ํฌ request์์ Content-Type์ด ๋๋ค.
Letโs start with a simple example. By clicking on a link you download a dynamically-generated Blob with hello world contents as a file:
๊ฐ๋จํ ์์ ๋ก ์์ํด๋ณด์. ์๋์ ๋งํฌ๋ฅผ ํด๋ฆญํ๋ฉด ๋์ ์ผ๋ก ์์ฑ๋ "hello word" ์ฝํ ์ธ ๋ฅผ ๊ฐ์ง๊ณ ์๋ ๋ธ๋์ ํ์ผ๋ก ๋ค์ด๋ก๋ ๋ฐ์ ์ ์๋ค.
We can also create a link dynamically in JavaScript and simulate a click by link.click(), then download starts automatically.
๋ํ, ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋งํฌ๋ฅผ ๋์ ์ผ๋ก ๋ง๋ค ์ ์๊ณ , link.click()๋ฅผ ํตํด ํด๋ฆญ์ ๋ชจ๋ฐฉํ ์ ์์ผ๋ฉฐ, ์๋์ ์ผ๋ก ๋ค์ด๋ก๋๋ฅผ ์์ํ๋ค.
Hereโs the similar code that causes user to download the dynamicallly created Blob, without any HTML:
์ฌ์ฉ์๊ฐ HTML์์ด ๋์ ์ผ๋ก ์์ฑ๋ ๋ธ๋์ ๋ค์ด๋ก๋ํ๋ ๊ฐ๋จํ ์ฝ๋๊ฐ ์ฌ๊ธฐ ์๋ค: