๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

BASE64

 (1)
Nextjs blurDataUrl dynamicํ•˜๊ฒŒ ์ œ๊ณตํ•˜๊ธฐ ์˜ค๋žœ๋งŒ์— ํฌ์ŠคํŒ…! ์˜ค๋Š˜์€ nextjs ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ์—์„œ blurDataUrl์„ ํ™œ์šฉํ•ด์„œ ์ด๋ฏธ์ง€๊ฐ€ ์™„์ „ํžˆ ๋กœ๋“œ๋˜๊ธฐ ์ „, ํ๋ฆฌ๊ฒŒ ๋ณด์ด๋„๋ก ํ•˜๋Š” ๋กœ๋”๋ฅผ ํ™œ์šฉํ•ด ๋ณด๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃจ๊ณ ์ž ํ•œ๋‹ค.์ง€๊ธˆ๊นŒ์ง€๋Š” ์ผ๋ฐ˜ img ํƒœ๊ทธ์— ์Šค์ผˆ๋ ˆํ†ค์„ ํ™œ์šฉํ•ด์„œ placeholder๋ฅผ ๊ตฌํ˜„ํ–ˆ์—ˆ๋Š”๋ฐ, tripie๋Š” ์—ฌํ–‰ ๊ด€๋ จ ์•ฑ์ด๋ฏ€๋กœ ์‚ฌ์ง„ ์ฝ˜ํ…์ธ ๊ฐ€ ์—„์ฒญ ๋งŽ์•„ ๋ชจ๋‘ ์Šค์ผˆ๋ ˆํ†ค์œผ๋กœ ๋กœ๋“œํ•˜๊ธฐ์—๋Š” ๋ณด๊ธฐ์— ์ข‹์ง€ ์•Š์•˜๋‹ค.๋”ฐ๋ผ์„œ ์•ž์œผ๋กœ ๋กœ๋“œ๋  ์ด๋ฏธ์ง€์˜ blur ์ฒ˜๋ฆฌ๋œ ๋ฒ„์ „์œผ๋กœ UX๋ฅผ ๋†’์ด๊ณ ์ž ํ•œ๋ฒˆ ๋‹ค๋ค„๋ณด๊ณ ์ž ํ•œ๋‹ค. blur data url์„ ํ™œ์šฉํ•œ Nextjs ์ปดํฌ๋„ŒํŠธ placeholderBlur Data Url ์ด๋ƒ ์Šค์ผˆ๋ ˆํ†ค UI๋ƒ๋จผ์ € blur data url์ด ์Šค์ผˆ๋ ˆํ†ค ui ๋ณด๋‹ค ๋” ์ ํ•ฉํ•œ๊ฐ€ ์ฑ—์ง€ํ”ผํ‹ฐํ•œํ…Œ ๋ฌผ์–ด๋ณด์•˜๋‹ค.โœ… Pros of Blur Da..

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”