๐Ÿ’ง Blob (Binary Large OBject)

์ •์€๊ฒฝยท2020๋…„ 9์›” 18์ผ
0

๐Ÿ‘ธ Front-End Queen

๋ชฉ๋ก ๋ณด๊ธฐ
69/271

Blob (Binary Large OBject)

  • ํŒŒ์ผ๊ณผ ํก์‚ฌํ•œ ๋ถˆ๋ณ€ ๊ฐ์ฒด๋กœ raw data
  • ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•„์—ฐ์ ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ํฌ๋งท์ด ์•„๋‹ˆ๋‹ค
  • File ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ Blob์„ ํ†ตํ•ด ์ด๋ค„์ง€๋ฉฐ, Blob์˜ ํ•จ์ˆ˜๋“ค์„ ์ƒ์†๋ฐ›๊ณ  ํ™•์žฅํ•˜์—ฌ ์‚ฌ์šฉ์ž ์‹œ์Šคํ…œ์˜ ํŒŒ์ผ์„ ์ง€์›ํ•ด์คŒ

https://ko.javascript.info/blob ๋ฒˆ์—ญํ•ด๋ณด์ž

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์—†์ด ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ ๋ธ”๋ž์„ ๋‹ค์šด๋กœ๋“œํ•˜๋Š” ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ๊ฐ€ ์—ฌ๊ธฐ ์žˆ๋‹ค:

Reference

profile
#์˜์‹์˜ํ๋ฆ„ #์ˆœ๊ฐ„์ˆœ๊ฐ„ #์ƒ๊ฐ์˜์Šค๋ƒ…์ƒท

0๊ฐœ์˜ ๋Œ“๊ธ€