๐Ÿ™‡ ์ธ์‚ฌ ๋ฐ ์†Œ๊ฐœ

์•ˆ๋…•ํ•˜์„ธ์š”. Web17 undefined์—์„œ ๋ฐœํ‘œ๋ฅผ ๋งก๊ฒŒ๋œ ๊น€๊ด€๊ฒฝ์ž…๋‹ˆ๋‹ค.

์ €ํฌ undefined๋Š” ๋ถ€์ŠคํŠธ์บ ํ”„ ๊ธฐ๊ฐ„๋™์•ˆ์˜ ์ง€์†๊ฐ€๋Šฅํ•œ ๊ฐœ๋ฐœ์ž๋กœ์˜ ์„ฑ์žฅ์„ ํ™•์ธํ•˜๊ณ ์ž undefined๋งŒ์˜ ๊ธฐ์ˆ ์ ์ธ ๋„์ „๊ณผ ๊ทผ๊ฑฐ์žˆ๋Š” ๊ฐœ์„ ์„ ํ•ด๋ณด์ž๋ผ๋Š” ๋งˆ์Œ๊ฐ€์ง์„ ๊ฐ€์ง€๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ €ํฌ๋Š” ์ด๋Ÿฐ ๋งˆ์Œ๊ฐ€์ง์„ ๊ฐ€์ง€๊ณ  ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ํ†ตํ•ด ์ปค๋ฎค๋‹ˆํ‹ฐ ๋‚ด ์†Œ๊ทธ๋ฃน ๊ด€๋ฆฌ๋ฅผ ๋•๋Š” ์™€๊ธ€์™€๊ธ€์ด๋ผ๋Š” ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ตฌํ˜„ ๊ณผ์ • ์†์— ์ €ํฌ๊ฐ€ ๊ฒฝํ—˜ํ•œ ๊ธฐ์ˆ ์ ์ธ ๋„์ „์— ๋Œ€ํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ / ๋ฐฑ์—”๋“œ ํŒŒํŠธ๋ณ„๋กœ ๋‚˜๋ˆ„์–ด์„œ ์˜ค๋Š˜ ๋ฐœํ‘œ๋ฅผ ์ง„ํ–‰ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ํŒŒํŠธ์—์„œ๋Š” ์ €ํฌ ์„œ๋น„์Šค์˜ ํ•ต์‹ฌ๊ธฐ๋Šฅ์ธ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์ œ์ž‘ํ•˜๊ฒŒ ๋œ ๊ณผ์ •๊ณผ ๋„์ „, ๊ทธ๋ฆฌ๊ณ  ์ˆ˜์น˜ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ์„ฑ๋Šฅ ๊ฐœ์„  ๊ณผ์ •์— ๋Œ€ํ•ด ๋ฐœํ‘œํžˆ๊ณ 

๋ฐฑ์—”๋“œ ํŒŒํŠธ์—์„œ๋Š” ์‹ค์‹œ๊ฐ„ ์„œ๋น„์Šค ๊ตฌํ˜„๊ณผ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ, ์œ ์—ฐํ•œ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด ๋ฐœํ‘œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๐Ÿ–ฅ๏ธ ํ”„๋ก ํŠธ์—”๋“œ

๋จผ์ € ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ธฐ์ˆ  ๋„์ „ ๊ณผ์ •์„ ๋ง์”€ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ์—์„œ๋Š” ์„œ๋น„์Šค์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์ธ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๊ณ  ์ˆ˜์น˜ํ™”๊ฐ€ ๊ฐ€๋Šฅํ•œ ์„ฑ๋Šฅ ๊ฐœ์„  ๊ณผ์ •์„ ํ†ตํ•ด ์ง€์†๊ฐ€๋Šฅํ•œ ๊ฐœ๋ฐœ์ž๋กœ์„œ์˜ ์„ฑ์žฅ์„ ํ™•์ธํ•˜๊ณ ์ž ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ‚ค์›Œ๋“œ ๋ฒ„๋ธ”์ฐจํŠธ ๋ฌผ๋ฆฌ์—”์ง„ ๊ตฌํ˜„

๋จผ์ € ๋ฐœํ‘œํ•  ๊ฒƒ์€ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์œ„ํ•œ ์ขŒํ‘œ์—ฐ์‚ฐ ๋ฌผ๋ฆฌ์—”์ง„ ์ œ์ž‘์ž…๋‹ˆ๋‹ค.

Why?

์ฒ˜์Œ์—๋Š” ์ €ํฌ๋„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ํ”„๋กœ์ ํŠธ์˜ ํ•ต์‹ฌ๊ธฐ๋Šฅ์„ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์˜์กดํ•˜๋Š” ๊ฒƒ์ด ์ข‹์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ณ , ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”์— ๋Œ€ํ•ด ์ดํ•ดํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ฒŒ ๋  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹๋‹ค๊ณ  ํŒ๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค.

์ขŒํ‘œ์—ฐ์‚ฐ ๋ฌผ๋ฆฌ์—”์ง„ ์ œ์ž‘๊ธฐ 1

์‹ค์„ธ๊ณ„๋ฅผ ๋ชจ๋ธ๋งํ•˜๋ฉฐ ์ˆ˜์น˜ ์กฐ์ •๊ณผ ๋””๋ฒ„๊น…์— ์šฉ์ดํ•˜๊ณ ์ž ์—ญํ• ๊ณผ ์ฑ…์ž„์„ ๋ถ„๋ฆฌํ•œ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ์ ํ•ฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

Circle๊ณผ CircleContainer๋กœ ๋‚˜๋ˆ„์–ด Circle์€ ํฌ๊ธฐ์™€ ์†๋„์™€ ๊ฐ™์€ ์ƒํƒœ๋ฅผ ๊ฐ€์ง€๊ณ , CircleContainer๋Š” Circle์— ํž˜์„ ๊ฐ€ํ•˜์—ฌ Circle์˜ ํฌ๊ธฐ, ์†๋„๋“ฑ์˜ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝ์‹œํ‚ค๋Š” ์—ญํ• ์„ ํ•˜๋„๋ก ์„ค๊ณ„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ดํ›„ ์—ฐ์‚ฐ๋  ์ขŒํ‘œ๋ฅผ ๋ˆˆ์œผ๋กœ ํ™•์ธํ•˜์—ฌ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋จผ์ € ๊ตฌํ˜„ ํ–ˆ์Šต๋‹ˆ๋‹ค.