์˜ฌ๋ฆฌ๋ธŒ์˜ ํ…Œํฌ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ… 2021๋…„ 3์›” ํšŒ๊ณ  ๐Ÿ”ฎ _ 2ํƒ„
Blog

2021๋…„ 3์›” ํšŒ๊ณ  ๐Ÿ”ฎ _ 2ํƒ„

๋‘๊ทผ๋‘๊ทผ๐Ÿ’— ์‹ ์ž…์‚ฌ์› ํ”„๋กœ์ ํŠธ ๋ฐœํ‘œ๋‚ 

2021.04.26

์˜ฌ-ํ•˜! ๐Ÿ’š ์•ˆ๋…•ํ•˜์„ธ์š”. ์—ฌ๋Ÿฌ๋ถ„! ์˜ฌ๋ฆฌ๋ธŒ์˜ ์„œ๋น„์Šค๊ฐœ๋ฐœํŒ€ ์‹ ์ž…์‚ฌ์› ํ™์‹œํ™์ž…๋‹ˆ๋‹ค.
์˜ฌ๋ฆฌ๋ธŒ์˜์— ์ž…์‚ฌํ–ˆ์„ ๋•Œ๋งŒ ํ•ด๋„ ์•„์ง ์ถ”์šด ๊ฒจ์šธ์ด์˜€๋Š”๋ฐ ๋ฒŒ์จ ๋ด„์ด ์ง€๋‚˜๊ณ  ์—ฌ๋ฆ„์ด ๋‹ค๊ฐ€์˜ค๊ณ  ์žˆ๋„ค์š” ๐ŸŒฑ
์ทจ์ค€์ƒ ์‹œ์ ˆ ์˜ฌ๋ฆฌ๋ธŒ์˜ ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ๋ฅผ ์—ผํƒํ•˜๋ฉฐ ๊ฟˆ์„ ํ‚ค์šฐ๋˜ ์ œ๊ฐ€ ์ด๋ ‡๊ฒŒ ๊ฒŒ์‹œ๊ธ€์„ ์˜ฌ๋ฆฌ๊ฒŒ ๋˜๋‹ค๋‹ˆ ๋„ˆ๋ฌด ๊ฐ๊ฒฉ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค ๐Ÿ™Š๐Ÿ™Š
๊ทธ๋Ÿผ ์•ž์„œ ์˜์ง€์ˆ˜๋‹˜์ด ์ž‘์„ฑํ•˜์‹  ๊ธ€์— ์ด์–ด S/W ๊ฐœ๋ฐœ ์ง๋ฌด ํ›„์† ๊ต์œก ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜ 2ํƒ„์„ ๊ณต์œ ํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!
๋ถ€์กฑํ•œ ๊ธ€ ์‹ค๋ ฅ์ด์ง€๋งŒ ์—ด์‹ฌํžˆ ์จ๋‚ด๋ ค๊ฐ€ ๋ณผ๊ป˜์š” :)

๋‹ค์‹œ ์“ฐ๋Š” ๋ฆฌ๋ทฐ, Rereview โœ๐Ÿป

๋จผ์ € ์ €ํฌ๊ฐ€ ํ•œ๋‹ฌ๋™์•ˆ ์—ด์‹ฌํžˆ ๋งŒ๋“  ์›น ์•ฑ ๋ฆฌ๋ฆฌ๋ทฐ๋ฅผ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

01

๋ฆฌ๋ฆฌ๋ทฐ ์•ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ด 3๊ฐœ์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

1. ๋ฆฌ๋ทฐ ์ƒ์„ธํŽ˜์ด์ง€

์ƒํ’ˆ์„ ๊ตฌ๋งคํ•œ ๊ณ ๊ฐ ์ˆ˜, ๋ฆฌ๋ทฐ๋ฅผ ์ž‘์„ฑํ•œ ๊ณ ๊ฐ ์ˆ˜, ๋ฆฌ๋ทฐ ์ด ํ‰์ , ๊ณ ๊ฐ ์„ ํ˜ธํƒ€์ž… ๋ณ„ ๋น„์œจ ๋“ฑ ๋ฆฌ๋ทฐ์ •๋ณด๋ฅผ ํ•œ๋ˆˆ์— ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ณ„์ ๊ณผ ๋„ํ‘œ ๋“ฑ์„ ํ™œ์šฉํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

2. ๋ฆฌ๋ทฐ ๋ฆฌ์ŠคํŠธ

๊ณ ๊ฐ ๋‹‰๋„ค์ž„, ์„ ํ˜ธ ํƒ€์ž…, ํ‰์  ๋ฟ ๋งŒ ์•„๋‹ˆ๋ผ ๋ฆฌ๋ทฐ ํ•ญ๋ชฉ์„ ์žฅ์ , ๋‹จ์ , ๋‚˜๋งŒ์˜ ๊ฟ€ํŒ ๋ž€์œผ๋กœ ๋‚˜๋ˆ„์–ด ์ฝ๊ธฐ ์‰ฌ์šด ๋ฆฌ๋ทฐ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๋ฆฌ๋ฆฌ๋ทฐ๋ฅผ ์ž‘์„ฑํ–ˆ์„ ๊ฒฝ์šฐ ๋ฐ”๋กœ ํ•˜๋‹จ์— ๋ณด์ผ ์ˆ˜ ์žˆ๊ฒŒ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

3. ๋ฆฌ๋ทฐ ์ž‘์„ฑ

๋ฆฌ๋ทฐ ์ž‘์„ฑ ์‹œ ์ž‘์„ฑ๊ฐ€๋Šฅํ•œ ๋ฆฌ๋ทฐ๋ชฉ๋ก์„ ์…€๋ ‰ํŠธ ๋ฐ”๋ฅผ ํ†ตํ•ด ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ, ๋ฆฌ๋ฆฌ๋ทฐ๋ฅผ ์ž‘์„ฑํ•  ์‹œ ์ƒ๋‹จ์— ์ด์ „ ์ž‘์„ฑ ํ•ญ๋ชฉ์„ ๋ถˆ๋Ÿฌ์˜ด์œผ๋กœ์จ ๋ฆฌ๋ทฐ์ž‘์„ฑ์— ํŽธ์˜์„ฑ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค.


์•„๋ฌด๋ž˜๋„ ํ•œ๋‹ฌ์ด๋ผ๋Š” ์‹œ๊ฐ„๋™์•ˆ ๊ธฐํš๋ถ€ํ„ฐ ์•ฑ ์ œ์ž‘๊นŒ์ง€ ์ง„ํ–‰ํ•˜๋‹ค ๋ณด๋‹ˆ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ๋งˆ์ดํŽ˜์ด์ง€ ๋“ฑ ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€๋ถ€๋ถ„์ด ๋น ์ ธ์„œ
์™„์„ฑ๋„ ๋†’์€ ์•ฑ์„ ๋งŒ๋“ค์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ์ ์ด ๋งŽ์ด ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค ๐Ÿ˜ข


ํ”„๋กœ์ ํŠธ ๋ฐœํ‘œ ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ

๋“œ๋””์–ด ์•„๊ธฐ๋‹ค๋ฆฌ๊ณ ๊ธฐ๋‹ค๋ฆฌ๋˜ ๋ฐœํ‘œํšŒ ๋‹น์ผ!! ์—ฌ๊ธฐ์ €๊ธฐ์„œ ์ €ํฌ๋ฅผ ๋ณด๋Ÿฌ์˜ค์‹ ๋‹ค๋Š” ์ƒ๊ฐ์— ๊ธด์žฅ๋ฐ˜ ์„ค๋ ˜๋ฐ˜,, ๐Ÿ˜ณ

ํ•˜์ง€๋งŒ ์–ธ์ œ๊ทธ๋žฌ๋ƒ๋Š”๋“ฏ ํ”„๋กœํŽ˜์…”๋„ํ•œ ๋ชจ์Šต์œผ๋กœ ๋ณต์Šค๋ฎค์ง๋‹˜์ด ๋ฉ‹์ง€๊ฒŒ ๋ฐœํ‘œ๋ฅผ ํ•ด์ฃผ์…จ๋‹ต๋‹ˆ๋‹ค ๐Ÿ‘ ๐Ÿ‘

02

๋ฐœํ‘œํšŒ ํ›„์— ์„œ๋น„์Šค๊ฐœ๋ฐœํŒ€ ํŒ€์›๋ถ„๋“ค๊ณผ ์ฝ”๋“œ๋ฆฌ๋ทฐ ์‹œ๊ฐ„์„ ๋ณด๋ƒˆ์—ˆ๋Š”๋ฐ์š”, ์ €ํฌ ๋„ค๋ช…์ด ์ž‘์„ฑํ•œ ์ฝ”๋“œ์— ๋Œ€ํ•ด ๋‹ค์–‘ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•ด์ฃผ์…จ์Šต๋‹ˆ๋‹ค.
์•„์ง ๋‹ค๋“ฌ์–ด์ง€์ง€ ๋ชปํ•œ ์ €ํฌ์˜ ๊ฐœ๋ฐœ์ƒˆ๋ฐœ ์ฝ”๋“œ์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ ๊ทน์ ์œผ๋กœ ๋ฆฌ๋ทฐํ•ด์ฃผ์…”์„œ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ์ฑ„์›Œ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์—ˆ๋‹ต๋‹ˆ๋‹ค. ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿง‘๐Ÿปโ€๐Ÿ’ปโ€๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿง‘๐Ÿปโ€๐Ÿ’ป

ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์น˜๋ฉฐ...

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

์‚ฌ์‹ค ์ฒ˜์Œ์— ์–ด๋Š์ •๋„ ๋‹จ์œ„๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆ ์•ผ ํ• ์ง€ ๊ฐ์ด ์ž˜ ์˜ค์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ์ œ๊ฐ€ ๋งก์€ ๋ถ€๋ถ„์˜ ํŽ˜์ด์ง€์˜ ๋ชจ๋“  ์ฝ”๋“œ๋“ค์„ ์ž‘์„ฑํ•œ ๋’ค ๋ฐ˜๋ณตํ•ด์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ถ€๋ถ„์ด ์–ด๋””์ผ๊นŒ ๊ณ ๋ฏผํ•˜๋ฉฐ ์˜์—ญ์„ ๋‚˜๋ˆ ๋ดค์–ด์š”. ๊ทธ๋ ‡๊ฒŒ ํ•˜๋‚˜ํ•˜๋‚˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๋นผ๋‹ค๋ณด๋‹ˆ ๋‚˜์ค‘์—๋Š” ์–ด๋Š์ •๋„ ๊ฐ์ด ์˜ค๋”๋ผ๊ตฌ์š” ! ํ˜น์‹œ >๋ฆฌ์•กํŠธ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ๋ถ„๋“ค์ด๋ผ๋ฉด ์ €์ฒ˜๋Ÿผ *bottom-up(์ƒํ–ฅ์‹) ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•ด๋ณด๋Š” ๊ฒƒ๋„ ์ปดํฌ๋„ŒํŠธ์— ์ต์ˆ™ํ•ด ์ง€๋Š”๋ฐ ๋„์›€์ด ๋ ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค ;) *bottom-up : ๊ณ„์ธต ๊ตฌ์กฐ์˜ ์ƒ์ธต๋ถ€์— ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ ๋ถ€ํ„ฐ ๋งŒ๋“œ๋Š” ๊ฒƒ

๊ทธ๋ฆฌ๊ณ  ์ œ๊ฐ€ ์™€๋‹ฟ์•˜๋˜ ๋ฆฌ์•กํŠธ์˜ ํŠน์ง•์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ”๋กœ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ์ด์˜€์Šต๋‹ˆ๋‹ค. ๋ถ€๋ชจ -> ์ž์‹์œผ๋กœ์„œ์˜ ๋ฐ์ดํ„ฐ ํ๋ฆ„์ธ๋ฐ์š”, ์ €๋Š” ์ด๋ถ€๋ถ„์ด ์˜คํžˆ๋ ค ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ tree๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋จธ๋ฆฌ์†์œผ๋กœ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค! (๋ฐ์ดํ„ฐ ์กฐ์ž‘์ด ๋ถˆํŽธํ•˜๋‹ค๊ณ  ๋‹จ์ ์œผ๋กœ ๋Š๋ผ๋Š” ๋ถ„๋“ค๋„ ์žˆ์–ด์š” ใ… .ใ… ) ์ด๋Ÿฌํ•œ ํŠน์ง•๋“ค ์™ธ์—๋„ virtual DOM์„ ํ™œ์šฉํ•ด์„œ ๋ Œ๋”๋ง์„ ๋น ๋ฅด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ , ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™œ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์  ๋“ฑ๋“ฑ ๋ฆฌ์•กํŠธ์˜ ๋งค๋ ฅ์€ ๋ฌด๊ถ๋ฌด์ง„ํ•˜๋‹ต๋‹ˆ๋‹ค โœจ

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

OnboardingReactSpringBoot
์˜ฌ๋ฆฌ๋ธŒ์˜ ํ…Œํฌ ๋ธ”๋กœ๊ทธ ์ž‘์„ฑ 2021๋…„ 3์›” ํšŒ๊ณ  ๐Ÿ”ฎ _ 2ํƒ„
๐Ÿ˜ป
ํ™์‹œํ™ |
Front-end Engineer
์น˜์ฆˆ๋ƒฅ์ด ํ™์‹œ๋‹˜์˜ ์ง‘์‚ฌ๋ฅผ ๋งก๊ณ ์žˆ๋Š” ์‹ ์ž… ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.๐Ÿฃ