React, Angular, Vue.js๋Š” ๋ชจ๋‘ ์ธ๊ธฐ ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, ๊ฐ๊ธฐ ๋‹ค๋ฅธ ํŠน์ง•๊ณผ ์žฅ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ™‚

1๏ธโƒฃ React

  • ์œ ํ˜• : ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

       * ๋‹ค์–‘ํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ๋“ค์„ ๊ฒฐํ•ฉํ•˜๋ฉด ํ”„๋ ˆ์ž„์›Œํฌ์ฒ˜๋Ÿผ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— React๋ฅผ ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

  • ์ฐฝ์‹œ์ž : Meta (Facebook)
  • ์ฃผ์š” ํŠน์ง•
    • ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ : ๋ชจ๋“  UI ์š”์†Œ๋ฅผ ๋…๋ฆฝ์ ์ธ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ, ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์ด ๋›ฐ์–ด๋‚ฉ๋‹ˆ๋‹ค.
    • JSX : JavaScript์™€ HTML์„ ํ˜ผํ•ฉํ•œ ๋ฌธ๋ฒ•(JSX)์„ ์‚ฌ์šฉํ•ด UI๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
    • Virtual DOM : DOM ๋ณ€๊ฒฝ์„ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•ด ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.
    • ์ž์œ ๋„ : ๋ผ์šฐํŒ…, ์ƒํƒœ ๊ด€๋ฆฌ, ์Šคํƒ€์ผ๋ง ๋“ฑ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์„ ํ•„์š”์— ๋”ฐ๋ผ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ ์‚ฌ๋ก€ : Facebook, Instagram, Netflix, Airbnb

 

2๏ธโƒฃ Angular

  • ์œ ํ˜• : ํ”„๋ ˆ์ž„์›Œํฌ
  • ์ฐฝ์‹œ์ž : Google
  • ์ฃผ์š” ํŠน์ง•
    • ์˜ฌ์ธ์› ์†”๋ฃจ์…˜ : Angular๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด, ๋ผ์šฐํŒ…, HTTP ํด๋ผ์ด์–ธํŠธ, ํผ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
    • TypeScript : ๊ธฐ๋ณธ์ ์œผ๋กœ TypeScript๋ฅผ ์‚ฌ์šฉํ•ด ์ฝ”๋“œ์˜ ์•ˆ์ •์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ž…๋‹ˆ๋‹ค.
    • ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ : ๋ชจ๋ธ๊ณผ ๋ทฐ๊ฐ€ ์ž๋™์œผ๋กœ ๋™๊ธฐํ™”๋˜๋ฉฐ, ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
    • ์˜์กด์„ฑ ์ฃผ์ž… : ๋ชจ๋“ˆํ™”์™€ ํ…Œ์ŠคํŠธ ์šฉ์ด์„ฑ์„ ์œ„ํ•ด ์˜์กด์„ฑ ์ฃผ์ž…(DI)์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ ์‚ฌ๋ก€ : Google, Microsoft, Forbes, PayPal

 

3๏ธโƒฃ Vue.js

  • ์œ ํ˜• : ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(์ง„ํ™”ํ•˜์—ฌ ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์„ฑ๊ฒฉ๋„ ๊ฐ€์ง)
  • ์ฐฝ์‹œ์ž : Evan You (์ „ Google ๊ฐœ๋ฐœ์ž)
  • ์ฃผ์š” ํŠน์ง•
    • ๊ฒฝ๋Ÿ‰ํ™” : ์ดˆ๊ธฐ ์„ค์ •์ด ๊ฐ„๋‹จํ•˜๊ณ  ๊ฐ€๋ฒผ์šฐ๋ฉฐ, ํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋งŒ ์„ ํƒ์ ์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
    • ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ : Angular์™€ ์œ ์‚ฌํ•˜๊ฒŒ, Vue๋„ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
    • ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ : React์™€ ์œ ์‚ฌํ•˜๊ฒŒ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • Vue CLI : ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ, ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ด€๋ฆฌ ๋“ฑ ๊ฐœ๋ฐœ ํŽธ์˜์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” CLI ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ ์‚ฌ๋ก€ : Alibaba, Xiaomi, GitLab, 9GAG

 

๐Ÿ’ก ์š”์•ฝ

  • React๋Š” ์œ ์—ฐํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ์„ค๊ณ„๋˜์–ด ์žˆ์–ด, ํ•„์š”์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ๋„๊ตฌ๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • Angular๋Š” ์˜ฌ์ธ์› ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ ํ•ฉํ•˜๋ฉฐ TypeScript๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • Vue.js๋Š” ๊ฒฝ๋Ÿ‰ํ™”๋˜๊ณ  ํ•™์Šต๊ณก์„ ์ด ๋‚ฎ์•„ ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์ด ์žˆ์œผ๋ฉฐ, ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ๊ณผ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
 
yewon31