Ã¥¼Ò°³
ŸÀÔ½ºÅ©¸³Æ®, ECMAScript 6¿Í Ä£ÇØÁö´Â ½ÇÀü ¾Þ±Ö·¯ ÀÔ¹®¼!
»õ·Î¿î ±â¼úÀ» ¹è¿ï ¶§ °á°ú¹°ÀÌ ¾ø´Ù¸é ½±°Ô ÁöÄ¡±â ¸¶·ÃÀÌ´Ù. ÀÌ Ã¥Àº 1ºÎ ±âÃÊ ´ÙÁö±â, 2ºÎ ±âº»±â Çâ»óÇϱâ, 3ºÎ ±íÀÌ µé¾î°¡±â·Î ³ª´©¾î ¾Þ±Ö·¯¸¦ ¼³¸íÇÏ°í ½ÇÁ¦ ÇÁ·ÎÁ§Æ®ÀÎ »óÇ° °ü¸® ¾ÖÇø®ÄÉÀ̼ÇÀ» °á°ú¹°·Î ¸¸µç´Ù. ¾Þ±Ö·¯¸¦ ½ÃÀÛÇÏ´Â µ¥ °¡Àå Å« °É¸²µ¹ÀΠŸÀÔ½ºÅ©¸³Æ®¸¦ ½±°Ô ¼³¸íÇÏ¿© ÇнÀ ºÎ´ãÀ» ÁÙ¿©ÁÖ¸ç, ÀúÀÚÀÇ ½Ç¹« °æÇèÀ» Àû±Ø »ì·Á ½Ç¹«¿¡ ²À ÇÊ¿äÇÑ °³³ä°ú ½Ç¼öÇϱ⠽¬¿î ºÎºÐÀ» ÀÚ¼¼È÷ ¼³¸íÇÑ´Ù.
¸ñÂ÷
PART I ±âÃÊ ´ÙÁö±â
CHAPTER 1 ¾Þ±Ö·¯ ÁغñÇϱâ
1.1 Node.js
1.2 NPM ´Ù·ç±â
__1.2.1 ÆÐÅ°Áö ¼³Ä¡
__1.2.2 ½Ç½À: welcome-msg-app
__1.2.3 ÆÐÅ°Áö¿Í ÀÇÁ¸ °ü°è
__1.2.4 ·ÎÄà ȯ°æ°ú Àü¿ª ȯ°æ
__1.2.5 package.json
1.3 ¸¶Ä¡¸ç
CHAPTER 2 ¾Þ±Ö·¯ ½ÃÀÛÇϱâ
2.1 ŸÀÔ½ºÅ©¸³Æ®
__2.1.1 ŸÀÔ ¾ð¾î
__2.1.2 »óÀ§ ¾ð¾î
__2.1.3 ¿¸° ¾ð¾î
__2.1.4 ¿¡µðÅÍ ¼³Á¤
2.2 Hello, Angular
__2.2.1 ng new
__2.2.2 ng serve
__2.2.3 ng test
__2.2.4 ŸÀÔ ¼±¾ð Á¤º¸
2.3 ¸¶Ä¡¸ç
CHAPTER 3 ¾Þ±Ö·¯ ¾ÆÅ°ÅØó
3.1 ºä¸¦ ±¸¼ºÇÏ´Â ¿ä¼Ò
__3.1.1 ÄÄÆ÷³ÍÆ®¿Í ÅÛÇø´
__3.1.2 ÄÄÆ÷³ÍÆ® »ý¸í ÁÖ±â
__3.1.3 ÄÄÆ÷³ÍÆ® Æ®¸®
__3.1.4 µ¥ÀÌÅÍ ¹ÙÀεù
__3.1.5 ¸¶Ä¡¸ç
3.2 ¾ÖÇø®ÄÉÀ̼ÇÀ» ¿Ïº®ÇÏ°Ô ¸¸µå´Â ¿ä¼Ò
__3.2.1 ¼ºñ½º¿Í ÀÇÁ¸¼º ÁÖÀÔ
__3.2.2 »óÅ °ü¸® ¹× °øÀ¯
__3.2.3 Áö½ÃÀÚ
__3.2.4 ÆÄÀÌÇÁ
__3.2.5 ¸ðµâ
3.3 ¸ÓƼ¸®¾ó ÆÐÅ°Áö Àû¿ë
3.4 ¸¶Ä¡¸ç
PART II ±âº»±â Çâ»óÇϱâ
CHAPTER 4 ºä¸¦ ±¸¼ºÇÏ´Â ±âÃÊ
4.1 ÄÄÆ÷³ÍÆ®
__4.1.1 ÄÄÆ÷³ÍÆ®ÀÇ ¼±¾ð
__4.1.2 ¸ÞŸµ¥ÀÌÅÍ
__4.1.3 ºÎÆ®½ºÆ®·¡ÇÎ
__4.1.4 ÄÄÆ÷³ÍÆ® Æ®¸®
4.2 ÅÛÇø´
__4.2.1 ÀýÂ÷Àû ¹æ½Ä°ú ¼±¾ðÀû ¹æ½Ä
__4.2.2 µ¥ÀÌÅÍ ¹ÙÀεù
__4.2.3 Áö½ÃÀÚ
__4.2.4 ÆÄÀÌÇÁ
4.3 ¸¶Ä¡¸ç
CHAPTER 5 °ß°íÇÑ ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
5.1 ¼ºñ½º
__5.1.1 ¼ºñ½ºÀÇ »ý¼º°ú »ç¿ë
__5.1.2 ½Ç½À: ¸¶¿ì½º À§Ä¡ ·Î°Å
__5.1.3 ½Ì±ÛÅÏÀ¸·Î¼ÀÇ ¼ºñ½º
5.2 ÀÇÁ¸¼º ÁÖÀÔ
__5.2.1 Injectable, Inject µ¥ÄÚ·¹ÀÌÅÍ
__5.2.2 providers
__5.2.3 ÀÇÁ¸¼º ÁÖÀÔ±â Æ®¸®
__5.2.4 Host, Optional µ¥ÄÚ·¹ÀÌÅÍ
5.3 Å×½ºÆ® ÄÚµå ÀÛ¼º
__5.3.1 ¼ºñ½º Å×½ºÆ®
__5.3.2 ÄÄÆ÷³ÍÆ® Å×½ºÆ®
5.4 µð¹ö±ë
5.5 ¸¶Ä¡¸ç
CHAPTER 6 ÄÄÆ÷³ÍÆ® °í±Þ
6.1 µ¶¸³µÈ ¿ä¼Ò: ÄÄÆ÷³ÍÆ®
__6.1.1 À¥ ÄÄÆ÷³ÍÆ®
__6.1.2 ÄÄÆ÷³ÍÆ®¿Í ½ºÅ¸ÀÏ Á¤º¸
__6.1.3 ÄÄÆ÷³ÍÆ®ÀÇ µ¶¸³¼ºÀ» ±ú¶ß¸®´Â ¾ÈƼÆÐÅÏ
6.2 ÄÄÆ÷³ÍÆ® °£ »óÅ °øÀ¯¿Í À̺¥Æ® ÀüÆÄ
__6.2.1 ºÎ¸ð-ÀÚ½Ä ÄÄÆ÷³ÍÆ® °£ÀÇ Åë½Å
__6.2.2 ½Ç½À: ÄÄÆ÷³ÍÆ® Åë½Å V2
__6.2.3 ´Ù¾çÇÑ »óÅ °øÀ¯ ½Ã³ª¸®¿À
__6.2.4 ½Ì±ÛÅÏ ¼ºñ½º¸¦ ÀÌ¿ëÇÑ »óÅ °øÀ¯
6.3 ¾Þ±Ö·¯ ¹æ½ÄÀÇ ÅÛÇø´ ¿ä¼Ò Ž»ö
__6.3.1 ViewChild¸¦ »ç¿ëÇÑ ¿ä¼Ò Ž»ö
__6.3.2 ÅÛÇø´ ÂüÁ¶ º¯¼ö¿Í ElementRef
__6.3.3 Content Projection°ú ContentChild¸¦ »ç¿ëÇÑ ¿ä¼Ò Ž»ö
6.4 ÄÄÆ÷³ÍÆ® »ý¸í ÁÖ±â
__6.4.1 ngOnInit°ú ngOnDestroy
__6.4.2 ngAfterContentInit°ú ngAfterViewInit
__6.4.3 ngOnChanges
__6.4.4 ngDoCheck
__6.4.5 ngAfterContentChecked¿Í ngAfterViewChecked
__6.4.6 Áö½ÃÀÚÀÇ »ý¸í ÁÖ±â
6.5 ¸¶Ä¡¸ç
CHAPTER 7 HTTP Åë½Å°ú RxJS
7.1 HttpModule°ú Http ¼ºñ½º ±âÃÊ
__7.1.1 ½Ç½À: ÃÊ°£´Ü »ç¿ëÀÚ Á¶È¸ ¾ÖÇø®ÄÉÀ̼Ç
__7.1.2 angular-in-memory-web-api È°¿ë
7.2 RxJS
__7.2.1 ¿Ö RxJSÀΰ¡?
__7.2.2 RxJS ¿ø¸®
__7.2.3 RxJS ¿¬»êÀÚ È°¿ë
__7.2.4 RxJS¸¦ È°¿ëÇÑ ¸¶¿ì½º À§Ä¡ ·Î°Å ÄÚµå °³¼±
7.3 °ÔÀÌÆ®¿þÀÌ ±â¹Ý Http ¼ºñ½º È°¿ë
__7.3.1 ApiGateway ¼ºñ½º
__7.3.2 ½Ç½À: »ç¿ëÀÚ °ü¸® ¾ÖÇø®ÄÉÀ̼Ç
__7.3.3 HTTP Åë½Å °ü·Ã Áߺ¹ ÄÚµå Á¦°Å
7.4 ¸¶Ä¡¸ç
CHAPTER 8 Æû ´Ù·ç±â
8.1 ÆûÀÇ ±¸¼º
__8.1.1 Æû ¸ðµ¨
__8.1.2 AbstractControl°ú ÆûÀÇ °ª »óÅÂ
__8.1.3 Æû Áö½ÃÀÚ
__8.1.4 ½Ç½À: NgModel°ú FormControl
8.2 ÅÛÇø´ ÁÖµµ Æû
__8.2.1 ngModel°ú ¾ç¹æÇâ ¹ÙÀεù
__8.2.2 ½Ç½À: ÅÛÇø´ ÁÖµµ Æû
__8.2.3 Æû À¯È¿¼º °ËÁõ
__8.2.4 Ä¿½ºÅÒ Validator Áö½ÃÀÚ ÀÛ¼º
8.3 ¹ÝÀÀÇü Æû(¸ðµ¨ ÁÖµµ Æû)
__8.3.1 ReactiveFormsModule
__8.3.2 FormBuilder
__8.3.3 FormGroup, FormControlName
__8.3.4 ½Ç½À: ¹ÝÀÀÇü Æû
__8.3.5 ½Ç½À: µ¿Àû Æû
8.4 ¸¶Ä¡¸ç
CHAPTER 9 ¾Þ±Ö·¯ µ¿ÀÛ ¿ø¸®
9.1 ºÎÆ®½ºÆ®·¦°ú ÄÄÆÄÀÏ
__9.1.1 ¾ÖÇø®ÄÉÀ̼ÇÀÇ ÃÖÃÊ ÁøÀÔÁ¡
__9.1.2 JIT ÄÄÆÄÀÏ
__9.1.3 AOT ÄÄÆÄÀÏ
__9.1.4 ºÎÆ®½ºÆ®·¦ °úÁ¤ ºÐ¼®
9.2 Zone.js¿Í º¯È °¨Áö
__9.2.1 ¾Þ±Ö·¯¸¦ ¿òÁ÷ÀÌ°Ô ¸¸µå´Â ¼¼ °¡Áö À̺¥Æ®
__9.2.2 Zone.js¸¦ È°¿ëÇÑ ºñµ¿±â ÄÚµå °¨Áö
__9.2.3 »óÅ º¯È¸¦ ÀÏÀ¸Å°´Â ¼¼ °¡Áö À̺¥Æ®
__9.2.4 º¯È °¨Áö Æ®¸®¿Í º¯È °¨Áö Àü·«
9.3 ¸¶Ä¡¸ç
PART III ±íÀÌ µé¾î°¡±â
CHAPTER 10 ÇÁ·ÎÁ§Æ®: »óÇ° °ü¸® ¾ÖÇø®ÄÉÀÌ¼Ç ±¸¼º
10.1 ¾ÖÇø®ÄÉÀÌ¼Ç ¼³°è
__10.1.1 ±â´É Á¤ÀÇ ¹× µµ¸ÞÀÎ ¸ðµ¨
__10.1.2 ÄÄÆ÷³ÍÆ® Æ®¸®
10.2 ÇÁ·ÎÁ§Æ® ±¸¼º
10.3 ÇÁ·ÎÁ§Æ® ±¸Çö 1: ±âº» ·¹À̾ƿô ±¸Çö
__10.3.1 ÁÖ¿ä ÄÄÆ÷³ÍÆ® »ý¼º
__10.3.2 ÄÄÆ÷³ÍÆ® ±¸Çö ÄÚµå
__10.3.3 ¶ó¿ìÅÍ ¾øÀÌ »çÀ̵å¹Ù ±â´É ±¸Çö
10.4 ¸¶Ä¡¸ç
CHAPTER 11 ¸ðµâ°ú ¶ó¿ìÅÍ
11.1 ¸ðµâÀÇ ºÐ¸®
__11.1.1 ±â´É ¸ðµâ
__11.1.2 ÇÙ½É ¸ðµâ
__11.1.3 ¸ðµâÀÇ imports, exports
__11.1.4 ÇÁ·ÎÁ§Æ® ±¸Çö 2: µµ¸ÞÀκ° ±âº» ±¸Çö
11.2 ¶ó¿ìÅÍ ±âº»
__11.2.1 ¶ó¿ìÅÍ ¼³Á¤: Route
__11.2.2 Routes µî·Ï
__11.2.3 RouterLink, RouterLinkActive
__11.2.5 ÇÁ·ÎÁ§Æ® ±¸Çö 3: ¶ó¿ìÅÍ ¼³Á¤
__11.2.6 ¶ó¿ìÅÍ »ç¿ëÀÇ ÀåÁ¡
11.3 ¶ó¿ìÅÍ È°¿ë
__11.3.1 »óÅ °ü¸®
__11.3.2 Router
__11.3.3 ActivatedRoute
__11.3.4 °¡µåÀÇ ¼³Á¤
11.4 ¸ðµâº° ¶ó¿ìÅÍ
__11.4.1 ÄÄÆ÷³ÍÆ® °æ·Î
__11.4.2 ¶ó¿ìÆà ¼³Á¤ ºÐ¸®Çϱâ
__11.4.3 ÇÁ·ÎÁ§Æ® ±¸Çö 4: ¶ó¿ìÅÍ ¼³Á¤ ºÐ¸®
11.5 ¸¶Ä¡¸ç
CHAPTER 12 ÇÁ·ÎÁ§Æ®: ÆÄÀ̾À̽º »ç¿ë
12.1 ÆÄÀ̾À̽º »ç¿ë
__12.1.1 ÇÁ·ÎÁ§Æ® »ý¼º
__12.1.2 ÆÄÀ̾À̽º CLI
__12.1.3 ÆÄÀ̾À̽º ¿¬µ¿
12.2 ÇÁ·ÎÁ§Æ® ±¸Çö 5
__12.2.1 µµ¸ÞÀÎ ¸ðµ¨ Ŭ·¡½º ±¸Çö
__12.2.2 »ç¿ëÀÚ ¼¼¼Ç ±â´É ±¸Çö
12.3 ÇÁ·ÎÁ§Æ® ±¸Çö 6
__12.3.1 ½Ç½Ã°£ µ¥ÀÌÅͺ£À̽º »ç¿ë
__12.3.2 NoCounterService ±¸Çö
__12.3.3 DataStoreService ±¸Çö
__12.3.4 ÆÄÀ̾À̽º º¸¾È ±ÔÄ¢ ¼³Á¤
12.4 ¸¶Ä¡¸ç
CHAPTER 13 ÇÁ·ÎÁ§Æ®: »óÇ° °ü¸® ¾ÖÇø®ÄÉÀÌ¼Ç ±¸Çö ÃÖÁ¾
13.1 ÇÁ·ÎÁ§Æ® ±¸Çö 7
__13.1.1 Ä«Å×°í¸® °ü¸® ºä
__13.1.2 CategoryDetailComponent
__13.1.3 CategoryDetailResolverService
__13.1.4 CategoryItemComponent
__13.1.5 CategoryManagementComponent
__13.1.6 CategoryListResolverService
13.2 ÇÁ·ÎÁ§Æ® ±¸Çö 8
__13.2.1 »óÇ° °ü¸® ºä
__13.2.2 ProductDetailComponent
__13.2.3 ProductDetailResolverService
__13.2.4 ProductListComponent
__13.2.5 ProductListResolverService
__13.2.6 CheckedProductSetService
__13.2.7 ButtonGroupComponent
__13.2.8 ProductBulkUpdaterService
__13.2.9 ProductManagementComponent
13.3 ÇÁ·ÎÁ§Æ® ÃÖÁ¾ ±¸Çö
__13.3.1 MainDashboardComponent
__13.2.2 ½ºÇdzÊ
__13.3.3 »óÇ° »óÅÂ ÆÄÀÌÇÁ
__13.3.4 CanDeactivate °¡µå ¼³Á¤
__13.3.5 ¼¼¼Ç °¡µå
13.4 ¸¶Ä¡¸ç
ºÎ·Ï. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ÁøÈ: ES6(ECMAScript 6)
1. ES6 Ç¥ÁØÀÇ ÀǹÌ
2. ¸ðµâ ½Ã½ºÅÛ
3. ¸ðµâ ¹øµé·¯
4. ½Ç½À: area-calculator