ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
I Built a Toast Library Where a Robot Delivers Your Notifications ๐Ÿค–
Dev.toDev.to
Frontend

Framework-agnostic ์„ค๊ณ„์™€ Tree-shakeable ์ž์‚ฐ ์ตœ์ ํ™”๋ฅผ ํ†ตํ•œ ๊ณ ๊ฐœ์„ฑ Toast ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ตฌ์ถ•

I Built a Toast Library Where a Robot Delivers Your Notifications ๐Ÿค–

Pratham Kumar2026๋…„ 4์›” 23์ผ5๋ถ„intermediate

AI ์š”์•ฝ

Context

๊ธฐ์กด React ๊ธฐ๋ฐ˜ Toast ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์˜ ์ •ํ˜•ํ™”๋œ UI ํŒจํ„ด๊ณผ ํ”„๋ ˆ์ž„์›Œํฌ ์ข…์†์„ฑ์œผ๋กœ ์ธํ•œ ํ™•์žฅ์„ฑ ํ•œ๊ณ„ ์กด์žฌ. ๋‹จ์ˆœ ์•Œ๋ฆผ ์ „๋‹ฌ์„ ๋„˜์–ด ์ œํ’ˆ์˜ ํŽ˜๋ฅด์†Œ๋‚˜๋ฅผ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ์  ์ฐจ๋ณ„ํ™”์™€ ์œ ์—ฐํ•œ ์ธํ„ฐํŽ˜์ด์Šค ์„ค๊ณ„ ํ•„์š”์„ฑ ๋Œ€๋‘.

Technical Solution

  • Framework-agnostic Core ์„ค๊ณ„๋ฅผ ํ†ตํ•œ React, Vue, Svelte ๋“ฑ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ ์ง€์› ๋ฐ ์˜์กด์„ฑ ์ตœ์†Œํ™”
  • Subpath export ๋ฐฉ์‹์„ ์ ์šฉํ•œ 16์ข… Robot Variant์˜ Tree-shaking ๊ตฌํ˜„์œผ๋กœ ๋ฒˆ๋“ค ํฌ๊ธฐ ์ตœ์ ํ™”
  • Promise ๊ธฐ๋ฐ˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋กœ์ง์„ toast.promise() API๋กœ ์บก์Šํ™”ํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ถ€๋‹ด ์ œ๊ฑฐ
  • role="alert" ๋ฐ aria-live ์†์„ฑ์„ ์„ธ๋ถ„ํ™”ํ•˜์—ฌ ์ ‘๊ทผ์„ฑ(a11y) ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜๋Š” ์•Œ๋ฆผ ์‹œ์Šคํ…œ ๊ตฌ์ถ•
  • Typewriter Effect ๋ฐ ๋‹ค์ค‘ Action Button ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ†ตํ•œ UX ์ธํ„ฐ๋ž™์…˜ ํ™•์žฅ์„ฑ ํ™•๋ณด
  • zero production dependencies ์ „๋žต์„ ํ†ตํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ฒฝ๋Ÿ‰ํ™” ๋ฐ ์„ค์น˜ ์•ˆ์ •์„ฑ ๊ฐ•ํ™”

์‹ค์ฒœ ํฌ์ธํŠธ

- ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค๊ณ„ ์‹œ Core ๋กœ์ง์„ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋ถ„๋ฆฌํ•˜์—ฌ ๋ฒ”์šฉ์„ฑ ํ™•๋ณด ์—ฌ๋ถ€ ๊ฒ€ํ†  - ๋Œ€๊ทœ๋ชจ ์—์…‹ ํฌํ•จ ์‹œ Subpath export๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•œ ๋ชจ๋“ˆ๋งŒ Import ํ•˜๋„๋ก ์„ค๊ณ„ - UX ๊ณ ๋„ํ™” ์‹œ ๋‹จ์ˆœํžˆ ์‹œ๊ฐ์  ์š”์†Œ๊ฐ€ ์•„๋‹Œ Accessibility ํ‘œ์ค€ ์ค€์ˆ˜ ์—ฌ๋ถ€๋ฅผ ์ฒดํฌ๋ฆฌ์ŠคํŠธ์— ํฌํ•จ - ๋น„๋™๊ธฐ ์ž‘์—…์˜ Loading/Success/Error ์ƒํƒœ๋ฅผ ๋‹จ์ผ API๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ์ธํ„ฐํŽ˜์ด์Šค ์„ค๊ณ„ ๊ณ ๋ ค

ํƒœ๊ทธ

#Tree-shaking#Bundle Optimization#UX Polish#Accessibility#Framework Agnostic
์›๋ฌธ ์ฝ๊ธฐ