๐Ÿฆ‰ ๋ถ€์—‰์ด์˜ ํ•จ๊ป˜ ์ž๋ผ๊ธฐ in ์šฐํ…Œ์ฝ”

@JasonLee ยท March 20, 2023 ยท 7 min read

Intro

๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ๋กœ ๊ฒฐ์‹ฌํ•œ ๋’ค, ํ•ญ์ƒ ๊ฟˆ์— ๊ทธ๋ฆฌ๋˜ ์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค์— ํ•ฉ๊ฒฉํ•˜๊ณ  ๋ฒŒ์จ ํ•œ ๋‹ฌ์ด๋ผ๋Š” ์‹œ๊ฐ„์ด ํ˜๋ €๋‹ค. ๋งค ์ˆœ๊ฐ„ ๊ฐ„์ ˆํ–ˆ๊ณ , ์ง„์‹ฌ์ด์—ˆ๋‹ค. ํ•œ ๋‹ฌ ๋™์•ˆ ์ œ์ผ ํฌ๊ฒŒ ์šฐํ…Œ์ฝ”์˜ ์žฅ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ ํฌ๋ฃจ์› ๊ฐ„์˜ ์ƒํ˜ธ๊ด€๊ณ„์— ๋Œ€ํ•ด ๋‹ค๋ฃจ๋ฉฐ ๊ธ€์„ ์ด์–ด๊ฐ€๋ ค ํ•œ๋‹ค.

Main

ํ˜ผ์ž๊ฐ€ ํŽธํ–ˆ๋‹ค. ์™ธ๋กœ์šธ ๋•Œ๋„ ์žˆ๊ณ , ํƒ€์ธ๊ณผ ํ•จ๊ป˜๋ผ๋ฉด ์›ƒ์„ ์ผ๋„ ๋งŽ๊ฒ ์ง€๋งŒ ์ด์ƒํ•  ์ •๋„๋กœ 1๋…„ ์ „๋ถ€ํ„ฐ ํ˜ผ์ž๊ฐ€ ํŽธํ–ˆ๋‹ค. ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•œ ์ดํ›„ ๋‚ด ๋ชฉํ‘œ๋Š” ํ›Œ๋ฅญํ•œ ๊ฐœ๋ฐœ์ž์˜€๋‹ค. ๋˜๊ณ ์‹ถ์€ ๊ฐœ๋ฐœ์ž๋Š” ์—ฐ๋ด‰์ด ๋†’๊ฑฐ๋‚˜ ๋ฏธ๋””์–ด์— ๋…ธ์ถœ๋˜์–ด ์ธ๊ธฐ๊ฐ€ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹ˆ์—ˆ๋‹ค. ์ˆœ์ˆ˜ํ•˜๊ฒŒ ๊ฐœ๋ฐœ์„ ์ž˜ํ•˜๋Š”, ํŒ€์›์—๊ฒŒ ํ•ญ์ƒ ๋„์›€์ด ๋˜๋Š”, ๋™๋ฃŒ๋“ค์ด ๊ธฐ๋Œˆ ์ˆ˜ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ๋‹ค ์ด๋ฅผ ์œ„ํ•ด ๋‚˜๋Š” ๊ฐœ๋ฐœ์  ์ฒด๊ธ‰์„ ํ‚ค์›Œ์•ผ ํ•œ๋‹ค๋Š” ๊ฐ•๋ฐ•์ฆ์ด ์žˆ์—ˆ๋‹ค. ๋ณดํ†ต ์ดํ‹€์— 4์‹œ๊ฐ„ ์ •๋„ ์ž˜ ์ •๋„๋กœ ๊ฐ„์ ˆํ–ˆ๊ณ , ๋‘๋ ค์› ๋‹ค.

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

๊ทธ๋ ‡๊ฒŒ ์šฐํ…Œ์ฝ”์— ํ•ฉ๊ฒฉํ–ˆ๋‹ค. ์‚ฌ์‹ค ์ฒ˜์Œ์—๋Š” ๋ณ€ํ•˜์ง€ ์•Š์€ ์ƒ๊ฐ์„ ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. ์šฐํ…Œ์ฝ”๋ฅผ ํ†ตํ•ด ๋‚˜์—๊ฒŒ ์ฃผ์–ด์ง„ ๊ธฐํšŒ๋Š” ํ˜„์—…์ž๋ถ„๋“ค์—๊ฒŒ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ๊ณผ ํƒ„ํƒ„ํ•œ ์ปค๋ฆฌํ˜๋Ÿผ๋ฟ์ด๋ผ ์ƒ๊ฐํ•˜๋ฉฐ ๋‚˜ ์Šค์Šค๋กœ๋ฅผ ๋˜๋‹ค์‹œ ํ˜ผ์ž ๊ฐ€๋‘์—ˆ๋‹ค.

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

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

Wrapping up

ํ•œ ๋‹ฌ๊ฐ„ ์ด์ƒํ•  ์ •๋„๋กœ ์ƒ๊ฐ์ด ๋ฐ”๋€Œ์—ˆ๋‹ค. ๋” ์ด์ƒ ํ˜ผ์ž์— ๊ฐ€์ค‘์น˜๋ฅผ ๋‘์ง€ ์•Š๊ณ  ํƒ€์ธ๋„ ์ „์ ์œผ๋กœ ๋ฏฟ๊ณ  ๋™๋ฃŒ๋ผ ์ƒ๊ฐํ•œ๋‹ค. 6์‹œ ์ดํ›„ 11์‹œ๊นŒ์ง€ ๋‚จ์•„์žˆ๋”๋ผ๋„ ๋ชฐ๋‘ํ•˜๊ณ  ์žˆ๋Š” ์ฃผ๋ณ€ ๋ถ„๋“ค์—๊ฒŒ ์กด๊ฒฝ์‹ฌ์ด ๋“ค๊ณ  ๋‚˜ ๋˜ํ•œ ๋งค ์ˆœ๊ฐ„ ์ž๊ทน์„ ๋ฐ›๋Š”๋‹ค. ์‚ฌ์‹ค ์šฐํ…Œ์ฝ”์— ๋“ค์–ด์˜ค๊ธฐ ์ „ ํ•จ๊ป˜ ์ž๋ผ๊ธฐ(์• ์ž์ผ๋กœ ๊ฐ€๋Š” ๊ธธ)๋ผ๋Š” ์ฑ…์„ ์ฝ์—ˆ์„ ๋•Œ ๋‚˜์˜ ๊ฐ€์น˜๊ด€๊ณผ ๋‹ค๋ฅธ ๋ถ€๋ถ„์ด ์—ฌ๋Ÿฟ ์กด์žฌํ•ด ๊ณต๊ฐํ•˜๊ธฐ ์–ด๋ ค์› ๋‹ค. ํ•˜์ง€๋งŒ ์ตœ๊ทผ์—๋Š” ์ฑ… ๋‚ด์šฉ์„ ๋งน์‹ ํ•˜๊ธฐ์— ์ด๋ฅด๋ €๋‹ค. ํƒ€์ธ๊ณผ ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” ๋‚ด์ผ์„ ๊ธฐ๋Œ€ํ•˜๋ฉฐ ์ด๋งŒ ์ด ๊ธ€์„ ๋งˆ์นœ๋‹ค.

@JasonLee
Hello :) I'm Jason Lee and currently focusing on React.js.