๐Ÿค– toy project ์‹œ์ž‘!

solmiiยท2020๋…„ 8์›” 16์ผ
0

Project

๋ชฉ๋ก ๋ณด๊ธฐ
14/14
post-thumbnail

๋•Œ๋Š” ๋ฐ”์•ผํ๋กœ WeCode ์ˆ˜๋ฃŒ ๋‹น์ผ ํšŒ์‹ ์ž๋ฆฌ,
๋™๊ธฐ๋“ค๋ผ๋ฆฌ ์ˆ˜๋‹ค ๋–จ๋‹ค๊ฐ€ "์šฐ๋ฆฌ ํ† ์ด ํ”„๋กœ์ ํŠธ ํ• ๊นŒ์š”??" "์–ด ์ข‹์€๋ฐ์š”??" ๋กœ ์ˆ ๊น€์— ๋„์›๊ฒฐ์˜๊ฐ€ ์ด๋ฃจ์–ด์กŒ๊ณ ,
๋‹ค์Œ๋‚  ์–˜๊ธฐ๋ฅผ ์ญ‰์ญ‰์ญ‰ ์ง„ํ–‰์‹œ์ผœ์„œ ์‹œ์ž‘๋œ...
๐Ÿฅด ์ด๋ฆ„ํ•˜์•ผ ์–ด์ฉŒ๋‹ค toy project!

์ธ์› : ํ”„2+๋ฐฑ2
๊ธฐ๊ฐ„ : 8์›” 17์ผ(์›”) ~ 8์›” 23์ผ(์ผ)
๋ชฉํ‘œ : ๋ฐฐํฌ๊นŒ์ง€!!!

ํ• ... ์ˆ˜... ์žˆ๊ฒ ์ง€^^?


๐ŸŒท ์ฃผ์ œ

์ ์‹ฌ ๋ฉ”๋‰ด ์ถ”์ฒœํ•ด์ฃผ๋Š” ์›น์‚ฌ์ดํŠธ!
๊ธฐ์กด์— ํ”ํ•˜๊ฒŒ ๋ดค์„ ๋ฒ•ํ•œ,

์ด๋Ÿฐ ๊ฒฐ์ •์žฅ์• ์šฉ ๋ฉ”๋‰ด ์„ ํƒ ํ‘œ๋ฅผ, ์šฐ๋ฆฌ๋งŒ์˜ ๊ธฐ์ค€์œผ๋กœ ๋” ์„ธ๋ถ„ํ™” ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ„ฐ์น˜ ๋ช‡๋ฒˆ์œผ๋กœ ์ ์‹ฌ ๋ฉ”๋‰ด๋ฅผ ์ถ”์ฒœํ•ด์ฃผ๋Š” ์›น์‚ฌ์ดํŠธ!

์‚ฌ์ดํŠธ์ด๋ฆ„์€ ์•„์ง ๋น„๊ณต๊ฐœ๐Ÿ˜†๐Ÿ˜†๐Ÿ˜†


๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ์‚ฌ์šฉ ์–ธ์–ด

๊ฐœ๋ฐœ ๊ธฐ๊ฐ„์ด ์งง๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋ก ํŠธ์—”๋“œ์—์„œ๋Š” ์—„์ฒญ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ  ๋ณด๋‹ค๋Š” ๊ธฐ์กด์— ์‚ฌ์šฉํ–ˆ๋˜ React์— TypeScript๋ฅผ ๋”ํ•ด์„œ ์‚ฌ์šฉํ•  ์˜ˆ์ •์ด๋‹ค.

ํŒ”์ž์—๋„ ์—†๋˜ TypeScript๋ฅผ ์ƒˆ๋กœ ๊ณต๋ถ€ํ•˜๋Š” ์ค‘์ธ๋ฐ, JavaScript๋ž‘ ๋น„์Šทํ•œ๋“ฏ ๋‹ค๋ฅด๋ฉด์„œ ๋“ค์–ด๊ฐˆ์ˆ˜๋ก ์ ์  ์–ด๋ ค์›Œ์ ธ์„œ ๊ณ ๊ตฐ๋ถ„ํˆฌ ์ค‘์ด๋‹ค...๐Ÿ˜ญ

๊ทธ๋ž˜๋„ ๊ณต์‹๋ฌธ์„œ๊ฐ€ ์ฐธ ์ž˜๋‚˜์™€์žˆ๊ณ  ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ตฌ์„ธ์ฃผ ๋ฒจ๋กœํผํŠธ๋‹˜ ๋ธ”๋กœ๊ทธ์— ์—ฐ์Šต์šฉ ์ฝ”๋“œ์™€ ํ•จ๊ป˜ ์ž˜ ์„ค๋ช…๋˜์–ด ์žˆ์–ด์„œ ์•„์ง๊นŒ์ง€๋Š” ๋ฌด๋ฆฌ์—†์ด ๋”ฐ๋ผ๊ฐ€๊ณ  ์žˆ๋‹ค!
(๊ทผ๋ฐ ์ด ์•„์ง๊นŒ์ง€๊ฐ€ ์ง„์งœ "์•„์ง" ์ธํ„ฐํŽ˜์ด์Šค ๋ถ€๋ถ„์ธ๊ฒŒ ํ•จ์ •ใ…Ž.......)

์‚ฌ์‹ค, ์šฐ๋ฆฌ๊ฐ€ ํ•˜๋ ค๋Š” ์ด๋Ÿฐ ๊ฐ„๋‹จํ•œ ํ”„๋กœ์ ํŠธ๋Š” JavaScript๋งŒ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ํ›จ์”ฌ ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์–ด์„œ TypeScript๋ฅผ ์ด์ œ์™€์„œ ๋ฐฐ์šฐ๊ณ  ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ํšจ์œจ์ ์ด์ง„ ์•Š๋‹ค.

ํ•˜์ง€๋งŒ, ๊ตญ๋‚ด์™ธ ๊ธฐ์—…์—์„œ ํ•ซํ•˜๊ณ  ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” TypeScript๋ฅผ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด์„œ ๊ณต๋ถ€ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ผ์ฃผ์ผ์งœ๋ฆฌ ์งง์€ ํ”„๋กœ์ ํŠธ์ง€๋งŒ ๋‹ค๋ฅธ ํ”„๋ก ํŠธ์—”๋“œ ํ•œ๋ถ„๊ณผ ์ƒ์˜ํ•ด์„œ ์—ด์‹ฌํžˆ ์ ์šฉํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค!

์ž˜ํ•œ...๊ฑฐ๊ฒ ์ง€...?๐Ÿ˜‚


๐Ÿ”จ ์‚ฌ์šฉ ํˆด

๊ธฐ์กด์— ์กด์žฌํ–ˆ๋˜ ์‚ฌ์ดํŠธ๋ฅผ ํด๋ก ํ–ˆ๋˜ ์ด์ „ ํ”„๋กœ์ ํŠธ์™€ ๋‹ฌ๋ฆฌ, ๊ธฐํš๋ถ€ํ„ฐ ๋””์ž์ธ๊นŒ์ง€ ๋ชจ๋‘ ์šฐ๋ฆฌ๊ฐ€ ํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด๊ฐ€ ๋””์ž์ธ ์ž‘์—…์„ ๋งก๊ธฐ๋กœ ํ–ˆ๊ณ , ๊ทธ๋ž˜์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ํˆด์„ ์ถ”๊ฐ€๋กœ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

Zeplin์€ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ด์„œ ์ซ„์•˜์—ˆ๋Š”๋ฐ, ํฌํ† ์ƒต์ด๋‚˜ ์Šค์ผ€์น˜, XD๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ทธ๋ƒฅ Zeplin ์„ค์น˜ ํ›„ ํฌํ† ์ƒต์—์„œ ๋‚ด๋ณด๋‚ด๊ธฐ๋งŒ ํ•˜๋ฉด ๋์ด๋”๋ผ!
5๋ถ„๋งŒ์— ๋งˆ์Šคํ„ฐํ–ˆ๋‹น๐Ÿฅด (ํœด...)

Zeplin์„ ์‚ฌ์šฉํ•˜๋ฉด ํฐํŠธ ์ข…๋ฅ˜, ํฌ๊ธฐ, ์—ฌ๋ฐฑ๋ถ€ํ„ฐ hex color ๊นŒ์ง€ ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœํ•  ๋•Œ ์™•์™• ํŽธํ• ๊ฒƒ๊ฐ™๋‹ค!!


๐Ÿ˜‚ ์˜จ๋ผ์ธ ํŒ€ํ”Œ...ํž˜๋“ ๊ฑฐ๊ตฌ๋‚˜...

์ฝ”๋กœ๋‚˜๊ฐ€ ์‹ฌํ•ด์ง€๊ธฐ๋„ ํ–ˆ๊ณ , ํŒ€์›๋“ค์ด ๋ชจ๋‘ ์„œ์šธ์— ์žˆ๋Š”๊ฒŒ ์•„๋‹ˆ์–ด์„œ ์˜จ๋ผ์ธ์œผ๋กœ ํŒ€ํ”Œ์„ ์ง„ํ–‰์ค‘์ด๋‹ค.

๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ์‚ฌ์‹ค ๊ทธ๋‚ ๊ทธ๋‚ ์˜ ์ง„ํ–‰์ƒํ™ฉ์ด ๊ณต์œ ๊ฐ€ ํž˜๋“ค๊ธฐ๋„ ํ•˜๊ณ , ์ง‘์—์„œ ํ•˜๋‹ค๋ณด๋‹ˆ ์ฃผ์œ„์˜ ์œ ํ˜น์„ ์ฐธ๊ธฐ๊ฐ€ ํž˜๋“ค์–ด์„œ ์œ„์ฝ”๋“œ์—์„œ ํŒ€ํ”„๋กœ์ ํŠธ ํ• ๋•Œ์— ๋น„ํ•˜๋ฉด ํ™•์‹คํžˆ ์ง„ํ–‰์ƒํ™ฉ์ด ๋”๋””๋‹ค.

๊ทธ๋ž˜๋„ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ์žฌํƒ๊ทผ๋ฌด๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๋งŽ๊ณ , ์˜จ๋ผ์ธ์œผ๋กœ ํšŒ์˜๋ฅผ ํ•˜๊ฑฐ๋‚˜ ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์œผ๋‹ˆ ๋ฏธ๋ฆฌ ํ•œ๋ฒˆ ๋ง›๋ณธ๋‹ค๋Š” ๋Š๋‚Œ์œผ๋กœ(?) ์žฌ๋ฏธ์žˆ๊ฒŒ ํ•˜๊ณ ์žˆ๋‹คใ…Žใ…Žใ…Žใ…Ž


profile
ํ•˜๋ฃจ๋Š” ์น˜์—ดํ•˜๊ฒŒ ์ธ์ƒ์€ ์—ฌ์œ ๋กญ๊ฒŒ

0๊ฐœ์˜ ๋Œ“๊ธ€