๐Ÿ  home

์•ˆ๋…•ํ•˜์„ธ์š”! ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋ฏผ์„ ์˜ค์ž…๋‹ˆ๋‹ค.
์ด ๋ธ”๋กœ๊ทธ๋Š” ์ œ๊ฐ€ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋ฐฐ์šฐ๊ณ , ๋ถ€๋”ชํžˆ๊ณ , ํ•ด๊ฒฐํ•ด๋‚˜๊ฐ„ ๊ฒฝํ—˜๋“ค์„ ๊ธฐ๋กํ•˜๋Š” ๊ณต๊ฐ„์ด์—์š”.

๐Ÿš€ ๋‹จ์ˆœํ•œ ๊ธฐ์ˆ  ์ •๋ฆฌ๋ณด๋‹ค๋Š”,
โ€œ์ด๋•Œ ์ด๊ฑธ ์™œ ์ผ์ง€?โ€
โ€œ์—ฌ๊ธฐ์„œ ๋ง‰ํ˜”๋˜ ์ด์œ ๋Š” ๋ญ์˜€์„๊นŒ?โ€
ํ•˜๋Š” ๊ณ ๋ฏผ๊ณผ ๊นจ๋‹ฌ์Œ์„ ๋‹ด๊ณ  ์žˆ์–ด์š”.

ํ•˜๋ฃจํ•˜๋ฃจ ์„ฑ์žฅํ•˜๋Š” ๊ณผ์ •์„ ๊ธฐ๋กํ•˜๋ฉด์„œ,
๋ฏธ๋ž˜์˜ ๋‚˜์—๊ฒŒ๋„, ๊ทธ๋ฆฌ๊ณ  ๊ฐ™์€ ๊ธธ์„ ๊ฑท๋Š” ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ๋„
์ž‘์€ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค! ๐Ÿ˜„

๊ฐœ๋ฐœ์€ ๊ฒฐ๊ตญ ๋ฌธ์ œ๋ฅผ ํ‘ธ๋Š” ๊ณผ์ •์ด๊ณ , ๊ธฐ๋ก์€ ๊ทธ ๊ณผ์ •์„ ๋” ์ž˜ ์ดํ•ดํ•˜๋Š” ๋„๊ตฌ๋ผ๊ณ  ๋ฏฟ์–ด์š”.


๐ŸŽฏ ๋ธ”๋กœ๊ทธ ์šด์˜ ์›์น™

๋ธ”๋กœ๊ทธ ๋ชฉํ‘œ

โœ”๏ธ ๋‚ด ์–ธ์–ด๋กœ ์ •๋ฆฌํ•˜๊ธฐ โ€“ ๋‚ด๊ฐ€ ์ดํ•ดํ•œ ๋ฐฉ์‹๋Œ€๋กœ ๊ธฐ๋กํ•˜๊ธฐ
โœ”๏ธ ์ง€์†์ ์ธ ์„ฑ์žฅ ๊ธฐ๋ก โ€“ ์ž‘๊ฒŒ๋ผ๋„ ๋งค์ผ/๋งค์ฃผ ๋ฌด์–ธ๊ฐ€๋ฅผ ๊ธฐ๋กํ•˜๊ธฐ
โœ”๏ธ ์‹ค๋ฌด์— ๋ฐ”๋กœ ์จ๋จน์„ ์ˆ˜ ์žˆ๋„๋ก โ€“ ๋ณต๋ถ™์ด ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ, ์‹ค์ œ ํ•ด๊ฒฐํ•œ ๋ฌธ์ œ ์œ„์ฃผ


๐Ÿ“š ์นดํ…Œ๊ณ ๋ฆฌ

๐Ÿงฑ ์‹ค๋ฌด ๊ธฐ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘ ๊ธฐ๋ก

  • Title, Header, Footer, Input, Card ๋“ฑ ์‹ค๋ฌด ์Šคํƒ€์ผ๋กœ ์ง์ ‘ ๊ตฌํ˜„
  • Vanilla Extract + tailwind-variants ์กฐํ•ฉ์„ ํ™œ์šฉํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ ์ ์šฉ
  • darkTheme, themeContract, vars๋ฅผ ํ†ตํ•œ ๋‹คํฌ๋ชจ๋“œ ์ „ํ™˜ ์‹œ์Šคํ…œ ๊ตฌํ˜„
  • Jest, React Testing Library๋ฅผ ํ™œ์šฉํ•œ ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ ์ž๋™ํ™” ์ ์šฉ

๐Ÿ’ก ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” ์žฌ์‚ฌ์šฉ์„ฑ, ํ™•์žฅ์„ฑ, ํƒ€์ž… ์•ˆ์ „์„ฑ์„ ๊ณ ๋ คํ•ด ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ“Œ ์‹œ์ž‘ํ•˜๊ธฐ ์ข‹์€ ๊ธ€

์ถ”์ฒœ ์‹œ์ž‘๊ธ€

๐Ÿ™Œ ํ•จ๊ป˜ ์„ฑ์žฅํ•ด์š”

ํ‹€๋ ค๋„ ๊ดœ์ฐฎ์•„์š”.
๊ธฐ๋กํ•˜๊ณ , ๋Œ์•„๋ณด๊ณ , ๊ณ ์น˜๊ณ , ๋˜ ๋‚˜์•„๊ฐ€๋Š” ๊ฒƒ์ด ๊ฐœ๋ฐœ์ž์˜ ๊ธธ์ด๋‹ˆ๊นŒ์š”.


๐Ÿ“ฌ ์—ฐ๋ฝํ•˜๊ธฐ