Clipboard
Clipboard API
๋ธ๋ผ์ฐ์ ์์ ํด๋ฆฝ๋ณด๋๋ฅผ ์กฐ์ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ API ์งํฉ
ํด๋ฆฝ๋ณด๋์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ด์ ๋ณต์ฌ, ๋ถ์ฌ๋ฃ๊ธฐ ๋ฑ์ ๊ธฐ๋ฅ์ ์ํํ ์ ์๋ค.
ํ ์คํธ, ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ๋ฐ์ดํฐ๋ฅผ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌํ ์ ์๋ค.
API๋ ์ฌ์ฉ์์ ๊ฐ์ธ์ ๋ณด๋ฅผ ์กด์คํ๋๋ก ์ค๊ณ๋์๊ธฐ ๋๋ฌธ์ ํด๋ฆฝ๋ณด๋์์์ ์ฝ๋ ๋ฑ์ ์์ ์๋ ์ฌ์ฉ์์ ์น์ธ์ด ํ์ํ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
์ด์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ document.exeCommand
๋ฅผ ์ฌ์ฉํด OS Clipboard์ ์ก์ธ์คํ์ง๋ง, ๋ค์ํ ๋ณด์ ๋ฐ ์ฑ๋ฅ ๋ฌธ์ ๋ก Clipboard API๋ก ๋์ฒด๋์๋ค.
Interface
ํด๋ฆฝ๋ณด๋์ ๋ ๊ฐ์ง ์ฃผ์ ์ธํฐํ์ด์ค
ํด๋ฆฝ๋ณด๋ ์ธํฐํ์ด์ค๋ ์ด์ ์ฒด์ (Window, macOS) ํด๋ฆฝ๋ณด๋์ ์ฌ์ฉ๋จ
writeText(text: string): Promise<void>
-> ํ ์คํธ๋ฅผ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ (๋น๋๊ธฐ)ํด๋ฆฝ๋ณด๋์ ์ฐ๋ ์์ ์ ๊ฒฝ์ฐ, ๋ฒํผ ํด๋ฆญ๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ ์ค์ฒ์ ๊ฒฐ๊ณผ์ธ ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ช ์์ ์ธ ๋ฉ์์ง ์์ด ๊ถํ์ ๋ถ์ฌํ๋ค.
ํ์ง๋ง ์ ์ฌ์ ์ธ ์ค๋ฅ๋ ๊ถํ ๋ฌธ์ ๋ฅผ ์ธ์ํ๊ณ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์ข๋ค.
readText(): Promise<T>
-> ํด๋ฆฝ๋ณด๋์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ธฐํด๋ฆฝ๋ณด๋๊ฐ ๋น์ด ์๊ฑฐ๋, ํ ์คํธ๊ฐ ํฌํจ๋์ด ์์ง ์๊ฑฐ๋, ํด๋ฆฝ๋ณด๋์ ๋ด์ฉ์ ๋ํ๋ด๋ ๊ฐ์ฒด ์ค ํ ์คํธ ํํ์ด ํฌํจ๋์ด ์์ง ์์ ๊ฒฝ์ฐ ๋น ๋ฌธ์์ด์ ๋ฐํํ๋ค.
ํด๋น ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์ฌ์ฉ์๊ฐ ์ฑ์ ํด๋ฆฝ๋ณด๋์์ ์ฝ์ ์ ์๋ ๊ถํ์ ๋ถ์ฌํ๋์ง ํ์ธํ๋ค.
์ฝ์ ์ ์๋ ๊ถํ์ ๋ถ์ฌํ๋์ง ํ์ธ์ด ํ์ํ๊ธฐ์ ๋ช ์์ ์ผ๋ก ์๋ฌ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์ด์ผ ํ๋ค.
write() vs writeText(), read() vs readText()
write(data: ClipboardItem):
ClipboardItem ๊ฐ์ฒด๋ฅผ ๋ฐ์ ํด๋ฆฝ๋ณด๋์ ์ฐ์ด๋ ๋ฐ์ฌ์ฉ๋๋ค.๋ค์ํ ํ์์ ๋ฐ์ดํฐ๋ฅผ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ ๊ฐ๋ฅ
writeText(data: string)
: ๋จ์ ํ ์คํธ๋ฅผ ํด๋ฆฝ๋ณด๋์ ์ฐ๋ ๊ฒฝ์ฐ ํด๋น ๋ฉ์๋๋ฅผ ์ฌ์ฉread(): Promise<ClipboardItem>
: ClipboardItem ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ฉฐ, ClipboardItem ๊ฐ์ฒด๋ ํด๋ฆฝ๋ณด๋์ ์๋ ๋ฐ์ดํฐ์ ํด๋น ํ์์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตreadText() Promise<string>
: ํด๋ฆฝ๋ณด๋์์ ํ ์คํธ๋ฅผ ์ฝ์ด์จ๋ค.
์ฅ์
๋ธ๋ผ์ฐ์ ์์ ํด๋ฆฝ๋ณด๋ ์กฐ์์ ์ง์ํ์ฌ ๋ณต์ฌ, ์๋ผ๋ด๊ธฐ, ๋ถํ๋ฃ๊ธฐ๋ฅผ ์ฝ๊ฒ ํ ์ ์๋ค.
๋ค์ํ ์ ํ์ ๋ฐ์ดํฐ๋ฅผ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌํ ์ ์๋ค.
๋ค์ํ ์ ํ์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ธฐ ์ง์ํ๋ค.
๋จ์
ํธํ์ฑ ๋ฌธ์ ๋ก ์ผ๋ถ ์ฌ์ฉ์๋ ๊ด๋ จ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ๋ชปํ ์ ์๋ค.
ํด๋ฆฝ๋ณด๋๋ฅผ ์๋ํ๊ธฐ ์ํด ์ฌ์ฉ์์ ์น์ธ์ ์ป์ด์ผ ํ๋ ๊ฒฝ์ฐ ๋ถํ์ํ ๊ฐ์ญ์ด ๋ฐ์(ํ์ )
์ ์ฑ ์น์ฌ์ดํธ๊ฐ ์ฌ์ฉ์์ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌํ ๋ฏผ๊ฐํ ์ ๋ณด์ ์ก์ธ์คํ ์ ์๋ ๋ฑ ๋ณด์์ ๋ฌธ์ ๊ฐ ๋๋ ๊ฒฝ์ฐ๋ ์กด์ฌ
์ฃผ์์ฌํญ
ํด๋ฆฝ๋ณด๋ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ ๋๋ ์ฌ์ฉ์์ ์น์ธ์ ๋จผ์ ๋ฐ์์ผ ํ๋ค.
ํด๋ฆฝ๋ณด๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ๋ ์๊ธฐ์น ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์๋๋ก ๋ฐ์ดํฐ ์ ํ์ ์ฃผ์ ํ์
์ฌ์ฉ์ ๋ชจ๋ฅด๊ฒ ๋๋ ๋์ ์์ด ํด๋ฆฝ๋ณด๋์์ ์ฝ๊ฑฐ๋ ์ฐ๋ ๊ฒ์ ์ฌ๊ฐํ ๋ณด์ ์ํ์ด ๋ ์ ์์ผ๋ฏ๋ก ํญ์ ํด๋ฆฝ๋ณด๋์ ์ก์ธ์คํ ์ ์๋ ๊ถํ๊ณผ ์ ๋น์ฌ์ ๊ฐ ์๋์ง ํ์ธ์ด ํ์ํ๋ค.
์ ํ์ฌํญ
ํด๋ฆญ ์ด๋ฒคํธ ์ธ๋ถ์์๋ ํด๋น ๋ฉ์๋๋ฅผ ํธ์ถํ ์ ์๋ค.์ ์ฑ ํ๋ก๊ทธ๋จ์ด ์ฌ์ฉ์ ๋ชฐ๋ ์คํฌ๋ฆฝํธ๋ ๊ธฐํ ์ ์ฑ ์ฝ๋๋ฅผ ์ฌ์ฉ์์ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌํ์ง ๋ชปํ๋๋ก ํ๊ธฐ ์ํ ๋ณด์ ์กฐ์น
Failed to copy! DOMException: Document is not focused
ClipboardItem
Clipboard API์์ ์ฌ์ฉ๋๋ ๊ฐ์ฒด๋ก, ํด๋ฆฝ๋ณด๋์ ์ฐ๊ฑฐ๋ ์ฝ์ ๋ฐ์ดํฐ๋ฅผ ๋ํ๋ธ๋ค.
ํด๋ฆฝ๋ณด๋์ ์ผ๋ฐ ํ ์คํธ๊ฐ ์๋ ๋ค๋ฅธ ๊ฒ์ ๋ฃ์ผ๋ ค๋ฉด ClipboardItem์ ์ฌ์ฉํ์ฌ ์ผ์นํ๋ MIME ์ ํ์ ์ ์ํด์ผ ํ๋ค
type
: ํด๋ฆฝ๋ณด๋ ์์ดํ ์ ์ ํ์ ์ค๋ช ํ๋ ๋ฌธ์์ด์ ๋ฐฐ์ดํด๋ฆฝ๋ณด๋์ ์์ดํ ์ด ์ด๋ค ์ข ๋ฅ์ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ๊ณ ์๋์ง๋ฅผ ๋ํ๋ธ๋ค.
Text์ ๊ฒฝ์ฐ ["text/plain"] ๊ณผ ๊ฐ์ ๊ฐ์ ๊ฐ์
getType()
: ํน์ ๋ฐ์ดํฐ ์ ํ์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๊ฐ์ ธ์ค๋ ๋ฉ์๋getTypeAsString()
: getType๊ณผ ๋น์ทํ์ง๋ง ๋ฐ์ดํฐ๋ฅผ ๋ฌธ์์ด๋ก ๋ฐ๋๋ค.
Clipboard API ์ด์ ์๋ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ ๋ถ์ฌ๋ฃ์ ์ ์๋ MIME ์ ํ์ผ๋ก
text/plain
,text/html
,image/png
๋ง ์ง์ํ๋ค.๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋ ์คํฌ๋ฆฝํธ ๊ตฌ์ฑ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ๊ฑฐํ๊ฑฐ๋ PNG decompression bomb assaults์ ๋ง๊ธฐ ์ํด ์ฒ๋ฆฌ ์์ ์ ์ํํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ค.
ํด๋ฆฝ๋ณด๋ API๋ ์ด์ ์น ์ฌ์ฉ์ ์ง์ ํ์์ ์ง์ํ๋ฏ๋ก ๊ฐ๋ฐ์๊ฐ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๋ณต์ฌํ ์ ์๋ค.
์น ์ฌ์ฉ์ ์ ์ ํ์ ์ ์ฌ์ฉํ๋ฉด
JSON.stringify()
์ ํจ๊ป ์ฌ์ฉํ์ฌ ์น์์ ์๋ก์ด ๋ฐ์ดํฐ ํ์์ ์ ์ํ ์ ์๋ค.๊ธฐ๋ณธ์ ์ผ๋ก ํ ์คํธ ํ์์ผ๋ก ๋ณํํ์ง ์๊ณ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ์ง์ ๋ณต์ฌํ ์ ์๋ค.
์ ์ํ๊ธฐ
ํด๋ฆฝ๋ณด๋์ ์น ์ฌ์ฉ์ ์ ์ ํ์์ ์ฌ์ฉํ๋ ค๋ฉด Blob์ MIM ์ ํ์ ์ ๋์ฌ๋ก '
web
' ์ ์์ฑํด์ผ ํ๋ค.
๋ฐ์ดํฐ ์ฝ๊ธฐ
์ฌ์ฉ์ ์ ์ ํ์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ผ๋ ค๋ฉด
web
์ผ๋ก ์์ํ๋ ํด๋ฆฝ๋ณด๋ ๊ฐ์ฒด๋ฅผ ๊ฒ์ํด์ผ ํ๋ค.
์น ์ฌ์ฉ์ ์ ์ ํ์์ ํ์ค์ด๋ค.
ํด๋ฆฝ๋ณด๋ API์ ๋ชฉ์ ์ ์ฌ์ฉ์๊ฐ ํ์ผ ํ์์ ๋ง๋๋ ๊ฒ์ด ์๋๋ผ ํ ์์ค์ ์ฝํ ์ธ ๋ฅผ ๋ค๋ฅธ ์์ค์ ์์ ์ ์ฅ ๊ณต๊ฐ์ ์ง์ ๋ณต์ฌํ๋ ๊ฒ, ์ฆ ๋ถ์ฌ๋ฃ๊ธฐ๋ผ๊ณ ํ๋ ํ๋ก์ธ์ค๋ฅผ ์ง์ํ๋ ๊ฒ
If you're using MIME types other than text, it's good to provide a text/plain
fallback if your target doesn't understand a particular MIME type.
์ง์ํ์ง ์๋ ํ๊ฒฝ์์ ์ฒ๋ฆฌ
Last updated