์‹ค๋ฌด์— ๋ฐ”๋กœ ์ ์šฉํ•˜๋Š” ์Šคํ† ๋ฆฌ๋ถ๊ณผ UI ํ…Œ์ŠคํŠธ

์Šคํ† ๋ฆฌ๋ถ ํ™œ์šฉ๋ฒ• A to Z. ์Šคํ† ๋ฆฌ๋ถ์˜ ๋ชจ๋“ ๊ฒƒ์„ ๋ณด์—ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค

(5.0) ์ˆ˜๊ฐ•ํ‰ 46๊ฐœ

์ˆ˜๊ฐ•์ƒ 578๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์ธํ„ฐํŒŒํฌ
LG์—๋„ˆ์ง€์†”๋ฃจ์…˜
์ผ€์ดํ‹ฐ
๋‹ค๋‚˜์™€
์ž‰์นด์ธํ„ฐ๋„ท

์ž‰์นด์ธํ„ฐ๋„ท

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

์ธํ„ฐํŒŒํฌ
LG์—๋„ˆ์ง€์†”๋ฃจ์…˜
์ผ€์ดํ‹ฐ
๋‹ค๋‚˜์™€
์ž‰์นด์ธํ„ฐ๋„ท

์ž‰์นด์ธํ„ฐ๋„ท

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

5.0

5.0

์ฒ˜์Œ์ฒ˜๋Ÿผ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๋ง™์†Œ์‚ฌ.. ํ”„๋กœ์ ํŠธ ์ ์šฉํ•  ๋•Œ ๋งŽ์€ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์—ˆ๋Š”๋ฐ ์ •๋ง ์ด ๊ฐ•์˜ ํ•˜๋‚˜๋กœ ๋งŽ์€ ๊ฒƒ์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„์š”. ๊ฐ•์˜ ๋จผ์ € ๋ณด๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค๋ฉด ์ข‹์•˜์„ํ…๋ฐ ์ง„ํ–‰ ์ค‘์ธ ํ”„๋กœ์ ํŠธ์—์„œ ๋†“์นœ ๋ถ€๋ถ„์ด ๋งŽ๋‹ค๋Š”๊ฑธ ๊ฐ•์˜ ๋ณด๊ณ  ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฆฌ๋ทฐ ๊ฒ€์ฆ๊ณผ ํ…Œ์ŠคํŠธ ๋ถ€๋ถ„์€ ์ •๋ง ํฐ ๋„์›€ ๋์Šต๋‹ˆ๋‹ค๐Ÿ’– ๋ฌด์—‡๋ณด๋‹ค ์ „๋ฐ˜์ ์œผ๋กœ ๊น”๋”ํ•œ ๊ตฌ์„ฑ์œผ๋กœ ํ•ต์‹ฌ๋งŒ ์•Œ๋ ค์ฃผ์…”์„œ ์ดํ‹€ ๋™์•ˆ ๋„ˆ๋ฌด ์žฌ๋ฐŒ๊ฒŒ ๋ดค์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜ ๋˜ ๋‚ด์ฃผ์„ธ์š”!

5.0

๋šœ์šฐ๋šœ์šฐ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์ด๋ฒˆ์— ๊ฐœ๋ฐœ์ž๋กœ ์ฒซ ์ทจ์—…์„ ํ–ˆ๋Š”๋ฐ ํšŒ์‚ฌ์—์„œ ์Šคํ† ๋ฆฌ๋ถ์„ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ํ•˜์…”์„œ ๊ฐ‘์ž๊ธฐ ๋ฐฐ์šฐ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์ˆ˜๋„ ์—†์ด ํ˜ผ์ž ๊ณต๋ฌธ์„ ๋ณด๋ฉฐ ๊ณต๋ถ€ํ•˜๋ ค๊ณ  ํ•˜๋‹ˆ ๋Œ€์ถฉ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€๋Š” ์•Œ๊ฒ ๋Š”๋ฐ ๋‚ด๊ฐ€ ์ œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”๊ฒŒ ๋งž๋Š”์ง€ ๋‹ต๋‹ตํ–ˆ๋˜ ์ฐฐ๋‚˜ (์ŠคํŠธ๋ ˆ์Šค๋ฅผ ๋งŽ์ด ๋ฐ›์•˜์–ด์š”ใ… ใ… ใ… ) ์Šคํ† ๋ฆฌ๋ถ ๊ฐ•์˜๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฑธ ์•Œ๊ณ  ๋ฐ”๋กœ ๊ฒฐ์ œํ•ด์„œ ๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ ๋‹ต๋‹ตํ–ˆ๋˜ ๋งˆ์Œ์ด ์“ฑ~๋‚ด๋ ค๊ฐˆ ์ •๋„๋กœ ๊ฐ•์˜๊ฐ€ ์ •๋ง ๋ง˜์— ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ผผ๊ผผํ•˜๊ฒŒ ์•Œ๋ ค์ฃผ์‹œ๋ฉด์„œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ด์ฃผ์…จ๊ณ  ์Šคํ† ๋ฆฌ๋ถ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ฟ€ํŒ๋“ค์ด ์ •๋ง ๋งŽ์ด ๋‹ด๊ฒจ์ง„ ๊ฐ•์˜๋ผ์„œ ์ด์ œ ๋ง‰ ์ทจ์—…ํ•ด์„œ ์•„์ง ์–ด๋ฆฌ์ˆ™ํ•œ ์ €์—๊ฒŒ ๋”ฑ ๋งž๋Š” ๊ฐ•์˜์˜€์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋ชฐ๋ž๋˜ ๋ถ€๋ถ„๋„ ๋งŽ์ด ์•Œ๊ฒŒ๋˜์—ˆ๊ณ  ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์š”! ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! :) ๋•๋ถ„์— ์‚ด์•˜์–ด์š”!!!๐Ÿ˜‚

5.0

42

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๋””์ž์ธ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด ๊ด€์‹ฌ์ด ์ƒ๊ฒจ์„œ ๊ฐ•์˜๋ฅผ ๊ตฌ๋งคํ–ˆ์Šต๋‹ˆ๋‹ค! ์Šคํ† ๋ฆฌ๋ถ์„ ์ž‘์„ฑํ•˜๋ฉด์„œ๋„ ์ด๊ฒŒ ๋งž๋‚˜? ๋‚ด๊ฐ€ ์ž˜ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋Š” ๊ฒŒ ๋งž๋‚˜? ์˜์‹ฌ์ด ๋“ค์—ˆ๋Š”๋ฐ ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์ž‘์„ฑํ•˜์‹œ๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด๋ฉด์„œ ํŒ๋“ค์„ ๋งŽ์ด ์–ป์„ ์ˆ˜ ์žˆ์—ˆ์–ด์š”. ๊ทธ๋ฆฌ๊ณ  ์ €๋Š” ๊นƒํ—ˆ๋ธŒ ์•ก์…˜์— ๋Œ€ํ•ด ๋ง‰์—ฐํžˆ ์–ด๋ ค์›€์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋Š”๋ฐ, ํฌ๋กœ๋งˆํ‹ฑ์œผ๋กœ ์Šคํ† ๋ฆฌ๋ถ์„ ์ž๋™ ๋ฐฐํฌํ•˜๋Š” ์•ก์…˜๊ณผ, ์Šคํ† ๋ฆฌ๋ถ์˜ ์‚ฌ์šฉ์ž ์ ‘๊ทผ์„ฑ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋Š” ์•ก์…˜์„ ์ง์ ‘ ์ž‘์„ฑํ•ด๋ณด๋ฉด์„œ ์–ด๋ ค์›€์ด ๋งŽ์ด ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ง์ ‘ ์•ก์…˜์„ ์ž‘์„ฑํ•ด๋ณด๊ณ  ๋””ํŽœ๋˜์‹œ๊ฐ€ ์ž˜ ์—ฐ๊ฒฐ๋˜์–ด ์›ํ•˜๋Š”๋Œ€๋กœ ๋™์ž‘ํ•  ๋•Œ ๊ฐ๋™์ด ์ •๋ง ์ปธ์Šต๋‹ˆ๋‹ค... ใ… ใ…  ์ œ ๊ถ๊ธˆ์ฆ์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์˜€๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์š”! ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • ์Šคํ† ๋ฆฌ๋ถ์„ ํ™œ์šฉํ•œ ์ปดํฌ๋„ŒํŠธ ์ฃผ๋„ ๊ฐœ๋ฐœ(CDD)

  • GitHub Action, CI๋ฅผ ํ™œ์šฉํ•œ UI ํ…Œ์ŠคํŠธ ์ž๋™ํ™”

  • npm ํŒจํ‚ค์ง€ ๋ฐฐํฌ๋ฅผ ํ†ตํ•œ ๋””์ž์ธ์‹œ์Šคํ…œ ํ™œ์šฉ

์Šคํ† ๋ฆฌ๋ถ, ๋“ค์–ด๋Š” ๋ดค๋Š”๋ฐ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ๐Ÿค”

์œ ์ € ์Šคํ† ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ ๊ธฐํš์ด ์ฃผ๋ชฉ์„ ๋ฐ›๊ธฐ ์‹œ์ž‘ํ•˜๋ฉด์„œ, ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๋Š” UI ์ปดํฌ๋„ŒํŠธ์˜ ๋‹ค์–‘ํ•œ ์Šคํ† ๋ฆฌ๋„ ์ ์  ์ค‘์š”ํ•ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์Šคํ† ๋ฆฌ๋ถ์ด ๋ฌด์—‡์ธ์ง€, ์–ด๋–ค ๊ธฐ๋Šฅ๋“ค์ด ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•œ ๋ถ„๋“ค์„ ์œ„ํ•ด ์ค€๋น„ํ–ˆ์–ด์š”!

์ด ๊ฐ•์˜์—์„œ๋Š” ์Šคํ† ๋ฆฌ๋ถ์˜ ์„ค์น˜๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ, React ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•, ์ฃผ์š” ๊ธฐ๋Šฅ๊ณผ ํ™œ์šฉ ๋ฐฉ๋ฒ• ๋“ฑ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‹ค์ œ ๊ฐœ๋ฐœ์—์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋„ ํ•จ๊ป˜ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. ์Šคํ† ๋ฆฌ๋ถ์„ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๋Š” ๋ถ„๋“ค๋„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์˜€์œผ๋ฉฐ, ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ๊ฐ€๋ฉด์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์Šคํ† ๋ฆฌ๋ถ์„ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์˜ ํŠน์ง•

๐Ÿ“Œ ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ์ปดํฌ๋„ŒํŠธ๋ถ€ํ„ฐ, ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Œ“์•„์˜ฌ๋ฆฐ ๋ณต์žกํ•œ ์ปดํฌ๋„ŒํŠธ๊นŒ์ง€ ์ ์ง„์ ์œผ๋กœ ๋ฐฐ์›๋‹ˆ๋‹ค

๐Ÿ“Œ ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ˜„์—…์—์„œ ์–ด๋–ป๊ฒŒ ๊ฐœ๋ฐœํ•˜๋Š”์ง€ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๐Ÿ“Œ ํ˜„์—…์—์„œ ์Šคํ† ๋ฆฌ๋ถ์„ ํ™œ์šฉํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ์‹์„ ๊ฒฝํ—˜์—์„œ ์˜ค๋Š” ๋…ธํ•˜์šฐ์™€ ํ•จ๊ป˜ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค

๐Ÿ“Œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ์œ ์šฉํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋Š” TypeScript์™€ Tailwind ๊ฐ์ข… ๊ฟ€ํŒ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค

๋จผ์ € ์ˆ˜๊ฐ•ํ•˜์‹  ๋ถ„๋“ค์˜ ์ด์•ผ๊ธฐ ๐Ÿ“

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š”

์Šคํ† ๋ฆฌ๋ถ์€ ๋ฌด์—‡์ธ๊ฐ€์š”
ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ์ ํŠธ์—์„œ
์Šคํ† ๋ฆฌ๋ถ์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ์ง€
๋ง‰๋ง‰ํ•œ ๊ฐœ๋ฐœ์ž

๋””์ž์ธ ์‹œ์Šคํ…œ์— ๊ด€์‹ฌ์žˆ์–ด์š”.
์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜
ํ–ฅ์ƒ์„ ์œ„ํ•ด ๋””์ž์ธ์‹œํŠธํ…œ์„
๊ตฌ์ถ•ํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœํŒ€

UI ํ…Œ์ŠคํŠธ๊ฐ€ ๊ถ๊ธˆํ•ด์š”.
CI/CD ๋ฅผ ํ™œ์šฉํ•ด์„œ UI ํ…Œ์ŠคํŠธ๋ฅผ ์ž๋™ํ™”ํ•˜๊ณ , ๋ฆฌ๋ทฐ๋ฅผ ํ†ตํ•œ
์ปดํฌ๋„ŒํŠธ ๊ฒ€์ฆ์ด ๊ถ๊ธˆํ•œ ๊ฐœ๋ฐœ์ž

์ˆ˜๊ฐ• ํ›„์—๋Š”

  • ์Šคํ† ๋ฆฌ๋ถ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜๊ณ , ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค


  • Web Vital์„ ๊ณ ๋ คํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์Šคํ† ๋ฆฌ๋ถ decorator๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋”์šฑ ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

  • UI ํ…Œ์ŠคํŠธ ์ž๋™ํ™”๋ฅผ ํ†ตํ•ด ๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ์ผ๊ด€์„ฑ์„ ๊ฐ€์ ธ๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

  • ๋””์ž์ธ ์‹œ์Šคํ…œ์„ npm ํŒจํ‚ค์ง€๋กœ ๋ฐฐํฌํ•ด์„œ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”.

Chromatic ๋Œ€์‹œ๋ณด๋“œ: UI Review

๋””์ž์ธ์‹œ์Šคํ…œ์— ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ถ”๊ฐ€๋๋‹ค๋ฉด?
GitHub์„ Chromatic๊ณผ ์—ฐ๋™ํ•ด์„œ ์ƒˆ๋กœ์šด Pull
Request๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ UI Review๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์Šคํ† ๋ฆฌ๋ถ : UI ์ปดํฌ๋„ŒํŠธ ๊ฒ€์ฆ

์Šคํ† ๋ฆฌ๋ถ์—์„œ ๊ฐœ๋ฐœ๋œ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™•์ธํ•˜๊ณ 
๋‹ค์–‘ํ•œ ์Šคํ† ๋ฆฌ์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ
๊ทธ๋ ค์ง€๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

Interaction Test๋ฅผ ํ†ตํ•œ ์Šคํ† ๋ฆฌ ๊ฒ€์ฆ

์‚ฌ์šฉ์ž๊ฐ€ ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•  ๋•Œ ์–ด๋–ค์‹์œผ๋กœ ์šฐ๋ฆฌ๊ฐ€
๊ฐœ๋ฐœํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๋ณด๊ณ  ์Šคํ† ๋ฆฌ๋ฅผ
๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

npm package๋ฅผ ํ™œ์šฉํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ

์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ ค๊ณ  ํ•˜์‹œ๋‚˜์š”? ๋””์ž์ธ
์‹œ์Šคํ…œ์„ npm ํŒจํ‚ค์ง€๋กœ ๋ฐฐํฌํ•˜๊ณ  npm install์„
ํ†ตํ•ด ์‰ฝ๊ฒŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“  ์‚ฌ๋žŒ

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • MacOS๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์„ค๋ช…ํ•˜์ง€๋งŒ, ์šด์˜์ฒด์ œ์— ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค

  • React๋กœ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ์„ค์ •ํ•œ ๊ฒฝํ—˜์ด ์žˆ๋‹ค๋ฉด ๋ณ„๋„์˜ ํ™˜๊ฒฝ์„ค์ • ์—†์ด ๋”ฐ๋ผ์˜ค์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

ํ•™์Šต ์ž๋ฃŒ

  • ๋…ธ์…˜ ๋งํฌ

  • GitHub ์†Œ์Šค์ฝ”๋“œ

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • React๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•œ๋ฒˆ์ด๋ผ๋„ ๋งŒ๋“ค์–ด๋ณด์‹  ๋ถ„

  • ํŒ€ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์ด ์—†๋Š” ๋ถ„๋“ค๋„ ์‰ฝ๊ฒŒ ๋”ฐ๋ผ์˜ค์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์Šคํ† ๋ฆฌ๋ถ์„ ํ™œ์šฉํ•ด๋ณด๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ์ปดํฌ๋„ŒํŠธ ์ฃผ๋„ ๊ฐœ๋ฐœ์„ ํ•ด๋ณด๊ณ ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ๋””์ž์ธ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๊ณ ์‹ถ์€ ๊ฐœ๋ฐœํŒ€

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • React

  • TypeScript

  • HTML

  • CSS

์•ˆ๋…•ํ•˜์„ธ์š”
์ œ์ด์“ด์ž…๋‹ˆ๋‹ค.

18,223

๋ช…

์ˆ˜๊ฐ•์ƒ

1,382

๊ฐœ

์ˆ˜๊ฐ•ํ‰

518

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

10

๊ฐœ

๊ฐ•์˜

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

24๊ฐœ โˆ™ (2์‹œ๊ฐ„ 43๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

46๊ฐœ

5.0

46๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ์ˆ˜์ˆ˜์ˆ˜๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์ˆ˜์ˆ˜์ˆ˜

    ์ˆ˜๊ฐ•ํ‰ 5

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    92% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๋ฉด์„œ ์Šคํ† ๋ฆฌ๋ถ์„ ๊ณต๋ถ€ํ–ˆ์ง€๋งŒ ๋„ˆ๋ฌด ๋งŽ์€ ์ •๋ณด์™€ ์ข…์ข… ๋ฌธ์„œ์™€ ๋งž์ง€ ์•Š์•„ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์–ด ์ •๋ฆฌ๋œ ๊ฐ•์˜๋ฅผ ์ฐพ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์‹ค๋ฌด์—์„œ ๊ผญ ํ•„์š”ํ• ๋งŒํ•œ ๋‚ด์šฉ์œผ๋กœ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ •๋ฆฌํ•ด์ฃผ์…”์„œ ๋ณด๊ธฐ ๋„ˆ๋ฌด ํŽธํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์—๋„ ์ข‹์€ ๊ฐ•์˜ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

    • ์ œ์ด์“ด
      ์ง€์‹๊ณต์œ ์ž

      ์ข‹์€ ํ›„๊ธฐ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๐Ÿ˜Š ๊ณต์‹ ๋ฌธ์„œ๋งŒ์œผ๋กœ๋Š” ์–ด๋ ค์›€์„ ๋А๋ผ์‹ค ์ˆ˜ ์žˆ๋Š”๋ฐ, ๊ฐ•์˜๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‹ค๋‹ˆ ์ •๋ง ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์‹ค๋ฌด์— ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ์œผ๋กœ ๊ณ„์†ํ•ด์„œ ์œ ์ตํ•œ ๊ฐ•์˜ ๋งŒ๋“ค์–ด๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค!

  • ์•ˆ์ˆ˜๋นˆ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์•ˆ์ˆ˜๋นˆ

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    18% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ตœ๊ทผ ์‚ฌ๋‚ด ๋””์ž์ธ์‹œ์Šคํ…œ ๊ตฌ์ถ•์— ๋Œ€ํ•œ ์š•๊ตฌ๊ฐ€ ๋Š˜์–ด๋‚˜ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ๋“ฃ๋‹ค๋ณด๋ฉด, ๋””์ž์ธ ์‹œ์Šคํ…œ์— ๋Œ€ํ•œ ์ดํ•ด ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๊ฐ•์‚ฌ๋‹˜์˜ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ๋‚ด๊ณต์„ ๋А๋‚„ ์ˆ˜ ์žˆ์–ด์š”!! ๋ฐฉํ–ฅ์„ฑ์„ ์žƒ์€ ์š”์ฆ˜ ๊ฐ•์˜ ์™ธ์—๋„ ๋งŽ์€ ๊ฒƒ์„ ์–ป์–ด๊ฐˆ ์ˆ˜ ์žˆ์–ด ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

    • ์ œ์ด์“ด
      ์ง€์‹๊ณต์œ ์ž

      ์นœ์ ˆํ•œ ์ˆ˜๊ฐ•ํ‰ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ์ˆ˜๋นˆ๋‹˜! ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ ์ดํ•ด๊ฐ€ ๋˜์ง€ ์•Š๋Š” ๋ถ€๋ถ„์ด๋‚˜ ๊ถ๊ธˆํ•œ ์ ์ด ์žˆ์œผ์‹œ๋ฉด ์–ธ์ œ๋“  ์งˆ๋ฌธ์œผ๋กœ ์˜ฌ๋ ค์ฃผ์„ธ์š”~ ๊ทธ๋ฆฌ๊ณ  ๋ฉ˜ํ† ๋ง ์ด๋ฒคํŠธ๋„ ๊ณ„์† ์ง„ํ–‰์ค‘์ด๋‹ˆ ์ปค๋ฆฌ์–ด ์ „๋ฐ˜์ ์œผ๋กœ ๊ถ๊ธˆํ•œ ์ ์ด ์žˆ์œผ์‹œ๊ฑฐ๋‚˜ ์ƒ๋‹ด์ด ํ•„์š”ํ•˜์‹œ๋ฉด ๋งŒ๋‚˜์„œ ์ด์•ผ๊ธฐํ•˜์ง€ ์•Š์œผ์…”๋„ ๋˜๋‹ˆ ๊ตฌ๊ธ€ํผ์œผ๋กœ ์งˆ๋ฌธ์„ ๋ณด๋‚ด์ฃผ์„ธ์š”. ์ œ๊ฐ€ ๋„์™€๋“œ๋ฆด ์ˆ˜ ์žˆ๋Š” ์„ ์—์„œ ์ตœ๋Œ€ํ•œ ๋‹ต๋ณ€ ๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

  • ์›์ผ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์›์ผ

    ์ˆ˜๊ฐ•ํ‰ 3

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    20% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ตœ๊ทผ ์š”๊ตฌ์—ญ๋Ÿ‰์— storybook๊ฐ€ ๋งŽ์ด ๋ณด์—ฌ์„œ ์ˆ˜๊ฐ•ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ์ ์šฉํ•˜๋Š”๋ฐ ๊ธฐ๋ณธ์ ์ธ ์ง€์‹์„ ์•Œ๊ธฐ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ด์ค˜์„œ ์ข‹์•„์š”:)

    • ์ œ์ด์“ด
      ์ง€์‹๊ณต์œ ์ž

      ์ข‹์€ ํ”ผ๋“œ๋ฐฑ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์–ผ๋งˆ์ „์— ์ง„ํ–‰ํ–ˆ๋˜ ๋ฉ˜ํ† ๋ง์—์„œ ์‹ ์ž… ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ถ„์„ ๋งŒ๋‚ฌ๋Š”๋ฐ ์ฒซ ํšŒ์‚ฌ ์ธํ„ฐ๋ทฐ ํ•  ๋•Œ ์Šคํ† ๋ฆฌ๋ถ ๊ฒฝํ—˜์„ ์ข‹๊ฒŒ ๋ด์ฃผ์…จ๋‹ค๊ณ  ํ•˜๋”๋ผ๊ตฌ์š”. ์ข‹์€ ๊ฒฐ๊ณผ ์žˆ์œผ์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค!

  • ์ƒ๋ฃก๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์ƒ๋ฃก

    ์ˆ˜๊ฐ•ํ‰ 15

    โˆ™

    ํ‰๊ท  ํ‰์  4.7

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์นœ์ ˆํ•˜๊ณ  ์„ค๋ช…๋„ ์ž˜ํ•˜์…”์„œ ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!

    • dydgus0421๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      dydgus0421

      ์ˆ˜๊ฐ•ํ‰ 3

      โˆ™

      ํ‰๊ท  ํ‰์  4.7

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ƒ๊ฐ๋งŒํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ์ ์šฉํ•ด๋ณผ์ง€ ์—„๋‘๊ฐ€ ์•ˆ๋‚ฌ์—ˆ๋Š”๋ฐ ์ž์„ธํžˆ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ์ด์   ์ ์šฉํ•ด๋ณผ ์ˆ˜ ์žˆ์„๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~!

      ์ œ์ด์“ด๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

      ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

      ๋น„์Šทํ•œ ๊ฐ•์˜

      ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!