- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ÀÚ¹Ù½ºÅ©¸³Æ® ¸¶½ºÅÍ ºÏ[Á¦ÀÌÆà]
°³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ ±âº» ¹®¹ýºÎÅÍ ¿Ïº®ÇÑ ÇöÀå ´ëÀÀ±îÁö!
ÀÌ Ã¥Àº °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ ±âº» ¹®¹ý°ú ECMAScript 6¿¡ ÀÇÇØ °è¼Ó ÁøÈÇÏ°í ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ »õ·Î¿î ±â¹ýÀº ¹°·Ð, °´Á¦ÁöÇâ ±¸¹®, Ajax Ŭ¶óÀ̾ðÆ® Ãø °³¹ß¿¡ ´ëÇØ »ó¼¼È÷ ¼³¸íÇϸç, Å×½ºÆ®, ¹®¼, ÄÚµù µî ÇöÀå¿¡¼ ²À ÇÊ¿äÇÑ Áö½Äµµ ´ã°Ü ÀÖ´Ù.
?Ã¥ÀÇ ÀϺΠ³»¿ëÀ» ¹Ì¸® Àо½Ç ¼ö ÀÖ½À´Ï´Ù. ¹Ì¸®º¸±â
ÀÌ Ã¥Àº °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ ±âº» ¹®¹ý°ú ECMAScript 6¿¡ ÀÇÇØ °è¼Ó ÁøÈÇÏ°í ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ »õ·Î¿î ±â¹ýÀº ¹°·Ð, °´Á¦ÁöÇâ ±¸¹®, Ajax Ŭ¶óÀ̾ðÆ® Ãø °³¹ß¿¡ ´ëÇØ »ó¼¼È÷ ¼³¸íÇϸç, Å×½ºÆ®, ¹®¼, ÄÚµù µî ÇöÀå¿¡¼ ²À ÇÊ¿äÇÑ Áö½Äµµ ´ã°Ü ÀÖ´Ù.
?Ã¥ÀÇ ÀϺΠ³»¿ëÀ» ¹Ì¸® Àо½Ç ¼ö ÀÖ½À´Ï´Ù. ¹Ì¸®º¸±â
ÀúÀÚ: ¾ß¸¶´Ù ¿ä½ÃÈ÷·Î Àú
CHAPTER 1 ¼Ò°³ 1
1.1 JavaScript¶õ? 2
1.1.1 JavaScriptÀÇ ¿ª»ç 2
1.1.2 JavaScript ºÎÈ° ¡ª Ajax, ±×¸®°í HTML5ÀÇ ½Ã´ë 3
1.1.3 ³ª»Û À̹ÌÁö¿¡ ´ëÇÑ ¿ÀÇØ 5
1.1.4 ¾ð¾î·Î¼ÀÇ ³× °¡Áö Ư¡ 6
1.2 ECMAScript 2015¶õ? 8
1.2.1 ºê¶ó¿ìÀúº° ´ëÀÀ »óȲ 9
1.3 ºê¶ó¿ìÀúÀÇ °³¹ßÀÚ µµ±¸ 11
1.3.1 °³¹ßÀÚ µµ±¸ ½ÃÀÛÇϱâ 11
1.3.2 HTML/CSSÀÇ ¼Ò½º È®ÀÎÇϱâ - [Elements] ÅÇ 13
1.3.3 Åë½Å »óȲ ÃßÀûÇϱâ - [Network] ÅÇ 13
1.3.4 ½ºÅ©¸³Æ® µð¹ö±×Çϱâ - [Sources] ÅÇ 15
1.3.5 ½ºÅ丮Áö/ÄíÅ° ³»¿ë È®ÀÎÇϱâ - [Application] ÅÇ 16
1.3.6 ·Î±× È®ÀÎ/°´Ã¼ Á¶ÀÛ µîÀÇ ¸¸´É µµ±¸ - [Console] ÅÇ 17
CHAPTER 2 ±âº»ÀûÀÎ ÀÛ¼º¹ý ÀÍÈ÷±â 19
2.1 JavaScriptÀÇ ±âº»ÀûÀΠǥ±â 20
2.1.1 JavaScript·Î ¡°¾È³çÇϼ¼¿ä, ÀÚ¹Ù½ºÅ©¸³Æ®!¡± Ç¥±âÇϱâ 20
2.1.2 JavaScript¸¦ HTML ÆÄÀÏ ¾È¿¡ Áý¾î³Ö±â - [script] ¿ä¼Ò 23
2.1.3 ¹®ÀåÀÇ ±ÔÄ¢ 28
2.1.4 ÁÖ¼® »ðÀÔÇϱâ 30
2.2 º¯¼ö¿Í »ó¼ö 33
2.2.1 º¯¼ö ¼±¾ðÇϱâ 33
2.2.2 ½Äº°ÀÚÀÇ ¸í¸í ±ÔÄ¢ 36
2.2.3 »ó¼ö ¼±¾ðÇϱâ 38
2.3 µ¥ÀÌÅÍÇü 41
2.3.1 JavaScriptÀÇ ÁÖ¿ä µ¥ÀÌÅÍÇü 42
2.3.2 ¸®ÅÍ·² 43
2.4 ¿¬»êÀÚ 52
2.4.1 »ê¼ú ¿¬»êÀÚ 52
2.4.2 ´ëÀÔ ¿¬»êÀÚ 55
2.4.3 ºñ±³ ¿¬»êÀÚ 62
2.4.4 ³í¸® ¿¬»êÀÚ 66
2.4.5 ºñÆ® ¿¬»êÀÚ 69
2.4.6 ±× ¿ÜÀÇ ¿¬»êÀÚ 71
2.4.7 ¿¬»êÀÚÀÇ ¿ì¼±¼øÀ§¿Í °áÇÕ¼ø¼ 73
2.5 Á¦¾î ±¸¹® 77
2.5.1 Á¶°Ç¿¡ µû¶ó ºÐ±â ó¸®Çϱâ - if ¸í·É 77
2.5.2 ½ÄÀÇ °ª¿¡ µû¶ó ºÐ±â ó¸®Çϱâ - switch ¸í·É 83
2.5.3 Á¶°Ç½Ä¿¡ µû¶ó ·çÇÁ Á¦¾îÇϱâ - while/do¡¦while ¸í·É 86
2.5.4 ¹«ÇÑ ·çÇÁ 89
2.5.5 ÁöÁ¤ Ƚ¼ö¸¸Å¸¸ ·çÇÁ ó¸®Çϱâ - for ¸í·É 90
2.5.6 ¿¬»ó ¹è¿ÀÇ ¿ä¼Ò¸¦ ¼ø¼´ë·Î ó¸®Çϱâ - for¡¦in ¸í·É 92
2.5.7 ¹è¿ µîÀ» ¼ø¼´ë·Î ó¸®Çϱâ - for¡¦of ¸í·É 94
2.5.8 ·çÇÁ¸¦ µµÁß¿¡ ½ºÅµ/Áß´ÜÇϱâ - break/continue ¸í·É 95
2.5.9 ¿¹¿Ü ó¸®Çϱâ - try¡¦catch¡¦finally ¸í·É 100
2.5.10 JavaScriptÀÇ À§ÇèÇÑ ±¸¹® ±ÝÁöÇϱâ - Strict ¸ðµå 103
CHAPTER 3 ±âº» µ¥ÀÌÅÍ Á¶ÀÛÇϱâ - ³»ÀåÇü °´Ã¼ 107
3.1 °´Ã¼¶õ? 108
3.1.1 °´Ã¼ = ÇÁ·ÎÆÛƼ ¸Þ¼Òµå 109
3.1.2 °´Ã¼¸¦ ÀÌ¿ëÇϱâ À§ÇÑ Áغñ - new ¿¬»êÀÚ 110
3.1.3 Á¤Àû ÇÁ·ÎÆÛƼ/Á¤Àû ¸Þ¼Òµå 112
3.1.4 ³»ÀåÇü °´Ã¼¶õ? 112
3.2 ±âº» µ¥ÀÌÅ͸¦ Ãë±ÞÇϱâ À§ÇÑ °´Ã¼ 116
3.2.1 ¹®ÀÚ¿ Á¶ÀÛÇϱâ - String °´Ã¼ 116
3.2.2 ¼ýÀÚ Á¶ÀÛÇϱâ - Number °´Ã¼ 120
3.2.3 ½É¹ú ÀÛ¼ºÇϱâ - Symbol °´Ã¼ 125
3.2.4 ±âº»ÀûÀÎ ¼ýÀÚ ¿¬»ê ½ÇÇàÇϱâ - Math °´Ã¼ 127
3.3 °ªÀÇ ÁýÇÕÀ» ó¸®/Á¶ÀÛÇϱâ - Array/Map/Set °´Ã¼ 131
3.3.1 ¹è¿ Á¶ÀÛÇϱâ - Array °´Ã¼ 131
3.3.2 ¿¬»ó ¹è¿ Á¶ÀÛÇϱâ - Map °´Ã¼ 144
3.3.3 Áߺ¹µÇÁö ¾ÊÀº °ªÀÇ ÁýÇÕ Á¶ÀÛÇϱâ - Set °´Ã¼ 148
3.4 ³¯Â¥/½Ã°£ µ¥ÀÌÅÍ Á¶ÀÛÇϱâ - Date °´Ã¼ 151
3.4.1 Date °´Ã¼ »ý¼ºÇϱâ 151
3.4.2 ³¯Â¥/½Ã°£ °ªÀ» °¡»ê/°¨»êÇϱâ 154
3.4.3 ³¯Â¥/½Ã°£ Â÷ÀÌ ±¸Çϱâ 155
3.5 Á¤±Ô Ç¥ÇöÀ¸·Î ¹®ÀÚ Á¶ÀÛÇϱâ - RegExp °´Ã¼ 157
3.5.1 JavaScript¿¡¼ ÀÌ¿ë °¡´ÉÇÑ Á¤±Ô Ç¥Çö 158
3.5.2 RegExp °´Ã¼¸¦ »ý¼ºÇÏ´Â ¹æ¹ý 159
3.5.3 Á¤±Ô Ç¥Çö¿¡ ÀÇÇÑ ¹®ÀÚ¿ °Ë»ö 160
3.5.4 Á¤±Ô Ç¥ÇöÀÇ ¿É¼ÇÀ¸·Î ¸ÅÄ¡ÇÒ ¶§ µ¿ÀÛ Á¦¾îÇϱâ 162
3.5.5 match ¸Þ¼Òµå¿Í exec ¸Þ¼ÒµåÀÇ µ¿ÀÛ Â÷ÀÌ 164
3.5.6 ¸ÅĪÀÇ ¼º°ø ¿©ºÎ °ËÁõÇϱâ 166
3.5.7 Á¤±Ô Ç¥ÇöÀ¸·Î ¹®ÀÚ¿ ġȯÇϱâ 167
3.5.8 Á¤±Ô Ç¥ÇöÀ¸·Î ¹®ÀÚ¿ ºÐÇÒÇϱâ 169
3.6 ¸ðµç °´Ã¼ÀÇ ¸ðÇü - Object °´Ã¼ 170
3.6.1 °´Ã¼¸¦ ±âº»ÇüÀ¸·Î º¯È¯Çϱâ - toString/valueOf ¸Þ¼Òµå 172
3.6.2 °´Ã¼ °áÇÕÇϱâ - assign ¸Þ¼Òµå 173
3.6.3 °´Ã¼ »ý¼ºÇϱâ - create ¸Þ¼Òµå 174
3.6.4 ºÒº¯ °´Ã¼ Á¤ÀÇÇϱâ 177
3.7 JavaScript ÇÁ·Î±×·¥¿¡¼ ÀÚÁÖ ÀÌ¿ëÇÏ´Â ±â´É Á¦°øÇϱâ - Global °´Ã¼ 179
3.7.1 Number °´Ã¼·Î À̵¿ÇÑ ¸Þ¼Òµå 180
3.7.2 Äõ¸® Á¤º¸ À̽ºÄÉÀÌÇÁ ó¸®Çϱâ - encodeURI/encodeURIComponent ÇÔ¼ö 181
3.7.3 µ¿ÀûÀ¸·Î »ý¼ºÇÑ ½ºÅ©¸³Æ® ½ÇÇàÇϱâ - eval ÇÔ¼ö 182
CHAPTER 4 ¹Ýº¹ÀûÀ¸·Î »ç¿ëÇÏ´Â Äڵ带 Çϳª·Î Á¤¸®Çϱâ - ÇÔ¼ö 185
4.1 ÇÔ¼ö¶õ? 186
4.1.1 function ¸í·ÉÀ¸·Î Á¤ÀÇÇϱâ 186
4.1.2 Function »ý¼ºÀÚ·Î Á¤ÀÇÇϱâ 188
4.1.3 ÇÔ¼ö ¸®ÅÍ·² Ç¥ÇöÀ¸·Î Á¤ÀÇÇϱâ 190
4.1.4 ¾Ö·Î¿ì ÇÔ¼ö·Î Á¤ÀÇÇϱâ 191
4.2 ÇÔ¼ö¸¦ Á¤ÀÇÇÒ ¶§ ÁÖÀÇÇÒ ³× °¡Áö »çÇ× 193
4.2.1 return ¸í·ÉÀº µµÁß¿¡ °³ÇàÇÏÁö ¾Ê´Â´Ù 193
4.2.2 ÇÔ¼ö´Â µ¥ÀÌÅÍÇüÀÇ Çϳª´Ù 194
4.2.3 function ¸í·ÉÀº Á¤ÀûÀÎ ±¸Á¶¸¦ ¼±¾ðÇÑ´Ù 196
4.2.4 ÇÔ¼ö ¸®ÅÍ·²/Function »ý¼ºÀÚ´Â ½ÇÇàÇÒ ¶§ ÆǴܵȴ٠197
4.3 º¯¼ö´Â ¾î¶² °÷¿¡¼ ÂüÁ¶ÇÒ ¼ö ÀÖÀ»±î? - ½ºÄÚÇÁ 198
4.3.1 ±Û·Î¹ú º¯¼ö¿Í ·ÎÄà º¯¼öÀÇ Â÷ÀÌÁ¡ 199
4.3.2 º¯¼ö ¼±¾ð¿¡ var ¸í·ÉÀÌ ÇʼöÀÎ ÀÌÀ¯ 199
4.3.3 ·ÎÄà º¯¼öÀÇ À¯È¿¹üÀ§´Â ¾îµð±îÁö? 200
4.3.4 °¡ÀμöÀÇ ½ºÄÚÇÁ - ±âº»Çü°ú ÂüÁ¶ÇüÀÇ Â÷ÀÌ ÁÖÀÇÇϱâ 202
4.3.5 ºí·Ï ·¹º§ÀÇ ½ºÄÚÇÁ´Â Á¸ÀçÇÏÁö ¾Ê´Â´Ù (ES2015 ÀÌÀü) 204
4.3.6 ºí·Ï ½ºÄÚÇÁ¿¡ ´ëÀÀÇÑ let ¸í·É 206
4.3.7 ÇÔ¼ö ¸®ÅÍ·²/Function »ý¼ºÀÚ¿¡¼ ½ºÄÚÇÁÀÇ Â÷ÀÌ 207
4.4 ÀμöÀÇ ´Ù¾çÇÑ Ç¥±â¹ý 209
4.4.1 JavaScript´Â ÀμöÀÇ ¼ö¸¦ üũÇÏÁö ¾Ê´Â´Ù 209
4.4.2 °¡º¯±æÀÌ ÀμöÀÇ ÇÔ¼ö Á¤ÀÇÇϱâ 212
4.4.3 ¸í½ÃÀûÀ¸·Î ¼±¾ðµÈ Àμö¿Í °¡º¯±æÀÌ Àμö È¥Àç½ÃÅ°±â 214
4.4.4 ¸í¸íµÈ Àμö·Î Äڵ带 Àб⠽±°Ô Çϱâ 216
4.5 ES2015ÀÇ Àμö Ç¥±â¹ý 218
4.5.1 ÀμöÀÇ µðÆúÆ®°ª 218
4.5.2 °¡º¯±æÀÌ ÀμöÀÇ ÇÔ¼ö Á¤ÀÇÇϱâ 221
4.5.3 ¡®...¡¯ ¿¬»êÀÚ¿¡ ÀÇÇÑ ÀμöÀÇ Àü°³ 222
4.5.4 ¸í¸íµÈ Àμö·Î Äڵ带 ÀÌÇØÇϱ⠽±°Ô Çϱâ 223
4.6 ÇÔ¼ö È£Ãâ°ú ¹Ýȯ°ª 225
4.6.1 º¹¼öÀÇ ¹Ýȯ°ªÀ» °³º° º¯¼ö¿¡ ´ëÀÔÇϱâ 225
4.6.2 ÇÔ¼ö ÀÚ½ÅÀ» Àç±ÍÀûÀ¸·Î È£ÃâÇϱâ - Àç±Í ÇÔ¼ö 226
4.6.3 ÇÔ¼öÀÇ Àμöµµ ÇÔ¼ö - °íÂ÷ ÇÔ¼ö 227
4.6.4 ¡®ÀÏȸ¿ë ÇÔ¼ö¡¯´Â À͸í ÇÔ¼ö·Î 230
4.7 ³ôÀº ¼öÁØÀÇ ÇÔ¼ö Å׸¶ 232
4.7.1 ÅÛÇø´ ¹®ÀÚ¿À» ¾ÖÇø®ÄÉÀÌ¼Ç »ç¾çÀ¸·Î Ä¿½ºÅ͸¶ÀÌÁîÇϱâ - ÅÂ±× ºÎ¿© ÅÛÇø´ ¹®ÀÚ¿ 232
4.7.2 º¯¼ö´Â ¾î¶² ¼ø¼·Î ÇØ°áµÉ±î? - ½ºÄÚÇÁ üÀÎ 234
4.7.3 °°Àº ÇൿÀ» ÇÏ´Â °´Ã¼ - Ŭ·ÎÀú 236
CHAPTER 5 ´ë±Ô¸ð °³¹ß¿¡¼µµ Åë¿ëµÇ´Â ÀÛ¼º¹ý ÀÍÈ÷±â - °´Ã¼ÁöÇâ ±¸¹® 241
5.1 JavaScriptÀÇ °´Ã¼ÁöÇâ Ư¡ 242
5.1.1 ¡®Å¬·¡½º¡¯´Â ¾ø°í ¡®ÇÁ·ÎÅäŸÀÔ¡¯¸¸ ÀÖ´Ù 242
5.1.2 °¡Àå °£´ÜÇÑ Å¬·¡½º Á¤ÀÇÇϱâ 243
5.1.3 »ý¼ºÀÚ·Î ÃʱâÈÇϱâ 243
5.1.4 µ¿ÀûÀ¸·Î ¸Þ¼Òµå Ãß°¡Çϱâ 245
5.1.5 ¹®¸Æ¿¡ µû¶ó ³»¿ëÀÌ º¯ÇÏ´Â º¯¼ö - this Å°¿öµå 247
5.1.6 »ý¼ºÀÚÀÇ °Á¦ÀûÀΠȣÃâ 250
5.2 »ý¼ºÀÚÀÇ ¹®Á¦Á¡°ú ÇÁ·ÎÅäŸÀÔ 252
5.2.1 ¸Þ¼Òµå´Â ÇÁ·ÎÅäŸÀÔÀ¸·Î ¼±¾ðÇÑ´Ù - prototype ÇÁ·ÎÆÛƼ 253
5.2.2 ÇÁ·ÎÅäŸÀÔ °´Ã¼¸¦ »ç¿ëÇÑ ¸Þ¼Òµå Á¤ÀÇÀÇ µÎ °¡Áö ÀÌÁ¡ 254
5.2.3 ÇÁ·ÎÅäŸÀÔ °´Ã¼ÀÇ ºÒ°¡»çÀÇ(1) - ÇÁ·ÎÆÛƼÀÇ ¼³Á¤ 256
5.2.4 ÇÁ·ÎÅäŸÀÔ °´Ã¼ÀÇ ºÒ°¡»çÀÇ(2) - ÇÁ·ÎÆÛƼÀÇ »èÁ¦ 258
5.2.5 °´Ã¼ ¸®ÅÍ·²·Î ÇÁ·ÎÅäŸÀÔ Á¤ÀÇÇϱâ 260
5.2.6 Á¤Àû ÇÁ·ÎÆÛƼ/Á¤Àû ¸Þ¼Òµå Á¤ÀÇÇϱâ 262
5.3 °´Ã¼ÀÇ °è½Â - ÇÁ·ÎÅäŸÀÔ Ã¼ÀÎ 265
5.3.1 ÇÁ·ÎÅäŸÀÔ Ã¼ÀÎÀÇ ±âÃÊ 265
5.3.2 °è½Â °ü°è´Â µ¿ÀûÀ¸·Î º¯°æ °¡´É 268
5.3.3 °´Ã¼ÀÇ Å¸ÀÔ ÆÇÁ¤Çϱâ 269
5.4 º»°ÝÀûÀÎ °³¹ß¿¡ ´ëºñÇϱâ 272
5.4.1 private ¸â¹ö Á¤ÀÇÇϱâ 272
5.4.2 Object.defineProperty ¸Þ¼Òµå¿¡ ÀÇÇÑ ¾×¼¼¼ ¸Þ¼Òµå ±¸Çö 276
5.4.3 ³×ÀÓ½ºÆäÀ̽º/ÆÐÅ°Áö ÀÛ¼ºÇϱâ 279
5.5 ES2015ÀÇ °´Ã¼ÁöÇâ ±¸¹® 282
5.5.1 Ŭ·¡½º Á¤ÀÇÇϱâ - class ¸í·É 282
5.5.2 °´Ã¼ ¸®ÅÍ·²ÀÇ °³¼± 287
5.5.3 ¾ÖÇø®ÄÉÀ̼ÇÀ» ±â´É ´ÜÀ§·Î ¸ðÀ¸±â - ¸ðµâ 289
5.5.4 ¿°Å °¡´ÉÇÑ °´Ã¼ Á¤ÀÇÇϱâ - ¹Ýº¹ÀÚ 294
5.5.5 ¿°Å °¡´ÉÇÑ °´Ã¼¸¦ ´õ¿í °£´ÜÇÏ°Ô ±¸ÇöÇϱâ - ¹ß»ýÀÚ 297
5.5.6 °´Ã¼ÀÇ ±âº»ÀûÀÎ µ¿ÀÛÀ» »ç¿ëÀÚ Á¤ÀÇÇϱâ - Proxy °´Ã¼ 300
CHAPTER 6 HTML°ú XML ¹®¼ ´Ù·ç±â - DOM 303
6.1 DOMÀÇ ±âº» ÆľÇÇϱâ 304
6.1.1 ¸¶Å©¾÷ ¾ð¾î¸¦ »ç¿ëÇϴ ǥÁØ ¹æ½Ä ¡®DOM¡¯ 304
6.1.2 ¹®¼ Æ®¸®¿Í ³ëµå 305
6.2 Ŭ¶óÀ̾ðÆ® Ãø JavaScriptÀÇ »çÀü Áö½Ä 307
6.2.1 ¿ä¼Ò ³ëµå ÃëµæÇϱâ 307
6.2.2 ¹®¼ Æ®¸® »çÀÌ ¿À°¡±â - ³ëµå ¿öÅ· 315
6.2.3 À̺¥Æ®¸¦ Æ®¸®°Å·Î ÇÑ Ã³¸® ½ÇÇàÇϱâ - À̺¥Æ® ±¸µ¿ ¸ðµ¨ 319
6.3 ¼Ó¼º°ª Ãëµæ/¼³Á¤Çϱâ 327
6.3.1 ´ëºÎºÐÀÇ ¼Ó¼ºÀº ¡®¿ä¼Ò ³ëµå ¼Ó °°Àº À̸§ÀÇ ÇÁ·ÎÆÛƼ¡¯·Î ¾×¼¼½º °¡´É 327
6.3.2 ºÒƯÁ¤ ¼Ó¼º ÃëµæÇϱâ 328
6.3.3 ÅؽºÆ® Ãëµæ ¹× ¼³Á¤Çϱâ 330
6.4 Æû ¿ä¼Ò¿¡ ¾×¼¼½ºÇϱâ 335
6.4.1 ÀÔ·Â »óÀÚ/¼±Åà »óÀÚÀÇ °ª ÃëµæÇϱâ 336
6.4.2 üũ »óÀÚÀÇ °ª ÃëµæÇϱâ 336
6.4.3 ¶óµð¿À ¹öÆ°ÀÇ °ª ÃëµæÇϱâ 338
6.4.4 ¶óµð¿À ¹öÆ°/üũ »óÀÚÀÇ °ª ¼³Á¤Çϱâ 340
6.4.5 º¹¼ö ¼±ÅÃÇÒ ¼ö ÀÖ´Â ¸®½ºÆ® »óÀÚÀÇ °ª ÃëµæÇϱâ 343
6.4.6 ¾÷·ÎµåµÈ ÆÄÀÏÀÇ Á¤º¸ ÃëµæÇϱâ 345
6.5 ³ëµå¸¦ Ãß°¡/ġȯ/»èÁ¦Çϱâ 351
6.5.1 innerHTML ÇÁ·ÎÆÛƼ¿Í ¾î¶»°Ô ±¸ºÐÇÏ¿© »ç¿ëÇÒ °ÍÀΰ¡? 351
6.5.2 ½Å±Ô ³ëµå ÀÛ¼ºÇϱâ 352
6.5.3 ±âÁ¸ ³ëµå ġȯ/»èÁ¦Çϱâ 359
6.5.4 HTMLCollection/NodeList¸¦ ¹Ýº¹ ó¸®ÇÒ ¶§ ÁÖÀÇÁ¡ 363
6.6 JavaScript·Î ½ºÅ¸ÀÏ ½ÃÆ® Á¶ÀÛÇϱâ 365
6.6.1 ÀζóÀÎ ½ºÅ¸ÀÏ·Î ¾×¼¼½ºÇϱâ - style ÇÁ·ÎÆÛƼ 365
6.6.2 ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® Àû¿ëÇϱâ - className ÇÁ·ÎÆÛƼ 368
6.6.3 ½ºÅ¸ÀÏ Å¬·¡½º¸¦ ´õ °£´ÜÇÏ°Ô Á¶ÀÛÇϱâ - classList ÇÁ·ÎÆÛƼ 371
6.7 ´õ ³ôÀº ¼öÁØÀÇ À̺¥Æ® ó¸® 373
6.7.1 À̺¥Æ® ¸®½º³Ê/À̺¥Æ® Çڵ鷯 »èÁ¦Çϱâ 373
6.7.2 À̺¥Æ®¿¡ °ü·ÃµÈ Á¤º¸ ÃëµæÇϱâ - À̺¥Æ® °´Ã¼ 374
6.7.3 À̺¥Æ® ó¸® Ãë¼ÒÇϱâ 379
6.7.4 À̺¥Æ® ¸®½º³Ê/À̺¥Æ® Çڵ鷯 ¾Æ·¡ÀÇ this Å°¿öµå 384
CHAPTER 7 Ŭ¶óÀ̾ðÆ® Ãø JavaScript °³¹ß ¸¶½ºÅÍÇϱâ 389
7.1 ºê¶ó¿ìÀú °´Ã¼¿¡¼ ¾Ë¾ÆµÎ¾î¾ß ÇÒ ±âº» ±â´É 390
7.1.1 ºê¶ó¿ìÀú °´Ã¼ÀÇ °èÃþ ±¸Á¶ 390
7.1.2 È®ÀÎ ´ëÈ»óÀÚ Ç¥½ÃÇϱâ - confirm ¸Þ¼Òµå 392
7.1.3 ŸÀÌ¸Ó ±â´É ±¸ÇöÇϱâ - setInterval/setTimeout ¸Þ¼Òµå 393
7.1.4 Ç¥½Ã ÆäÀÌÁöÀÇ ¾îµå·¹½º Á¤º¸ Ãëµæ/Á¶ÀÛÇϱâ - location °´Ã¼ 396
7.1.5 À̷¿¡ µû¶ó ÆäÀÌÁö¸¦ ÀüÈÄ·Î À̵¿Çϱâ - history °´Ã¼ 398
7.1.6 J avaScript¿¡ ÀÇÇÑ Á¶ÀÛÀ» ºê¶ó¿ìÀú À̷¿¡ ³²±â±â - pushState ¸Þ¼Òµå 399
7.1.7 ¾ÖÇø®ÄÉÀ̼ǿ¡ Å©·Î½º ºê¶ó¿ìÀú ´ëÃ¥ ½Ç½ÃÇϱâ - navigator °´Ã¼ 401
7.2 µð¹ö±× Á¤º¸ Ãâ·ÂÇϱâ - Console °´Ã¼ 405
7.2.1 Äֿܼ¡ ·Î±× Ãâ·ÂÇϱâ 405
7.2.2 ¾Ë¾ÆµÎ¸é Æí¸®ÇÑ ·Î±× ¸Þ¼Òµå 407
7.3 »ç¿ëÀÚ µ¥ÀÌÅÍ ÀúÀåÇϱâ - Storage °´Ã¼ 415
7.3.1 ½ºÅ丮Áö¿¡ µ¥ÀÌÅÍ º¸°ü/ÃëµæÇϱâ 416
7.3.2 ±âÁ¸ µ¥ÀÌÅÍ »èÁ¦Çϱâ 418
7.3.3 ½ºÅ丮Áö·ÎºÎÅÍ ¸ðµç µ¥ÀÌÅÍ ÃßÃâÇϱâ 418
7.3.4 ½ºÅ丮Áö¿¡ °´Ã¼ º¸°ü/ÃëµæÇϱâ 419
7.3.5 ½ºÅ丮ÁöÀÇ º¯°æ °¨½ÃÇϱâ 422
7.4 ¼¹ö ¿¬°è·Î °í±Þ UI ±¸ÇöÇϱâ - Ajax 423
7.4.1 PHPÀÇ ¡®Hello, World¡¯¿Í AjaxÀÇ ¡®Hello, World¡¯ ºñ±³Çϱâ 424
7.4.2 Ajax ¾ÖÇø®ÄÉÀÌ¼Ç ±¸ÇöÀÇ ±âº» 428
7.4.3 Ajax ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ±¸Á¶È µ¥ÀÌÅÍ ´Ù·ç±â 435
7.4.4 Ŭ ¶óÀ̾ðÆ® Ãø¿¡¼ Å©·Î½º ¿À¸®Áø Åë½Å °¡´ÉÇÏ°Ô Çϱâ - JSONP 441
7.4.5 Å©·Î½º µµÅ¥¸ÕÆ® ¸Þ½Ã¡À» ÅëÇÑ Å©·Î½º ¿À¸®Áø Åë½Å 445
7.5 ºñµ¿±â ó¸® °£´ÜÇÏ°Ô Ç¥ÇöÇϱâ - Promise °´Ã¼ 449
7.5.1 Promise °´Ã¼ÀÇ ±âº» ÆľÇÇϱâ 450
7.5.2 ºñµ¿±â ó¸® ¿¬°áÇϱâ 451
7.5.3 ¿©·¯ ºñµ¿±â 󸮸¦ º´ÇàÇÏ¿© ½ÇÇàÇϱâ 453
7.6 ¹é±×¶ó¿îµå·Î JavaScript ÄÚµå ½ÇÇàÇϱâ - Web Worker 455
7.6.1 ¿öÄ¿ ±¸ÇöÇϱâ 456
7.6.2 ¿öÄ¿ ±âµ¿Çϱâ 457
CHAPTER 8 ÇöÀå¿¡¼ ¹Ù·Î ´ëÀÀÇÒ ¼ö ÀÖ´Â Áö½Ä 459
8.1 ´ÜÀ§ Å×½ºÆ® - Jasmine 460
8.1.1 JasmineÀÇ ÀνºÅç ¹æ¹ý 460
8.1.2 Å×½ºÆ®ÀÇ ±âº» 461
8.1.3 Å×½ºÆ® ½ºÀ§Æ® ½ÇÇàÇϱâ 464
8.2 ¹®¼È ÁÖ¼®À¸·Î ÄÚµå ³»¿ë ¾Ë±â ½±°Ô Çϱâ - JSDoc 467
8.2.1 ¹®¼È ÁÖ¼®ÀÇ ±â¼ú ±ÔÄ¢ 468
8.2.2 ¹®¼È »ý¼º Åø - JSDoc 469
8.3 ºôµå Åø·Î Á¤Çü ÀÛ¾÷ ÀÚµ¿ÈÇϱâ - Grunt 471
8.3.1 Grunt¿¡ ÀÇÇÑ ¼Ò½º ÄÚµåÀÇ ¾ÐÃà 471
8.4 Áö±Ý ¹Ù·Î ECMAScript 2015 ½ÇÀü È°¿ëÇϱâ - Babel 478
8.4.1 Äڵ带 ¼öµ¿À¸·Î º¯È¯Çϱâ 478
8.4.2 Grunt °æÀ¯·Î Babel ½ÇÇàÇϱâ 479
8.4.3 °£ÀÌ ÀÎÅÍÇÁ¸®ÅÍ ÀÌ¿ëÇϱâ 481
8.5 Àб⠽±°í, À¯Áöº¸¼ö°¡ ½¬¿î ÄÚµå ÀÛ¼ºÇϱâ - ÄÚµù ±Ô¾à 482
8.5.1 JavaScriptÀÇ ÁÖ¿ä ÄÚµù ±Ô¾à 482
8.5.2 JavaScript style guide(MDN)ÀÇ ÁÖ¿ä ±Ô¾à 483
8.5.3 GoogleÀÇ Ç¥ÁØ ÄÚµù ½ºÅ¸ÀÏ 484
ã¾Æº¸±â 486
1.1 JavaScript¶õ? 2
1.1.1 JavaScriptÀÇ ¿ª»ç 2
1.1.2 JavaScript ºÎÈ° ¡ª Ajax, ±×¸®°í HTML5ÀÇ ½Ã´ë 3
1.1.3 ³ª»Û À̹ÌÁö¿¡ ´ëÇÑ ¿ÀÇØ 5
1.1.4 ¾ð¾î·Î¼ÀÇ ³× °¡Áö Ư¡ 6
1.2 ECMAScript 2015¶õ? 8
1.2.1 ºê¶ó¿ìÀúº° ´ëÀÀ »óȲ 9
1.3 ºê¶ó¿ìÀúÀÇ °³¹ßÀÚ µµ±¸ 11
1.3.1 °³¹ßÀÚ µµ±¸ ½ÃÀÛÇϱâ 11
1.3.2 HTML/CSSÀÇ ¼Ò½º È®ÀÎÇϱâ - [Elements] ÅÇ 13
1.3.3 Åë½Å »óȲ ÃßÀûÇϱâ - [Network] ÅÇ 13
1.3.4 ½ºÅ©¸³Æ® µð¹ö±×Çϱâ - [Sources] ÅÇ 15
1.3.5 ½ºÅ丮Áö/ÄíÅ° ³»¿ë È®ÀÎÇϱâ - [Application] ÅÇ 16
1.3.6 ·Î±× È®ÀÎ/°´Ã¼ Á¶ÀÛ µîÀÇ ¸¸´É µµ±¸ - [Console] ÅÇ 17
CHAPTER 2 ±âº»ÀûÀÎ ÀÛ¼º¹ý ÀÍÈ÷±â 19
2.1 JavaScriptÀÇ ±âº»ÀûÀΠǥ±â 20
2.1.1 JavaScript·Î ¡°¾È³çÇϼ¼¿ä, ÀÚ¹Ù½ºÅ©¸³Æ®!¡± Ç¥±âÇϱâ 20
2.1.2 JavaScript¸¦ HTML ÆÄÀÏ ¾È¿¡ Áý¾î³Ö±â - [script] ¿ä¼Ò 23
2.1.3 ¹®ÀåÀÇ ±ÔÄ¢ 28
2.1.4 ÁÖ¼® »ðÀÔÇϱâ 30
2.2 º¯¼ö¿Í »ó¼ö 33
2.2.1 º¯¼ö ¼±¾ðÇϱâ 33
2.2.2 ½Äº°ÀÚÀÇ ¸í¸í ±ÔÄ¢ 36
2.2.3 »ó¼ö ¼±¾ðÇϱâ 38
2.3 µ¥ÀÌÅÍÇü 41
2.3.1 JavaScriptÀÇ ÁÖ¿ä µ¥ÀÌÅÍÇü 42
2.3.2 ¸®ÅÍ·² 43
2.4 ¿¬»êÀÚ 52
2.4.1 »ê¼ú ¿¬»êÀÚ 52
2.4.2 ´ëÀÔ ¿¬»êÀÚ 55
2.4.3 ºñ±³ ¿¬»êÀÚ 62
2.4.4 ³í¸® ¿¬»êÀÚ 66
2.4.5 ºñÆ® ¿¬»êÀÚ 69
2.4.6 ±× ¿ÜÀÇ ¿¬»êÀÚ 71
2.4.7 ¿¬»êÀÚÀÇ ¿ì¼±¼øÀ§¿Í °áÇÕ¼ø¼ 73
2.5 Á¦¾î ±¸¹® 77
2.5.1 Á¶°Ç¿¡ µû¶ó ºÐ±â ó¸®Çϱâ - if ¸í·É 77
2.5.2 ½ÄÀÇ °ª¿¡ µû¶ó ºÐ±â ó¸®Çϱâ - switch ¸í·É 83
2.5.3 Á¶°Ç½Ä¿¡ µû¶ó ·çÇÁ Á¦¾îÇϱâ - while/do¡¦while ¸í·É 86
2.5.4 ¹«ÇÑ ·çÇÁ 89
2.5.5 ÁöÁ¤ Ƚ¼ö¸¸Å¸¸ ·çÇÁ ó¸®Çϱâ - for ¸í·É 90
2.5.6 ¿¬»ó ¹è¿ÀÇ ¿ä¼Ò¸¦ ¼ø¼´ë·Î ó¸®Çϱâ - for¡¦in ¸í·É 92
2.5.7 ¹è¿ µîÀ» ¼ø¼´ë·Î ó¸®Çϱâ - for¡¦of ¸í·É 94
2.5.8 ·çÇÁ¸¦ µµÁß¿¡ ½ºÅµ/Áß´ÜÇϱâ - break/continue ¸í·É 95
2.5.9 ¿¹¿Ü ó¸®Çϱâ - try¡¦catch¡¦finally ¸í·É 100
2.5.10 JavaScriptÀÇ À§ÇèÇÑ ±¸¹® ±ÝÁöÇϱâ - Strict ¸ðµå 103
CHAPTER 3 ±âº» µ¥ÀÌÅÍ Á¶ÀÛÇϱâ - ³»ÀåÇü °´Ã¼ 107
3.1 °´Ã¼¶õ? 108
3.1.1 °´Ã¼ = ÇÁ·ÎÆÛƼ ¸Þ¼Òµå 109
3.1.2 °´Ã¼¸¦ ÀÌ¿ëÇϱâ À§ÇÑ Áغñ - new ¿¬»êÀÚ 110
3.1.3 Á¤Àû ÇÁ·ÎÆÛƼ/Á¤Àû ¸Þ¼Òµå 112
3.1.4 ³»ÀåÇü °´Ã¼¶õ? 112
3.2 ±âº» µ¥ÀÌÅ͸¦ Ãë±ÞÇϱâ À§ÇÑ °´Ã¼ 116
3.2.1 ¹®ÀÚ¿ Á¶ÀÛÇϱâ - String °´Ã¼ 116
3.2.2 ¼ýÀÚ Á¶ÀÛÇϱâ - Number °´Ã¼ 120
3.2.3 ½É¹ú ÀÛ¼ºÇϱâ - Symbol °´Ã¼ 125
3.2.4 ±âº»ÀûÀÎ ¼ýÀÚ ¿¬»ê ½ÇÇàÇϱâ - Math °´Ã¼ 127
3.3 °ªÀÇ ÁýÇÕÀ» ó¸®/Á¶ÀÛÇϱâ - Array/Map/Set °´Ã¼ 131
3.3.1 ¹è¿ Á¶ÀÛÇϱâ - Array °´Ã¼ 131
3.3.2 ¿¬»ó ¹è¿ Á¶ÀÛÇϱâ - Map °´Ã¼ 144
3.3.3 Áߺ¹µÇÁö ¾ÊÀº °ªÀÇ ÁýÇÕ Á¶ÀÛÇϱâ - Set °´Ã¼ 148
3.4 ³¯Â¥/½Ã°£ µ¥ÀÌÅÍ Á¶ÀÛÇϱâ - Date °´Ã¼ 151
3.4.1 Date °´Ã¼ »ý¼ºÇϱâ 151
3.4.2 ³¯Â¥/½Ã°£ °ªÀ» °¡»ê/°¨»êÇϱâ 154
3.4.3 ³¯Â¥/½Ã°£ Â÷ÀÌ ±¸Çϱâ 155
3.5 Á¤±Ô Ç¥ÇöÀ¸·Î ¹®ÀÚ Á¶ÀÛÇϱâ - RegExp °´Ã¼ 157
3.5.1 JavaScript¿¡¼ ÀÌ¿ë °¡´ÉÇÑ Á¤±Ô Ç¥Çö 158
3.5.2 RegExp °´Ã¼¸¦ »ý¼ºÇÏ´Â ¹æ¹ý 159
3.5.3 Á¤±Ô Ç¥Çö¿¡ ÀÇÇÑ ¹®ÀÚ¿ °Ë»ö 160
3.5.4 Á¤±Ô Ç¥ÇöÀÇ ¿É¼ÇÀ¸·Î ¸ÅÄ¡ÇÒ ¶§ µ¿ÀÛ Á¦¾îÇϱâ 162
3.5.5 match ¸Þ¼Òµå¿Í exec ¸Þ¼ÒµåÀÇ µ¿ÀÛ Â÷ÀÌ 164
3.5.6 ¸ÅĪÀÇ ¼º°ø ¿©ºÎ °ËÁõÇϱâ 166
3.5.7 Á¤±Ô Ç¥ÇöÀ¸·Î ¹®ÀÚ¿ ġȯÇϱâ 167
3.5.8 Á¤±Ô Ç¥ÇöÀ¸·Î ¹®ÀÚ¿ ºÐÇÒÇϱâ 169
3.6 ¸ðµç °´Ã¼ÀÇ ¸ðÇü - Object °´Ã¼ 170
3.6.1 °´Ã¼¸¦ ±âº»ÇüÀ¸·Î º¯È¯Çϱâ - toString/valueOf ¸Þ¼Òµå 172
3.6.2 °´Ã¼ °áÇÕÇϱâ - assign ¸Þ¼Òµå 173
3.6.3 °´Ã¼ »ý¼ºÇϱâ - create ¸Þ¼Òµå 174
3.6.4 ºÒº¯ °´Ã¼ Á¤ÀÇÇϱâ 177
3.7 JavaScript ÇÁ·Î±×·¥¿¡¼ ÀÚÁÖ ÀÌ¿ëÇÏ´Â ±â´É Á¦°øÇϱâ - Global °´Ã¼ 179
3.7.1 Number °´Ã¼·Î À̵¿ÇÑ ¸Þ¼Òµå 180
3.7.2 Äõ¸® Á¤º¸ À̽ºÄÉÀÌÇÁ ó¸®Çϱâ - encodeURI/encodeURIComponent ÇÔ¼ö 181
3.7.3 µ¿ÀûÀ¸·Î »ý¼ºÇÑ ½ºÅ©¸³Æ® ½ÇÇàÇϱâ - eval ÇÔ¼ö 182
CHAPTER 4 ¹Ýº¹ÀûÀ¸·Î »ç¿ëÇÏ´Â Äڵ带 Çϳª·Î Á¤¸®Çϱâ - ÇÔ¼ö 185
4.1 ÇÔ¼ö¶õ? 186
4.1.1 function ¸í·ÉÀ¸·Î Á¤ÀÇÇϱâ 186
4.1.2 Function »ý¼ºÀÚ·Î Á¤ÀÇÇϱâ 188
4.1.3 ÇÔ¼ö ¸®ÅÍ·² Ç¥ÇöÀ¸·Î Á¤ÀÇÇϱâ 190
4.1.4 ¾Ö·Î¿ì ÇÔ¼ö·Î Á¤ÀÇÇϱâ 191
4.2 ÇÔ¼ö¸¦ Á¤ÀÇÇÒ ¶§ ÁÖÀÇÇÒ ³× °¡Áö »çÇ× 193
4.2.1 return ¸í·ÉÀº µµÁß¿¡ °³ÇàÇÏÁö ¾Ê´Â´Ù 193
4.2.2 ÇÔ¼ö´Â µ¥ÀÌÅÍÇüÀÇ Çϳª´Ù 194
4.2.3 function ¸í·ÉÀº Á¤ÀûÀÎ ±¸Á¶¸¦ ¼±¾ðÇÑ´Ù 196
4.2.4 ÇÔ¼ö ¸®ÅÍ·²/Function »ý¼ºÀÚ´Â ½ÇÇàÇÒ ¶§ ÆǴܵȴ٠197
4.3 º¯¼ö´Â ¾î¶² °÷¿¡¼ ÂüÁ¶ÇÒ ¼ö ÀÖÀ»±î? - ½ºÄÚÇÁ 198
4.3.1 ±Û·Î¹ú º¯¼ö¿Í ·ÎÄà º¯¼öÀÇ Â÷ÀÌÁ¡ 199
4.3.2 º¯¼ö ¼±¾ð¿¡ var ¸í·ÉÀÌ ÇʼöÀÎ ÀÌÀ¯ 199
4.3.3 ·ÎÄà º¯¼öÀÇ À¯È¿¹üÀ§´Â ¾îµð±îÁö? 200
4.3.4 °¡ÀμöÀÇ ½ºÄÚÇÁ - ±âº»Çü°ú ÂüÁ¶ÇüÀÇ Â÷ÀÌ ÁÖÀÇÇϱâ 202
4.3.5 ºí·Ï ·¹º§ÀÇ ½ºÄÚÇÁ´Â Á¸ÀçÇÏÁö ¾Ê´Â´Ù (ES2015 ÀÌÀü) 204
4.3.6 ºí·Ï ½ºÄÚÇÁ¿¡ ´ëÀÀÇÑ let ¸í·É 206
4.3.7 ÇÔ¼ö ¸®ÅÍ·²/Function »ý¼ºÀÚ¿¡¼ ½ºÄÚÇÁÀÇ Â÷ÀÌ 207
4.4 ÀμöÀÇ ´Ù¾çÇÑ Ç¥±â¹ý 209
4.4.1 JavaScript´Â ÀμöÀÇ ¼ö¸¦ üũÇÏÁö ¾Ê´Â´Ù 209
4.4.2 °¡º¯±æÀÌ ÀμöÀÇ ÇÔ¼ö Á¤ÀÇÇϱâ 212
4.4.3 ¸í½ÃÀûÀ¸·Î ¼±¾ðµÈ Àμö¿Í °¡º¯±æÀÌ Àμö È¥Àç½ÃÅ°±â 214
4.4.4 ¸í¸íµÈ Àμö·Î Äڵ带 Àб⠽±°Ô Çϱâ 216
4.5 ES2015ÀÇ Àμö Ç¥±â¹ý 218
4.5.1 ÀμöÀÇ µðÆúÆ®°ª 218
4.5.2 °¡º¯±æÀÌ ÀμöÀÇ ÇÔ¼ö Á¤ÀÇÇϱâ 221
4.5.3 ¡®...¡¯ ¿¬»êÀÚ¿¡ ÀÇÇÑ ÀμöÀÇ Àü°³ 222
4.5.4 ¸í¸íµÈ Àμö·Î Äڵ带 ÀÌÇØÇϱ⠽±°Ô Çϱâ 223
4.6 ÇÔ¼ö È£Ãâ°ú ¹Ýȯ°ª 225
4.6.1 º¹¼öÀÇ ¹Ýȯ°ªÀ» °³º° º¯¼ö¿¡ ´ëÀÔÇϱâ 225
4.6.2 ÇÔ¼ö ÀÚ½ÅÀ» Àç±ÍÀûÀ¸·Î È£ÃâÇϱâ - Àç±Í ÇÔ¼ö 226
4.6.3 ÇÔ¼öÀÇ Àμöµµ ÇÔ¼ö - °íÂ÷ ÇÔ¼ö 227
4.6.4 ¡®ÀÏȸ¿ë ÇÔ¼ö¡¯´Â À͸í ÇÔ¼ö·Î 230
4.7 ³ôÀº ¼öÁØÀÇ ÇÔ¼ö Å׸¶ 232
4.7.1 ÅÛÇø´ ¹®ÀÚ¿À» ¾ÖÇø®ÄÉÀÌ¼Ç »ç¾çÀ¸·Î Ä¿½ºÅ͸¶ÀÌÁîÇϱâ - ÅÂ±× ºÎ¿© ÅÛÇø´ ¹®ÀÚ¿ 232
4.7.2 º¯¼ö´Â ¾î¶² ¼ø¼·Î ÇØ°áµÉ±î? - ½ºÄÚÇÁ üÀÎ 234
4.7.3 °°Àº ÇൿÀ» ÇÏ´Â °´Ã¼ - Ŭ·ÎÀú 236
CHAPTER 5 ´ë±Ô¸ð °³¹ß¿¡¼µµ Åë¿ëµÇ´Â ÀÛ¼º¹ý ÀÍÈ÷±â - °´Ã¼ÁöÇâ ±¸¹® 241
5.1 JavaScriptÀÇ °´Ã¼ÁöÇâ Ư¡ 242
5.1.1 ¡®Å¬·¡½º¡¯´Â ¾ø°í ¡®ÇÁ·ÎÅäŸÀÔ¡¯¸¸ ÀÖ´Ù 242
5.1.2 °¡Àå °£´ÜÇÑ Å¬·¡½º Á¤ÀÇÇϱâ 243
5.1.3 »ý¼ºÀÚ·Î ÃʱâÈÇϱâ 243
5.1.4 µ¿ÀûÀ¸·Î ¸Þ¼Òµå Ãß°¡Çϱâ 245
5.1.5 ¹®¸Æ¿¡ µû¶ó ³»¿ëÀÌ º¯ÇÏ´Â º¯¼ö - this Å°¿öµå 247
5.1.6 »ý¼ºÀÚÀÇ °Á¦ÀûÀΠȣÃâ 250
5.2 »ý¼ºÀÚÀÇ ¹®Á¦Á¡°ú ÇÁ·ÎÅäŸÀÔ 252
5.2.1 ¸Þ¼Òµå´Â ÇÁ·ÎÅäŸÀÔÀ¸·Î ¼±¾ðÇÑ´Ù - prototype ÇÁ·ÎÆÛƼ 253
5.2.2 ÇÁ·ÎÅäŸÀÔ °´Ã¼¸¦ »ç¿ëÇÑ ¸Þ¼Òµå Á¤ÀÇÀÇ µÎ °¡Áö ÀÌÁ¡ 254
5.2.3 ÇÁ·ÎÅäŸÀÔ °´Ã¼ÀÇ ºÒ°¡»çÀÇ(1) - ÇÁ·ÎÆÛƼÀÇ ¼³Á¤ 256
5.2.4 ÇÁ·ÎÅäŸÀÔ °´Ã¼ÀÇ ºÒ°¡»çÀÇ(2) - ÇÁ·ÎÆÛƼÀÇ »èÁ¦ 258
5.2.5 °´Ã¼ ¸®ÅÍ·²·Î ÇÁ·ÎÅäŸÀÔ Á¤ÀÇÇϱâ 260
5.2.6 Á¤Àû ÇÁ·ÎÆÛƼ/Á¤Àû ¸Þ¼Òµå Á¤ÀÇÇϱâ 262
5.3 °´Ã¼ÀÇ °è½Â - ÇÁ·ÎÅäŸÀÔ Ã¼ÀÎ 265
5.3.1 ÇÁ·ÎÅäŸÀÔ Ã¼ÀÎÀÇ ±âÃÊ 265
5.3.2 °è½Â °ü°è´Â µ¿ÀûÀ¸·Î º¯°æ °¡´É 268
5.3.3 °´Ã¼ÀÇ Å¸ÀÔ ÆÇÁ¤Çϱâ 269
5.4 º»°ÝÀûÀÎ °³¹ß¿¡ ´ëºñÇϱâ 272
5.4.1 private ¸â¹ö Á¤ÀÇÇϱâ 272
5.4.2 Object.defineProperty ¸Þ¼Òµå¿¡ ÀÇÇÑ ¾×¼¼¼ ¸Þ¼Òµå ±¸Çö 276
5.4.3 ³×ÀÓ½ºÆäÀ̽º/ÆÐÅ°Áö ÀÛ¼ºÇϱâ 279
5.5 ES2015ÀÇ °´Ã¼ÁöÇâ ±¸¹® 282
5.5.1 Ŭ·¡½º Á¤ÀÇÇϱâ - class ¸í·É 282
5.5.2 °´Ã¼ ¸®ÅÍ·²ÀÇ °³¼± 287
5.5.3 ¾ÖÇø®ÄÉÀ̼ÇÀ» ±â´É ´ÜÀ§·Î ¸ðÀ¸±â - ¸ðµâ 289
5.5.4 ¿°Å °¡´ÉÇÑ °´Ã¼ Á¤ÀÇÇϱâ - ¹Ýº¹ÀÚ 294
5.5.5 ¿°Å °¡´ÉÇÑ °´Ã¼¸¦ ´õ¿í °£´ÜÇÏ°Ô ±¸ÇöÇϱâ - ¹ß»ýÀÚ 297
5.5.6 °´Ã¼ÀÇ ±âº»ÀûÀÎ µ¿ÀÛÀ» »ç¿ëÀÚ Á¤ÀÇÇϱâ - Proxy °´Ã¼ 300
CHAPTER 6 HTML°ú XML ¹®¼ ´Ù·ç±â - DOM 303
6.1 DOMÀÇ ±âº» ÆľÇÇϱâ 304
6.1.1 ¸¶Å©¾÷ ¾ð¾î¸¦ »ç¿ëÇϴ ǥÁØ ¹æ½Ä ¡®DOM¡¯ 304
6.1.2 ¹®¼ Æ®¸®¿Í ³ëµå 305
6.2 Ŭ¶óÀ̾ðÆ® Ãø JavaScriptÀÇ »çÀü Áö½Ä 307
6.2.1 ¿ä¼Ò ³ëµå ÃëµæÇϱâ 307
6.2.2 ¹®¼ Æ®¸® »çÀÌ ¿À°¡±â - ³ëµå ¿öÅ· 315
6.2.3 À̺¥Æ®¸¦ Æ®¸®°Å·Î ÇÑ Ã³¸® ½ÇÇàÇϱâ - À̺¥Æ® ±¸µ¿ ¸ðµ¨ 319
6.3 ¼Ó¼º°ª Ãëµæ/¼³Á¤Çϱâ 327
6.3.1 ´ëºÎºÐÀÇ ¼Ó¼ºÀº ¡®¿ä¼Ò ³ëµå ¼Ó °°Àº À̸§ÀÇ ÇÁ·ÎÆÛƼ¡¯·Î ¾×¼¼½º °¡´É 327
6.3.2 ºÒƯÁ¤ ¼Ó¼º ÃëµæÇϱâ 328
6.3.3 ÅؽºÆ® Ãëµæ ¹× ¼³Á¤Çϱâ 330
6.4 Æû ¿ä¼Ò¿¡ ¾×¼¼½ºÇϱâ 335
6.4.1 ÀÔ·Â »óÀÚ/¼±Åà »óÀÚÀÇ °ª ÃëµæÇϱâ 336
6.4.2 üũ »óÀÚÀÇ °ª ÃëµæÇϱâ 336
6.4.3 ¶óµð¿À ¹öÆ°ÀÇ °ª ÃëµæÇϱâ 338
6.4.4 ¶óµð¿À ¹öÆ°/üũ »óÀÚÀÇ °ª ¼³Á¤Çϱâ 340
6.4.5 º¹¼ö ¼±ÅÃÇÒ ¼ö ÀÖ´Â ¸®½ºÆ® »óÀÚÀÇ °ª ÃëµæÇϱâ 343
6.4.6 ¾÷·ÎµåµÈ ÆÄÀÏÀÇ Á¤º¸ ÃëµæÇϱâ 345
6.5 ³ëµå¸¦ Ãß°¡/ġȯ/»èÁ¦Çϱâ 351
6.5.1 innerHTML ÇÁ·ÎÆÛƼ¿Í ¾î¶»°Ô ±¸ºÐÇÏ¿© »ç¿ëÇÒ °ÍÀΰ¡? 351
6.5.2 ½Å±Ô ³ëµå ÀÛ¼ºÇϱâ 352
6.5.3 ±âÁ¸ ³ëµå ġȯ/»èÁ¦Çϱâ 359
6.5.4 HTMLCollection/NodeList¸¦ ¹Ýº¹ ó¸®ÇÒ ¶§ ÁÖÀÇÁ¡ 363
6.6 JavaScript·Î ½ºÅ¸ÀÏ ½ÃÆ® Á¶ÀÛÇϱâ 365
6.6.1 ÀζóÀÎ ½ºÅ¸ÀÏ·Î ¾×¼¼½ºÇϱâ - style ÇÁ·ÎÆÛƼ 365
6.6.2 ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® Àû¿ëÇϱâ - className ÇÁ·ÎÆÛƼ 368
6.6.3 ½ºÅ¸ÀÏ Å¬·¡½º¸¦ ´õ °£´ÜÇÏ°Ô Á¶ÀÛÇϱâ - classList ÇÁ·ÎÆÛƼ 371
6.7 ´õ ³ôÀº ¼öÁØÀÇ À̺¥Æ® ó¸® 373
6.7.1 À̺¥Æ® ¸®½º³Ê/À̺¥Æ® Çڵ鷯 »èÁ¦Çϱâ 373
6.7.2 À̺¥Æ®¿¡ °ü·ÃµÈ Á¤º¸ ÃëµæÇϱâ - À̺¥Æ® °´Ã¼ 374
6.7.3 À̺¥Æ® ó¸® Ãë¼ÒÇϱâ 379
6.7.4 À̺¥Æ® ¸®½º³Ê/À̺¥Æ® Çڵ鷯 ¾Æ·¡ÀÇ this Å°¿öµå 384
CHAPTER 7 Ŭ¶óÀ̾ðÆ® Ãø JavaScript °³¹ß ¸¶½ºÅÍÇϱâ 389
7.1 ºê¶ó¿ìÀú °´Ã¼¿¡¼ ¾Ë¾ÆµÎ¾î¾ß ÇÒ ±âº» ±â´É 390
7.1.1 ºê¶ó¿ìÀú °´Ã¼ÀÇ °èÃþ ±¸Á¶ 390
7.1.2 È®ÀÎ ´ëÈ»óÀÚ Ç¥½ÃÇϱâ - confirm ¸Þ¼Òµå 392
7.1.3 ŸÀÌ¸Ó ±â´É ±¸ÇöÇϱâ - setInterval/setTimeout ¸Þ¼Òµå 393
7.1.4 Ç¥½Ã ÆäÀÌÁöÀÇ ¾îµå·¹½º Á¤º¸ Ãëµæ/Á¶ÀÛÇϱâ - location °´Ã¼ 396
7.1.5 À̷¿¡ µû¶ó ÆäÀÌÁö¸¦ ÀüÈÄ·Î À̵¿Çϱâ - history °´Ã¼ 398
7.1.6 J avaScript¿¡ ÀÇÇÑ Á¶ÀÛÀ» ºê¶ó¿ìÀú À̷¿¡ ³²±â±â - pushState ¸Þ¼Òµå 399
7.1.7 ¾ÖÇø®ÄÉÀ̼ǿ¡ Å©·Î½º ºê¶ó¿ìÀú ´ëÃ¥ ½Ç½ÃÇϱâ - navigator °´Ã¼ 401
7.2 µð¹ö±× Á¤º¸ Ãâ·ÂÇϱâ - Console °´Ã¼ 405
7.2.1 Äֿܼ¡ ·Î±× Ãâ·ÂÇϱâ 405
7.2.2 ¾Ë¾ÆµÎ¸é Æí¸®ÇÑ ·Î±× ¸Þ¼Òµå 407
7.3 »ç¿ëÀÚ µ¥ÀÌÅÍ ÀúÀåÇϱâ - Storage °´Ã¼ 415
7.3.1 ½ºÅ丮Áö¿¡ µ¥ÀÌÅÍ º¸°ü/ÃëµæÇϱâ 416
7.3.2 ±âÁ¸ µ¥ÀÌÅÍ »èÁ¦Çϱâ 418
7.3.3 ½ºÅ丮Áö·ÎºÎÅÍ ¸ðµç µ¥ÀÌÅÍ ÃßÃâÇϱâ 418
7.3.4 ½ºÅ丮Áö¿¡ °´Ã¼ º¸°ü/ÃëµæÇϱâ 419
7.3.5 ½ºÅ丮ÁöÀÇ º¯°æ °¨½ÃÇϱâ 422
7.4 ¼¹ö ¿¬°è·Î °í±Þ UI ±¸ÇöÇϱâ - Ajax 423
7.4.1 PHPÀÇ ¡®Hello, World¡¯¿Í AjaxÀÇ ¡®Hello, World¡¯ ºñ±³Çϱâ 424
7.4.2 Ajax ¾ÖÇø®ÄÉÀÌ¼Ç ±¸ÇöÀÇ ±âº» 428
7.4.3 Ajax ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ±¸Á¶È µ¥ÀÌÅÍ ´Ù·ç±â 435
7.4.4 Ŭ ¶óÀ̾ðÆ® Ãø¿¡¼ Å©·Î½º ¿À¸®Áø Åë½Å °¡´ÉÇÏ°Ô Çϱâ - JSONP 441
7.4.5 Å©·Î½º µµÅ¥¸ÕÆ® ¸Þ½Ã¡À» ÅëÇÑ Å©·Î½º ¿À¸®Áø Åë½Å 445
7.5 ºñµ¿±â ó¸® °£´ÜÇÏ°Ô Ç¥ÇöÇϱâ - Promise °´Ã¼ 449
7.5.1 Promise °´Ã¼ÀÇ ±âº» ÆľÇÇϱâ 450
7.5.2 ºñµ¿±â ó¸® ¿¬°áÇϱâ 451
7.5.3 ¿©·¯ ºñµ¿±â 󸮸¦ º´ÇàÇÏ¿© ½ÇÇàÇϱâ 453
7.6 ¹é±×¶ó¿îµå·Î JavaScript ÄÚµå ½ÇÇàÇϱâ - Web Worker 455
7.6.1 ¿öÄ¿ ±¸ÇöÇϱâ 456
7.6.2 ¿öÄ¿ ±âµ¿Çϱâ 457
CHAPTER 8 ÇöÀå¿¡¼ ¹Ù·Î ´ëÀÀÇÒ ¼ö ÀÖ´Â Áö½Ä 459
8.1 ´ÜÀ§ Å×½ºÆ® - Jasmine 460
8.1.1 JasmineÀÇ ÀνºÅç ¹æ¹ý 460
8.1.2 Å×½ºÆ®ÀÇ ±âº» 461
8.1.3 Å×½ºÆ® ½ºÀ§Æ® ½ÇÇàÇϱâ 464
8.2 ¹®¼È ÁÖ¼®À¸·Î ÄÚµå ³»¿ë ¾Ë±â ½±°Ô Çϱâ - JSDoc 467
8.2.1 ¹®¼È ÁÖ¼®ÀÇ ±â¼ú ±ÔÄ¢ 468
8.2.2 ¹®¼È »ý¼º Åø - JSDoc 469
8.3 ºôµå Åø·Î Á¤Çü ÀÛ¾÷ ÀÚµ¿ÈÇϱâ - Grunt 471
8.3.1 Grunt¿¡ ÀÇÇÑ ¼Ò½º ÄÚµåÀÇ ¾ÐÃà 471
8.4 Áö±Ý ¹Ù·Î ECMAScript 2015 ½ÇÀü È°¿ëÇϱâ - Babel 478
8.4.1 Äڵ带 ¼öµ¿À¸·Î º¯È¯Çϱâ 478
8.4.2 Grunt °æÀ¯·Î Babel ½ÇÇàÇϱâ 479
8.4.3 °£ÀÌ ÀÎÅÍÇÁ¸®ÅÍ ÀÌ¿ëÇϱâ 481
8.5 Àб⠽±°í, À¯Áöº¸¼ö°¡ ½¬¿î ÄÚµå ÀÛ¼ºÇϱâ - ÄÚµù ±Ô¾à 482
8.5.1 JavaScriptÀÇ ÁÖ¿ä ÄÚµù ±Ô¾à 482
8.5.2 JavaScript style guide(MDN)ÀÇ ÁÖ¿ä ±Ô¾à 483
8.5.3 GoogleÀÇ Ç¥ÁØ ÄÚµù ½ºÅ¸ÀÏ 484
ã¾Æº¸±â 486
°³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ ±âº» ¹®¹ýºÎÅÍ ¿Ïº®ÇÑ ÇöÀå ´ëÀÀ±îÁö!
¾Æ¸¶Á¸ÀçÆÒ No.1 ÀÚ¹Ù½ºÅ©¸³Æ® ¼Àû!
ÀÌ Ã¥Àº ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇÑ ÀÌÇظ¦ È®½ÇÈ÷ ÇØµÎ°í ½ÍÀº ºÐÀ» À§ÇØ ¸¸µç Ã¥ÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®
´Â ÁÁ°Ô Ç¥ÇöÇÏÀÚ¸é ¡®À¯¿¬ÇÑ¡¯, ³ª»Ú°Ô ¸»ÇÏÀÚ¸é ¡®¾Ö¸ÅÇÏ°í ¾î¼³Ç¡¯ ¾ð¾î´Ù. ³²ÀÌ ¸¸µç Äڵ带 ´ëÃæ
Èä³»³»´Â °Í¸¸À¸·Îµµ ±×·°Àú·° µ¿ÀÛÇÏ´Â Äڵ带 ¸¸µé¾î ³¾ ¼öµµ ÀÖÁö¸¸, º»°ÝÀûÀ¸·Î ¸¶½ºÅÍÇÏ·Á
¸é źźÇÑ ±âÃÊ°¡ µÞ¹ÞħµÇ¾î¾ß ÇÑ´Ù.
ÀÌ Ã¥Àº °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ ±âº» ¹®¹ý°ú ECMAScript 6¿¡ ÀÇÇØ °è¼Ó ÁøÈÇÏ°í ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ »õ·Î¿î ±â¹ýÀº ¹°·Ð, °´Á¦ÁöÇâ ±¸¹®, Ajax Ŭ¶óÀ̾ðÆ® Ãø °³¹ß¿¡ ´ëÇØ »ó¼¼È÷ ¼³¸íÇϸç, Å×½ºÆ®, ¹®¼, ÄÚµù µî ÇöÀå¿¡¼ ²À ÇÊ¿äÇÑ Áö½Äµµ ´ã°Ü ÀÖ´Ù.
ÀÌ Ã¥ÀÇ ÁÖ¿ä ³»¿ë
±âº»ÀûÀÎ ÀÛ¼º¹ý ÀÍÈ÷±â
±âº» µ¥ÀÌÅÍ Á¶ÀÛÇϱâ: ³»ÀåÇü °´Ã¼
¹Ýº¹ÀûÀ¸·Î »ç¿ëÇÏ´Â Äڵ带 Çϳª·Î Á¤¸®Çϱâ: ÇÔ¼ö
´ë±Ô¸ð °³¹ß¿¡¼µµ Åë¿ëµÇ´Â ÀÛ¼º¹ý ÀÍÈ÷±â: °´Ã¼ÁöÇâ ±¸¹®
HTML°ú XML ¹®¼ ´Ù·ç±â: DOM
Ŭ¶óÀ̾ðÆ® Ãø ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ß ¸¶½ºÅÍÇϱâ
ÇöÀå¿¡¼ ¹Ù·Î ´ëÀÀÇÒ ¼ö ÀÖ´Â Áö½Ä
¾Æ¸¶Á¸ÀçÆÒ No.1 ÀÚ¹Ù½ºÅ©¸³Æ® ¼Àû!
ÀÌ Ã¥Àº ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇÑ ÀÌÇظ¦ È®½ÇÈ÷ ÇØµÎ°í ½ÍÀº ºÐÀ» À§ÇØ ¸¸µç Ã¥ÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®
´Â ÁÁ°Ô Ç¥ÇöÇÏÀÚ¸é ¡®À¯¿¬ÇÑ¡¯, ³ª»Ú°Ô ¸»ÇÏÀÚ¸é ¡®¾Ö¸ÅÇÏ°í ¾î¼³Ç¡¯ ¾ð¾î´Ù. ³²ÀÌ ¸¸µç Äڵ带 ´ëÃæ
Èä³»³»´Â °Í¸¸À¸·Îµµ ±×·°Àú·° µ¿ÀÛÇÏ´Â Äڵ带 ¸¸µé¾î ³¾ ¼öµµ ÀÖÁö¸¸, º»°ÝÀûÀ¸·Î ¸¶½ºÅÍÇÏ·Á
¸é źźÇÑ ±âÃÊ°¡ µÞ¹ÞħµÇ¾î¾ß ÇÑ´Ù.
ÀÌ Ã¥Àº °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÒ ±âº» ¹®¹ý°ú ECMAScript 6¿¡ ÀÇÇØ °è¼Ó ÁøÈÇÏ°í ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ »õ·Î¿î ±â¹ýÀº ¹°·Ð, °´Á¦ÁöÇâ ±¸¹®, Ajax Ŭ¶óÀ̾ðÆ® Ãø °³¹ß¿¡ ´ëÇØ »ó¼¼È÷ ¼³¸íÇϸç, Å×½ºÆ®, ¹®¼, ÄÚµù µî ÇöÀå¿¡¼ ²À ÇÊ¿äÇÑ Áö½Äµµ ´ã°Ü ÀÖ´Ù.
ÀÌ Ã¥ÀÇ ÁÖ¿ä ³»¿ë
±âº»ÀûÀÎ ÀÛ¼º¹ý ÀÍÈ÷±â
±âº» µ¥ÀÌÅÍ Á¶ÀÛÇϱâ: ³»ÀåÇü °´Ã¼
¹Ýº¹ÀûÀ¸·Î »ç¿ëÇÏ´Â Äڵ带 Çϳª·Î Á¤¸®Çϱâ: ÇÔ¼ö
´ë±Ô¸ð °³¹ß¿¡¼µµ Åë¿ëµÇ´Â ÀÛ¼º¹ý ÀÍÈ÷±â: °´Ã¼ÁöÇâ ±¸¹®
HTML°ú XML ¹®¼ ´Ù·ç±â: DOM
Ŭ¶óÀ̾ðÆ® Ãø ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ß ¸¶½ºÅÍÇϱâ
ÇöÀå¿¡¼ ¹Ù·Î ´ëÀÀÇÒ ¼ö ÀÖ´Â Áö½Ä