ReactJS(^16.13.0) ๋ฐ npm ์ฌ์ฉ.
๋ค๋ฅธ ๋ฌธ์ ๋ฅผ ํตํด npm install --save-dev worker-loader
ํ์ npm install [email protected]
npm install --save-dev worker-loader
๋ฅผ ์ํํ์ง๋ง ์ค๋ฅ๊ฐ ํด๊ฒฐ๋์ง ์์์ต๋๋ค. ํด๊ฒฐ๋ ์ ์ผํ ์ค๋ฅ๋ #85 ์ ์ธ๊ธ๋ this.WorkerClass is not a constructor
์ค๋ฅ์์ต๋๋ค.
์ฝ์์ ์ด ์ค์ ์ฌ๋ฌ ๋ฒ ๊ธฐ๋กํฉ๋๋ค.
worker.ts:16 Uncaught TypeError: CreateListFromArrayLike called on non-object at self.onmessage
์ฌ๋ฏธ์๊ฒ,
let v = new Vibrant(IMG);
console.log(v);
๋ result(...), _src ๋ฐ opts์ ํจ๊ป Vibrant ๊ฐ์ฒด๋ฅผ ๊ธฐ๋กํ์ง๋ง ์ค๋ฅ๋ ์ง์๋ฉ๋๋ค.
๋ด ๊ฐ๋ 10 ํ๋ก์ ํธ ๋ด์์ ๋์ผํ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
๋๋ ๋ฒ์ 3.1.4๋ก ๋๋๋ ธ๊ณ ๋ชจ์์ ํจ๊ป ์๋ํฉ๋๋ค.
๋ด Vue ํ๋ก์ ํธ์์๋ ๋ง์ฐฌ๊ฐ์ง์
๋๋ค.
์ง๋: 3.2.1.alpha-1
๋ณด๊ธฐ: 2.6.12
React 17.0.1์์ ์ด ๋ฌธ์ ๋ฅผ ์ฌํํ ์ ์์์ต๋๋ค. ^3.1.4
(@a1development!) ๋๋ ^3.1.6
๋๋๋ฆฌ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค.
๋ด ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
export const getColorPaletteFromBase64 = (base64String: string): Promise<Palette> => {
return new Promise((resolve, reject): void => {
const img = document.createElement('img');
img.src = base64String;
img.addEventListener(
'load',
async (): Promise<void> => {
const vibrant = new Vibrant(img);
const palette = await vibrant.getPalette();
resolve(palette);
},
);
});
};
^3.1.6
์๋ ์ ํ ์ ์๊ฐ ํฌํจ๋ฉ๋๋ค. ๋์ ์ด๊ฒ์ ์ฌ์ฉํ์ญ์์ค!
๊ฐ์ฌํฉ๋๋ค. ^3.1.6์ผ๋ก ๋๋๋ฆฌ๋ ๊ฒ์ด ํจ๊ณผ์ ์ด์์ต๋๋ค.
nuxt.js ๋ด์์ "node-vibrant": "^3.2.1-alpha.1"์์ "node-vibrant": "3.1.6"์ผ๋ก ๋์ผํ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ด๊ฒ์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฒ ๊ฐ์์ต๋๋ค. ์์ ๋ชจ๋ ๋ถ๋ค๊ป ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ฐ์ฌํฉ๋๋ค. ^3.1.6์ผ๋ก ๋๋๋ฆฌ๋ ๊ฒ์ด ํจ๊ณผ์ ์ด์์ต๋๋ค.