์ด ๋ฌธ์„œ์˜ ์›๋ณธ์€ ์™ธ๋ถ€ ์œ„ํ‚ค์—์„œ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.
์•ต๊ทค๋Ÿฌ
Angular
์ข…๋ฅ˜
๋ผ์ด์„ ์Šค
๊ฐœ๋ฐœ
๋ฒ„์ „
8.2

1. ๊ฐœ์š”


1. ๊ฐœ์š”[ํŽธ์ง‘]

ํ•˜๋‚˜์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ์›น๊ณผ ๋ชจ๋ฐ”์ผ์„ ๋™์‹œ์—

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

๋ฒ„์ „ 1~2 ๋™์•ˆ jQuery ๊ธ‰์œผ๋กœ ๋น ๋ฅธ ์†๋„๋กœ ์“ฐ์ด๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ํ˜„์žฌ๋Š” ๋ฒ„์ „ 10๊นŒ์ง€ ๋“ฑ์žฅํ•˜์˜€์œผ๋ฉฐ Node.js ๋“ฑ์˜ npm ์„ค์น˜๋ฅผ ์ง€์›ํ•œ๋‹ค. ๋ฒ„์ „ 1.x๋ฅผ AngularJS, ๋ฒ„์ „ 2 ์ด์ƒ๋ถ€ํ„ฐ Angular๋กœ ์ง€์นญํ•œ๋‹ค.[1] Angular๋Š” AngularJS์™€ ๋‹ฌ๋ฆฌ TypeScript ๊ธฐ๋ฐ˜์ด๋‹ค. React๋‚˜ Vue.js์—์„œ๋„ TypeScript๋ฅผ ์“ธ ์ˆ˜ ์žˆ์ง€๋งŒ ์–ด๋””๊นŒ์ง€๋‚˜ ์˜ต์…˜์ธ ๋ฐ ๋ฐ˜ํ•ด, Angular๋Š” ์ผ๋‹จ TypeScript๋กœ ์“ธ ๊ฒƒ์„ ์ „์ œ๋กœ ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ์ ์ด ์ฐจ์ด์ .

Angular๋กœ ๋งŒ๋“ค์–ด์ง„ ์•ฑ์€ MVVM(Model-View-ViewModel) ํŒจํ„ด์„ ์ฑ„ํƒํ•œ๋‹ค. ์ „ํ†ต์ ์ธ MVC ๊ตฌ์กฐ์—์„œ ์ปจํŠธ๋กค๋Ÿฌ๊ฐ€ ๋ทฐ ๋ชจ๋ธ๋กœ ๋Œ€์ฒด๋œ ๊ตฌ์กฐ. ์ปจํŠธ๋กค๋Ÿฌ์™€ ๋‹ฌ๋ฆฌ ๊ฐ ๋ทฐ์™€ ๋ทฐ ๋ชจ๋ธ์ด ๋ณด๋‹ค ๋ฐ€์ ‘ํ•œ ๊ด€๊ณ„๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.
[1] ๊ทธ๋ž˜์„œ Angular 2๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค.