3 min read

๋ฌด์Šจ 18ํ•™๋ฒˆ์ด ๋™์•„๋ฆฌ์•ผ

์กธ์—…์€ ํ–ˆ์Šต๋‹ˆ๋‹ค

Table of Contents

๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑ์„ ๊ฑฐ๋“ญํ•  ๋•Œ ๋งˆ๋‹ค ๋Š๋Š” ๊ฒƒ์ด๋ผ๊ณ ๋Š” ์ด๋ชฉ์„ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋Š” (์–ด๊ทธ๋กœ ๋Œ๋ฆฌ๋Š”) ์ œ๋ชฉ ์ง“๊ธฐ ์‹ค๋ ฅ ๋ฟ์ž…๋‹ˆ๋‹ค.

์˜ฌํ•ด๋กœ 2ํ•™๊ธฐ์งธ ๊ต๋‚ด ๋™์•„๋ฆฌ์—์„œ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๋ฆฌ๋“œ๋ฉ˜ํ† ๋ฅผ ๋งก๊ณ  ์žˆ๋Š”๋ฐ์š”, ํ•œ ํ•™๊ธฐ ๋™์•ˆ ์ง„ํ–‰ํ•˜๋ฉฐ ๋Š๋‚€ ์†ŒํšŒ์™€ ํ”ผ๋“œ๋ฐฑ + ๋‹ค์ง์„ ๋‹ด์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์‚ฌ์ „์ง€์‹

์ง€๊ธˆ ์ œ๊ฐ€ ์ฐธ์—ฌํ•˜๊ณ  ์žˆ๋Š” ๋™์•„๋ฆฌ๋Š” ์„ธ์ข…๋Œ€ํ•™๊ต ๊ฐœ๋ฐœ๋™์•„๋ฆฌ ์•„๋กฌ alom ์ž…๋‹ˆ๋‹ค. ๋™์•„๋ฆฌ๋Š” ๊ธฐํš, ๋””์ž์ธ ๋ถ€ํ„ฐ Node.js, Spring ๋ฐฑ์—”๋“œ, ํ”Œ๋Ÿฌํ„ฐ, ๋ฆฌ์•กํŠธ ๋“ฑ ๋‹ค์–‘ํ•œ ํŠธ๋ž™์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๊ณ , ๋ฉ˜ํ‹ฐ๊ฐ€ 1ํ•™๊ธฐ(12์ฃผ) ์ฝ”์Šค๋ฅผ ์ฐธ์—ฌํ•œ ๋’ค ์ž์œจ์ ์œผ๋กœ ๋ชจ์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋Š” ์‹์œผ๋กœ ์ง„ํ–‰๋˜๊ณ  ์žˆ์–ด์š”.

์ €๋Š” ์ด ์ค‘์—์„œ ์›น ํ”„๋ก ํŠธ์—”๋“œ(๋ฆฌ์•กํŠธ) ํŠธ๋ž™์„ ์šด์˜ํ•˜๊ณ  ์žˆ์–ด์š”.

๋ฆฌ์•กํŠธํŒ€์€ ๋ฆฌ๋“œ๋ฉ˜ํ†  2๋ช… + ๋ฉ˜ํ†  7๋ช… + ๋ฉ˜ํ‹ฐ 27๋ช…์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด์š”. ๋ฆฌ๋“œ๋ฉ˜ํ† ๊ฐ€ ์ „๋ฐ˜์ ์ธ ์šด์˜ ๊ณ„ํš๊ณผ ์ฃผ์ฐจ๋ณ„ ๊ณผ์ œ ๋‚ด์šฉ์„ ํฌํ•จํ•œ ์ปค๋ฆฌํ˜๋Ÿผ์„ ๊ตฌ์„ฑํ•˜๋ฉด, ๋ฉ˜ํ† ์™€ ๋ฉ˜ํ‹ฐ๊ฐ€ ์กฐ๋ฅผ ์ด๋ค„ ๋งค ์ฃผ ๊ณผ์ œ๋ฅผ ์ œ์ถœํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์šด์˜๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜ ๋ฉ˜ํ† ํ•  ์‹ค๋ ฅ ์•„๋‹Œ๋ฐ

์‹œ์ž‘ ํ•  ๋•Œ ๊ฐ€์žฅ ํฐ ๊ณ ๋ฏผ์€ ์—ญ์‹œ ์ด๊ฒƒ์ด์—ˆ๋Š”๋ฐ์š”, ๋‚ด๊ฐ€ ๊ฐํžˆ ๋ˆ„๊ตด ๊ฐ€๋ฅด์น  ์ˆ˜ ์žˆ๋Š” ์‹ค๋ ฅ์ด ๋ ๊นŒ? ๋ผ๋Š” ๊ฑฑ์ •์ด ์ปธ์Šต๋‹ˆ๋‹ค. ์–ด๋–ค ์ ์—์„œ ๊ณ ๋ฏผ์ด ๋ ๊นŒ? ๋ผ๊ณ  ์ƒ๊ฐํ•ด ๋ณด์•˜์„ ๋•Œ ๊ฐ€์žฅ ๊ฑฑ์ • ๋˜๋Š” ์ ์€ - ๋‚˜๋„ ๋ชจ๋ฅด๋Š” ์ •๋ณด๋ฅผ ๋ฌผ์–ด๋ณผ๋•Œ๋‚˜, ๋‚ด๊ฐ€ ์ž˜๋ชป๋œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•  ๋•Œ - ์˜€๋˜ ๊ฒƒ ๊ฐ™์•„์š”.

๊ทธ๋ž˜์„œ ์ปค๋ฆฌํ˜๋Ÿผ์˜ ๋‚œ์ด๋„ ์ž์ฒด๋ฅผ ๋งŽ์ด ๋‚ฎ์ถ”์–ด ์›น ๊ฐœ๋ฐœ์„ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์นœ๊ตฌ๋“ค์—๊ฒŒ ํฅ๋ฏธ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์ž ์ •๋„๋กœ ์‚ผ์•˜์Šต๋‹ˆ๋‹ค.

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

2024๋…„์˜ ํ”ผ๋“œ๋ฐฑ

์ €๋ฒˆ ํ•™๊ธฐ์˜ ์ปค๋ฆฌํ˜๋Ÿผ์€ ์ด๋žฌ์Šต๋‹ˆ๋‹ค.

๊ณ„ํš์€ ์ด๋žฌ๋Š”๋ฐ์š”,

  1. HTML, JS, CSS๋กœ element๋ฅผ ๋งŒ๋“ค์–ด ์›น ํŽ˜์ด์ง€๋ฅผ ์ œ์–ดํ•˜๋Š” ๋ฒ•์„ ์ตํžŒ ํ›„
  2. React์—์„œ๋Š” ๊ฐ™์€ ํ–‰์œ„๋ฅผ ์–ด๋–ป๊ฒŒ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ์•„๋ณด๊ณ 
  3. ์ดํ•ด๋ฅผ ํ† ๋Œ€๋กœ ์ž‘์€ ์›นํŽ˜์ด์ง€๋“ค์„ ๋งŒ๋“ค์–ด ์ง์ ‘ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค ๋ผ๋Š” ์ƒ๊ฐ์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๋ชจ๋“  ์ผ์ด ๊ทธ๋ ‡๋“ฏ์ดใ…ก ๊ณ„ํš๋Œ€๋กœ ๋˜๋Š” ์ผ์€ ์–ผ๋งˆ ์—†์—ˆ๊ตฌ์š”, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ๋“ค์ด ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

  1. ๋ฉ˜ํ‹ฐ๋“ค ๊ฐ„์˜ ์‹ค๋ ฅ์ฐจ๊ฐ€ ํฌ๊ณ 
  2. ํฅ๋ฏธ๋ฅผ ์ฐพ๊ธฐ์—๋Š” ๋„ˆ๋ฌด ๋ฃจ์ฆˆํ•œ ์ปค๋ฆฌํ˜๋Ÿผ
  3. ๊ณผ์ œ ์ œ์ถœ์˜ ์–ด๋ ค์›€

์›น์œผ๋กœ ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๋„ˆ๋„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด! ๋ผ๋Š” ์ž์‹ ๊ฐ์„ ์ฃผ๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์—ˆ๋˜ ์ฝ”์Šค์˜€๋Š”๋ฐ, ์ด๋ฏธ ๋ฆฌ์•กํŠธ๋ฅผ ์กฐ๊ธˆ์ด๋ผ๋„ ์ ‘ํ•ด ๋ณธ ์นœ๊ตฌ๋“ค์—๊ฒŒ๋Š” ๋งŽ์ด ์ง€๋ฃจํ•  ์ˆ˜ ๋ฐ–์— ์—†๋Š” ๊ณผ์ œ์˜€์Šต๋‹ˆ๋‹ค.

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

2025๋…„์€ ๋‹ค๋ฅด๋‹ค

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

  1. ์ด๋Ÿฐ ์‹์œผ๋กœ ์ด๋ก ์˜ ๋น„์ค‘์€ ์ค„์ด๊ณ  ์‹ค์ œ๋กœ ํ™”๋ฉด์— ๋ฌด์–ธ๊ฐ€ ๊ทธ๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ๊ตฌ์š”,

  2. ๊ฐ™์€ ๊ณผ์ œ ์•ˆ์—์„œ๋„ ๋ ˆ๋ฒจ์„ ๋งŒ๋“ค์–ด์„œ ์‹ค๋ ฅ์— ๋”ฐ๋ผ ์›ํ•˜๋Š” ๋ ˆ๋ฒจ๊นŒ์ง€ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์–ด์š”. (์š”๋ ‡๊ฒŒ)

  3. CodeSandbox๋ฅผ ํ†ตํ•ด ์˜จ๋ผ์ธ ์—๋””ํ„ฐ ํ™˜๊ฒฝ์„ ์‚ฌ์šฉํ•ด๋ณด์ž๋Š” ์ œ์•ˆ์ด ์žˆ์—ˆ์–ด์š”. ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ํ”„๋กœ์ ํŠธ ์œ„์— ์ง์ ‘ ์™„์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์„ Slot์œผ๋กœ ์—ด์–ด๋‘๊ณ , ๋ฉ˜ํ‹ฐ๋‹˜๋“ค์ด Forkํ•ด์„œ ์ˆ˜์ •ํ•˜๊ณ  ์ œ์ถœํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋„Œ ๋ญ˜ ๋ฐฐ์› ๋Š”๋ฐ?

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

๊ทธ๋Ÿผ ์ด๋ฒˆ ํ•™๊ธฐ๋„ ํ™”์ดํŒ… ํ•˜๊ธฐ ๐Ÿ™†๐Ÿปโ€โ™‚๏ธ