๐์ค๋ ๋ฐฐ์ด ๊ฒ
์ด๋ฏธ์ง์์ ์์ ์ถ์ถํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉํ๊ธฐ
๋ฉ์ธํ์ด์ง ์ฝํ ์ธ ์ถ์ฒ์์ ๊ฐ ์ฑ ์์ ๋ํ ์์ ๋ฝ์ ๋ค์ ๋ฐฐ๊ฒฝ์์ผ๋ก ์ฌ์ฉํด์ผ ํ๋ค. ๊ทธ๋์ ์ด์ ์ ์ฌ์ฉํ๋ ค๋ค๊ฐ ์คํจํ๋ color-thief-react ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋์ ํ๊ธฐ๋ ํ์๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด๋ก๋ color-thief ๊ฐ ์ค๋ฆฌ์ง๋์ด์ง๋ง ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ type ์ง์์ด ์๋๋ ๊ฒ ๊ฐ์์ color-thief-react๋ก ์ฌ์ฉํ๊ธฐ๋ก ํ์๋ค.
๋ง์ง๋ง ์ ๋ฐ์ดํธ๋ ๋ฆ๊ณ ๊ทธ๋ ๊ฒ ๋ง์ด ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์๋๋ผ ์ฐจ์ ์ฑ ์ ์ฐพ์๋ดค์ง๋ง ์๊ฐ๋ณด๋ค ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ด์… ์ฌ์ฉํ๊ธฐ๋ก ๊ฒฐ์ ! ๋์ค์ ๋ด๊ฐ ๋ง๋ค์ด๋ณผ ์ ์์ ์ข์ ๊ฒ ๊ฐ๋ค.
import { useColor } from 'color-thief-react';
const imgSrc =
'<https://live.staticflickr.com/65535/50237066832_72c7290c5c_c.jpg>';
const { data, error } = useColor(imgSrc, 'hex');
์ฌ์ฉ ๋ฐฉ๋ฒ์ ์์ฃผ ๊ฐ๋จํ๋ฐ cors์๋ฌ๋ก ์ ๋ฅผ ๋จน์๋ค. ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ canvas๋ก ์ด๋ฏธ์ง ์์ ์ถ์ถํ๋ ๊ฒ ๊ฐ์๋ฐ image๋ฅผ canvas๋ก ์ฌ์ฉํ ๋ ์๋ณธ์ ๋ณ๊ฒฝํ ์ฌ์ง๊ฐ ์์ผ๋ฉด cors ์๋ฌ๊ฐ ๋๋ ๊ฒฝ์ฐ๊ฐ ์๋ค๋ ๊ฒ์ ์ฒ์ ์์๋ค.
ํ์ง๋ง
DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
์ด๋ ๊ฒ securityError๊ฐ ๋ฐ์ํ๋ ๊ฒ์ ๋ฐ๊ฒฌํ๊ณ ์ฐพ์๋ณด๋ crossOrigin์ด๋ผ๋ ์ต์ ์ด ์์๋ค. ํด๋น ์ต์ ์ ๋ถ์ฌ์ ํด๊ฒฐ์ด ๋์๋๋ฐ ๋ฌธ์ ๋ ์ ์ด๋ฏธ์ง ์ฃผ์๋ ๊ณต์ ๋ฐ๋ชจ๋ฒ์ ์ ์๋ ์ด๋ฏธ์ง์ด๊ณ ๋ด๊ฐ ์์์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ผ๋ฉด cors ์๋ฌ๊ฐ ๋ฐ์ํ์๋ค.
๋ฐ๋ผ์ cors๋ฌธ์ ๋ ์๋ฒ api ์ฐ๊ฒฐํ๊ณ ๋ ๋ฐ์ํ๋ฉด ๊ทธ ๋ ํด๊ฒฐํด์ผํ ๋ฏํ๊ณ ์ผ๋จ์ ๋ก์ปฌ์์ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ผ๋ก ์์ ํ์๋ค.
๐ญ๋ฐฐ์ด ์
๋ก์ปฌ์ด๋ฏธ์ง๋ก ๋ฃ์์ ๋ ์ฑ๊ณตํด์ ๊ธฐ๋ปค๋ค! ์ด์ ํ๋ก์ ํธ์์๋ ๋์ ํ๋ ค๋ค๊ฐ ์คํจํ์ด์ ์ด๋ฒ์ ๊ผญ ์ฑ๊ณตํ๊ณ ์ถ์๋๋ฐ ๋คํ์ด๋ค... ์๋ฒ์์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์จ ํ์๋ ๋ฌธ์ ์์ด ์๋ํ๋ฉด ์ข์ํ ๋ฐ!!!
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋ฐ์ดํธ๊ฐ ๋๋ฌด ์ค๋๋๋ฉด ์๋ฌด๋๋ ์ฌ์ฉํ๊ธฐ ์กฐ๊ธ ๊บผ๋ ค์ง๋๋ฐ ์ด๋ฒ ๊ฒฝ์ฐ์ ์ ํ์ง๊ฐ ๋ง์ง ์์์ ์์ฌ์ ๋ค ใ ๋๊ฒ ํ์ํ ๊ธฐ๋ฅ์๋๊ฐ ์ถ์๋ฐ ์๊ฐ๋ณด๋ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ด์ ์ ๊ธฐํ๊ณ color-thief ์๋ typescript๋ฅผ ์ด๋ค ์์ผ๋ก ์ฌ์ฉํด์ผํ ์ง ๊ฐ์ด ์์์ ์์ฌ์ ๋ค. ์ฐพ์๋ด๋ ์๋ฃ๊ฐ ๋ง์ด ์์ด์ ๋ ํ๋ค์๋ ๊ฒ ๊ฐ๋ค ใ ๊ทธ๋๋ ์ผ๋จ์ ํด๊ฒฐ๋์ผ๋!! ์๋ฒ์์ ๋ฐ์์จ ์ด๋ฏธ์ง๋ cors ์๋ฌ ์์ด ํ ์ ์์์ผ๋ฉด ์ข๊ฒ ๋ค!
'์ผ์ > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
2023.06.04[nextjs - image type error] (2) | 2023.06.04 |
---|---|
2023.06.02[nextjs] (0) | 2023.06.02 |
2023.05.24[nextjs] (0) | 2023.05.24 |
2023.05.17[์ต์ ์ ์ฅ ํธ๋ฆฌ] (0) | 2023.05.17 |
2023.05.16 (0) | 2023.05.16 |