°³¶ËÀ̳׿¡¼ ÆÇ¸ÅµÈ "À¥ °³¹ßÀÚ ·¹ÆÛ·±½º °¡À̵å" Á¤°¡ 50,000¿ø Æò±ÕÇÒÀΰ¡
-°¡°Ý´ëº°- 1,000¿ø 2,000¿ø 3,000¿ø 4,000¿ø 5,000¿ø 6,000¿ø 7,000¿ø 8,000¿ø 9,000¿ø 10,000¿ø 11,000¿ø 12,000¿ø 13,000¿ø 14,000¿ø 15,000¿ø 16,000¿ø 17,000¿ø 18,000¿ø 19,000¿ø 20,000¿ø 21,000¿ø 22,000¿ø 23,000¿ø 24,000¿ø 25,000¿ø 26,000¿ø 27,000¿ø 28,000¿ø 29,000¿ø 30,000¿ø 31,000¿øÀÌ»ó
- °á°ú³» °Ë»ö -
ÆǸÅÀÚ¸í »óÅ (ÃÖ»ó/»ó/Áß/ÇÏ) ±¸¼º
1Àå. HTML ¿ä¼Ò DOCTYPE html ¹®¼ ¸ÞŸµ¥ÀÌÅÍ ½Ã¸Çƽ ÄÜÅÙÃ÷ content ¼½¼Ç ÀζóÀÎ ¿ä¼Ò »ðÀÔµÈ ÄÜÅÙÃ÷ Å×À̺í Æû µå·ÎÀ× ¿ä¼Ò 2Àå. HTML ¼Ó¼º Àü¿ª ¼Ó¼º accesskey class contenteditable data-* dir draggable hidden id lang spellcheck style tabindex title ±× ¿Ü ¼Ó¼º accept accept-charset action alt async autocomplete autofocus autoplay autosave cite cols colspan datetime disabled download content controls for form formaction height href hreflang label list loop max maxlength media method min multiple name novalidate pattern placeholder poster readonly rel required reversed rows rowspan scope selected size src start step type value width wrap 3Àå. CSS °³³ä°ú ¾ÖÇø®ÄÉÀÌ¼Ç ±âº» ¼±ÅÃÀÚ ´Ü¼ø ¼±ÅÃÀÚ ¿¬°áÀÚ ÀÚ¼Õ ¿¬°áÀÚ ÀÚ½Ä ¿¬°áÀÚ ÀÎÁ¢ ÇüÁ¦ ¿¬°áÀÚ ÀÏ¹Ý ÇüÁ¦ ¿¬°áÀÚ ¼±ÅÃÀÚ ¸í½Ãµµ °¡»ó Ŭ·¡½º ¸µÅ© °¡»ó Ŭ·¡½º »ç¿ëÀÚ ¾×¼Ç °¡»ó Ŭ·¡½º ±¸Á¶Àû ¼±ÅÃÀÚ »óÅ ¼±ÅÃÀÚ -checked -default -disabled°ú -enabled -empty -in-range¿Í -out-of-range -invalid¿Í -valid -not ¶Ç´Â ºÎÁ¤ -optional°ú -required -lang() °¡»ó ¿ä¼Ò --before¿Í --after --first-letter --first-line --selection »ý¼ºµÈ ÄÜÅÙÃ÷ content ÀÎ¿ë ºÎÈ£ 4Àå. CSS ÇÁ·ÎÆÛƼ- ÆÄÆ® 1 ¾Ö´Ï¸ÞÀÌ¼Ç ±âº» ¸¶Å©¾÷°ú CSS ÃÖÁ¾ CSS ÄÚµå ¹é±×¶ó¿îµå background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size background ¹Ú½º ¸ðµ¨ width height padding margin Border box-sizing max-height max-width min-height min-width object-fit object-position Border radius border-radius Unit »ó´ëÀû ±æÀÌ ´ÜÀ§ ºäÆ÷Æ®- »ó´ë ±æÀÌ ´ÜÀ§ Àý´ë ±æÀÌ ´ÜÀ§ °¢µµ µ¥ÀÌÅÍ Å¸ÀÔ ÇØ»óµµ ´ÜÀ§ ½Ã°£ ´ÜÀ§ Ä®·³ Ç÷º½º¹Ú½º flex-grow flex-shrink flex-basis flex-direction flex-wrap flex-flow align-content align-items align-self order justify-content flex ¿ä¾à 5Àå. CSS ÇÁ·ÎÆÛƼ- ÆÄÆ® 2 ÆùÆ® font-family font-feature-settings font-size font-size-adjust font-stretch font-style font-variant font-variant-ligatures font-weight font Æ®·£½ºÆû transform transform-origin transform-style Transition Æ÷Áö¼Å´× position top bottom left right vertical-align ÅؽºÆ® color text-align text-decoration text-decoration-line text-decoration-color text-decoration-style text-indent text-overflow text-rendering text-shadow text-transform text-underline-position direction Å×À̺í table-layout border-collapse border-spacing empty-cells caption-side ´Ü¾î¿Í ´Ü¶ô hyphens word-break word-spacing word-wrap line-height orphans quotes widows writing-mode letter-spacing white-space tab-size ÆäÀÌ¡ page-break-after page-break-before page-break-inside 6Àå. CSS ÇÁ·ÎÆÛƼ- ÆÄÆ® 3 ÆäÀÌÁö ¹Ú½º bleed ¼³¸í marks ¸®½ºÆ® list-style list-style-type list-style-position list-style-image Ä«¿îÅÍ counter-reset counter-increment ¼¨µµ¿ì µå·Ó(drop shadow) box-shadow µð½ºÇ÷¹ÀÌ¿Í °¡½Ã¼º ¼Ó¼º all clear display opacity filter overflow overflow-x overflow-y visibility z-index ¸¶½ºÅ·°ú Ŭ¸®ÇÎ mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type mask-border mask-border-source mask-border-mode mask-border-slice mask-border-width mask-border-outset mask-border-repeat clip-path À̹ÌÁö ·»´õ¸µ°ú ¿À¸®¿£Å×À̼Ç(¹æÇâ) image-orientation image-rendering »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º cursor pointer-events outline 3Â÷¿ø perspective perspective-origin backface-visibility ¿ä¾à 7Àå. CSS ÇÔ¼ö ÇÊÅÍ brightness() contrast() grayscale() invert() hue-rotate() blur() saturate() sepia() Æ®·£½ºÆû matrix() matrix3d() rotate3d() rotateX() rotateY() rotateZ() scale() scale3d() scaleX() scaleY() scaleZ() skew() skewX() skewY() steps() translate() translate3d() translateX() translateY() translateZ() »ö»ó hsl()¿Í hsla() rgb()¿Í rgba() ±×·¡µð¾ðÆ® linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() °ª attr() ¹ÝÀÀÇü Å×À̺í calc() url() cubic-bezier() ±âŸ drop-shadow() element() image() ¼³¸í opacity() perspective() rect() at-±ÔÄ¢ @charset @document() @font-face ±¸±Û ÆùÆ® @import @keyframes @media @namespace @page @supports Àü¿ª CSS Å°¿öµå °ª auto inherit initial none normal unset revert ¿ä¾à 8Àå. ÀÚ¹Ù½ºÅ©¸³Æ® ±¸Çö, ±âº» ¹®¹ý, º¯¼ö ŸÀÔ ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¿ª»ç ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¹ßÀü ÀÚ¹Ù½ºÅ©¸³Æ® ±¸Çö ÄÚ¾î ÀÚ¹Ù½ºÅ©¸³Æ®(ECMAScript) DOM BOM Ŭ¶óÀ̾ðÆ® ´ÜÀÇ ÀÚ¹Ù½ºÅ©¸³Æ®(Client-side JavaScript) ¿ÜºÎ ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏ ·ÎµùÇϱâ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ù ¹ø° ÇÁ·Î±×·¥ ¸¸µé±â ¼¹ö ´ÜÀÇ ÀÚ¹Ù½ºÅ©¸³Æ® Rhino¸¦ »ç¿ëÇØ ½ºÅ©¸³Æ® ¸¸µé±â Node.js ¼³¸í ¾ð¾îÀû ¹®¹ý Language Type ¹®ÀÚ ¼¼Æ® ´ë¼Ò¹®ÀÚ ±¸º° ÈÀÌÆ®½ºÆäÀ̽º¿Í ÁÙ ¹Ù²Þ À¯´ÏÄÚµå À̽ºÄÉÀÌÇÁ ½ÃÄö½º Á¤±ÔÈ ½Äº°ÀÚ ¿¹¾à Å°¿öµå ÁÖ¼® ¸®ÅÍ·² ¹®Àå ¼¼¹ÌÄÝ·Ð µ¥ÀÌÅÍ Å¸ÀÔ ¿¬»êÀÚ Å¸ÀÔ undefined ŸÀÔ ³Î ŸÀÔ ¼ýÀÚ Å¸ÀÔ ºÒ¸° ŸÀÔ ¹®ÀÚ¿ ŸÀÔ ¿ÀºêÁ§Æ® ŸÀÔ º¯¼ö, ¹üÀ§, ¸Þ¸ð¸® º¯¼ö ¼±¾ð º¯¼ö ¹üÀ§ ÇÁ¸®¹ÌƼºê¿Í ·¹ÆÛ·±½º °ª ½ÇÇà ÄÁÅؽºÆ®¿Í ¹üÀ§ °¡ºñÁö Ä÷º¼Ç 9Àå. ÀÚ¹Ù½ºÅ©¸³Æ® Ç¥Çö½Ä, ¿¬»êÀÚ, ¹®Àå, ¹è¿ Ç¥Çö½Ä ±âº» Ç¥Çö½Ä ¿ÀºêÁ§Æ® ÃʱâÈ ÇÔ¼ö Á¤ÀÇ Ç¥Çö½Ä ÇÁ·ÎÆÛƼ ¾×¼¼½º Ç¥Çö½Ä È£Ãâ Ç¥Çö½Ä ¿ÀºêÁ§Æ® »ý¼º Ç¥Çö½Ä Æò°¡ Ç¥Çö½Ä ¿¬»êÀÚ °³¿ä »ê¼ú ¿¬»êÀÚ ³í¸® ¿¬»êÀÚ ÁöÁ¤ ¿¬»êÀÚ ´©½Â ÁöÁ¤ÀÚ (**=) °ü°è ¿¬»êÀÚ ¹®Àå Ç¥Çö¹® º¹ÇÕ ºó ¹®Àå(Compound empty statement) ¼±¾ð¹® Á¶°Ç¹® ·çÇÁ Á¡ÇÁ¿Í ¶óº§ ¹®Àå ¹è¿ ¹è¿ ŸÀÔ ¹è¿ ŸÀÔ ¿ÀºêÁ§Æ® ¹è¿ ¸¸µé±â ¹è¿ ¿ä¼Ò¿¡ ÀÐ°í ¾²±â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ´ÙÂ÷¿ø ¹è¿ ¹è¿ ³» ÇÁ·ÎÆÛƼ ¹è¿ ¸Þ¼Òµå ECMA ¹è¿ ¸Þ¼Òµå 10Àå. ÀÚ¹Ù½ºÅ©¸³Æ® °´Ã¼ ÁöÇâ ÇÁ·Î±×·¡¹Ö ´ÙÇü¼º ĸ½¶È »ó¼Ó Ãß»óÈ ¿ÀºêÁ§Æ® ¿ÀºêÁ§Æ® ¸¸µé±â µðÀÚÀÎ ÆÐÅÏ ÇÁ·ÎÆÛƼ getter¿Í setter ÇÁ·ÎÆÛƼ »èÁ¦ Å×½ºÆà ÇÁ·ÎÆÛƼ ÇÁ·ÎÆÛƼ ¿°Å ÇÁ·ÎÆÛƼ ¼Ó¼º ¿ÀºêÁ§Æ® ¼Ó¼º °´Ã¼ Á÷·ÄÈ ¿ÀºêÁ§Æ® ¸Þ¼Òµå ÇÔ¼ö¿Í ¸Þ¼Òµå ÇÔ¼ö invokeÇϱâ ÇÔ¼ö Á¤ÀÇÇϱâ ÇÔ¼öÀÇ Àμö¿Í ÆĶó¹ÌÅÍ ÆĶó¹ÌÅÍ¿Í ¹Ýȯ °ª ³×ÀÓ½ºÆäÀ̽º·Î¼ ÇÔ¼ö Ŭ·ÎÀú ÇÔ¼ö ÇÁ·ÎÆÛƼ ¸Þ¼Òµå ÇÔ¼ö »ý¼ºÀÚ Å¬·¡½º¿Í ¸ðµâ Ŭ·¡½º¿Í ÇÁ·ÎÅäŸÀÔ »ý¼ºÀÚ Å¬·¡½º Á¤ÀÇÇϱâ ECMA5 ½ºÅ©¸³Æ® ³»ÀÇ Å¬·¡½º ¸ðµâ »ó¼Ó ÇÁ·ÎÅäŸÀÔ Ã¼ÀÎ »ý¼ºÀÚ ÈÉÄ¡±â Á¶ÇÕ »ó¼Ó ÇÁ·ÎÅäŸÀÔ »ó¼Ó ±â»ý »ó¼Ó ±â»ý Á¶ÇÕ »ó¼Ó ¼ºêŬ·¡½º ºôÆ®ÀÎ ¿ÀºêÁ§Æ® Àü¿ª ¿ÀºêÁ§Æ® ³¯Â¥ ¿ÀºêÁ§Æ® getTime() getMilliseconds() getMinutes() getHours() getDate() getDay() getMonth() getFullYear() ³¯Â¥ ¼³Á¤ ¸Þ¼Òµå ¼öÇÐ ¿ÀºêÁ§Æ® RegExp ¿ÀºêÁ§Æ® ¹®ÀÚ¿ ¿ÀºêÁ§Æ® ¹è¿ ¿ÀºêÁ§Æ® 11Àå. ÀÚ¹Ù½ºÅ©¸³Æ®¿Í ECMAScript 6ÀÇ È®Àå ȣȯ¼º°ú ¸ñÇ¥ »çÇ× ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¼ºê¼Â°ú È®Àå ÀÚ¹Ù½ºÅ©¸³Æ® ¼ºê¼Â ÀÚ¹Ù½ºÅ©¸³Æ® È®Àå const let ºñ±¸Á¶È ÇÒ´ç for each ¹Ýº¹ÀÚ »ý¼º±â º¯¼ö »ý¼ºÀÚ Ç¥Çö½Ä ¹üÀ§ ÁöÁ¤ º¯¼ö¿Í »ó¼ö ´ÜÃà ÇÔ¼ö ´ÙÁß catchÀý E4X - XMLÀ» À§ÇÑ ECMAScript ECMAScript 6ÀÇ ÁÖ¿ä ±â´É È»ìÇ¥ ÇÔ¼ö Ŭ·¡½º Çâ»óµÈ ¿ÀºêÁ§Æ® ¸®ÅÍ·² ÅÛÇø´ ¹®ÀÚ¿ ºñ±¸Á¶ÈµÈ ÇÒ´ç ¹ÙÀεù ¹Ýº¹ÀÚ¿Í for...of ¿¬»êÀÚ Á¦³Ê·¹ÀÌÅÍ À¯´ÏÄÚµå Áö¿ø ¸ðµâ ¸ðµâ ·Î´õ Ä÷º¼Ç ÇÁ·Ï½Ã ½Éº¼ ¼ºêŬ·¡½º·Î ¸¸µé ¼ö ÀÖ´Â ºôÆ®ÀÎ ÇÁ¶ó¹Ì½º ÄÚ¾î ¼öÇÐ ¶óÀ̺귯¸® API 2Áø°ú 8Áø ¸®ÅÍ·² Reflect API ²¿¸® È£Ãâ 12Àå. ¼¹ö ´Ü ÀÚ¹Ù½ºÅ©¸³Æ®- NodeJS ÆÄÀÏ°ú ÇÁ·Î¼¼½º °ü¸® ¸ðµâ OS ¸ðµâ process ¸ðµâ ÆÄÀÏ ÇÔ¼ö ÆÄÀÏ ¸ðµâ path ¸ðµâ REPL node ¿¡·¯ ó¸® À¯Æ¿¸®Æ¼ À̺¥Æ® ¾ÏÈ£È ¹öÆÛ ÄÜ¼Ö npm ½ºÆ®¸² setEncoding net ¸ðµâ createServer net.Server net.Socket HTTP ¸ðµâ createServer http.Server IncomingMessage ServerResponse http.clientRequest 13Àå. ºÎÆ®½ºÆ®·¦- ½ºÅ¸Àϸ®½ÃCSS ÇÁ·ÐÆ®¿£µå ÇÁ·¹ÀÓ¿öÅ© ºÎÆ®½ºÆ®·¦ ±âº» ¼Ò°³ HTML5 doctype ¸ð¹ÙÀÏ ¿ì¼± ¹ÝÀÀÇü À̹ÌÁö ÄÁÅ×ÀÌ³Ê ½ÃÀÛÇϱ⠱êÇãºê ÇÁ·ÎÁ§Æ® Bootstrap ´Ù¿î·Îµå bower·Î ¼³Ä¡Çϱâ npmÀ¸·Î ¼³Ä¡Çϱâ composer·Î ¼³Ä¡Çϱ⠷¹À̾ƿô °íÁ¤ ·¹À̾ƿô À¯µ¿ ·¹À̾ƿô ¹ÝÀÀÇü ·¹À̾ƿô Áö¿øµÇ´Â ÀåÄ¡ ±×¸®µå ½Ã½ºÅÛ ±×¸®µå ¿É¼Ç ¿ä¾àÇ¥ ¹Ìµð¾î Äõ¸® ¹ÝÀÀÇü ¿ Àç¼³Á¤ ¿ ¿ÀÇÁ¼Â ¿ Áßø ¿ ¹èÄ¡ LESS º¯¼ö¿Í ¹Í½ºÀÎ ¹Í½ºÀÎ º¯¼ö ŸÀÌÆ÷±×·¡ÇÇ Á¦¸ñ º»¹® ¸®µå º»¹® °Á¶ ÀÛÀº ÅؽºÆ® ±½Àº ÅؽºÆ® ±â¿ïÀÓ ÅؽºÆ® Á¤·Ä ¾à¾î ±âº» µÎ¹®ÀÚ¾î ÁÖ¼Ò Àο뱸 Ç¥ ±âº» ÁÙ¹«´Ì Çà °æ°è¼± Àִ ǥ Çà È£¹ö¸µ Á¼Àº Æø Çà ¸Æ¶ôÀûÀΠŬ·¡½º ¹ÝÀÀÇü Ç¥ ¸ñ·Ï ¼ø¼ ¾ø´Â ¸ñ·Ï ¼ø¼ ÀÖ´Â ¸ñ·Ï ½ºÅ¸ÀÏ ¾ø´Â ¸ñ·Ï ÀζóÀÎ ¸ñ·Ï ¼³¸í ¸ñ·Ï ¼öÆò ¼³¸í ºÎÆ®½ºÆ®·¦ÀÇ Æû ¼öÁ÷ Æû ÀζóÀÎ Æû ¼öÆò Æû ºÎÆ®½ºÆ®·¦ÀÇ Æû ÀÔ·Â ÅؽºÆ® ¿µ¿ª µµ¿ò¸» ÅؽºÆ® üũ¹Ú½º ¼±Åà ¸ñ·Ï ¶óµð¿À ¹öÆ° Á¤Àû ÄÁÆ®·Ñ ÀÔ·Â Æ÷Ä¿½º ºñÈ°¼ºÈ ÀÔ·Â À¯È¿ »óÅ ÄÁÆ®·Ñ Å©±â Á¶Àý À̹ÌÁö º¸Á¶ ¾ÆÀÌÄÜ ³»ºñ°ÔÀÌ¼Ç ¿ä¼Ò ÅÇ ÇÊ ¾çÂÊ Á¤·Ä ºñÈ°¼ºÈ ¸µÅ© ³»ºñ°ÔÀÌ¼Ç ¹Ù ±âº» ¼³Á¤ Æû ¹öÆ° ÅؽºÆ® ÀÏ¹Ý ¸µÅ© »ó´Ü¿¡ °íÁ¤ ÇÏ´Ü¿¡ °íÁ¤ Á¤Àû »ó´Ü ¹ÝÀüµÈ ³»ºñ°ÔÀÌ¼Ç ¹Ù ÆгΠ±âº» Á¦¸ñ ²¿¸®¸» ±×·ì °æ·Î ¶óº§°ú ¹èÁö ¶óº§ ¹èÁö ÆäÀÌÁö³×ÀÌ¼Ç ±âº» ¼³Á¤ ÆäÀÌÀú ÇÁ·Î±×·¹½º ¹Ù °í±Þ ºÎÆ®½ºÆ®·¦/ÀÚ¹Ù½ºÅ©¸³Æ® Ç÷¯±×ÀÎ ¹öÆ° ±âº» ¹öÆ° Åø¹Ù Å©±â Á¶Àý Áßø ¼öÁ÷Çü ¾çÂÊ Á¤·Ä ¸µÅ©Çü µå·Ó´Ù¿î ´ÜÀÏ ¹öÆ° ºÐÇÒ ¹öÆ° ÅøÆÁ À§Ä¡ ¼³Á¤ ÆË¿À¹ö ±âº» »ý¼º À§Ä¡ ¼³Á¤ ´Ý±â °æº¸ ÅÇ ¾ÆÄÚµð¾ð ¸ð´Þ ¸ð´Þ Å©±â ¹Ìµð¾î °´Ã¼ ij·¯¼¿ ÀÚµ¿ ¿Ï¼º ÀÚµ¿ ¿Ï¼º ¸¸µé±â ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÅëÇÑ ÀÚµ¿ ¿Ï¼º »ç¿ëÇϱ⠽ºÅ©·Ñ½ºÆÄÀÌ µ¥ÀÌÅÍ ¼Ó¼ºÀ» ÅëÇÑ ½ºÅ©·Ñ½ºÆÄÀÌ È°¼ºÈ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÅëÇÑ ½ºÅ©·Ñ½ºÆÄÀÌ È°¼ºÈ ¾ÖÇȽº µ¥ÀÌÅÍ ¼Ó¼ºÀ» ÅëÇÑ ¾ÖÇȽº È°¼ºÈ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÅëÇÑ ¾ÖÇȽº È°¼ºÈ »ç¿ëÀÚ Á¤ÀÇ ºÎÆ®½ºÆ®·¦ ºÎÆ®½ºÆ®·¦À¸·Î ¸¸µç À¥»çÀÌÆ® ºÎÆ®½ºÆ®·¦ °ü·Ã Âü°í ÀÚ·á 14Àå. jQuery- À¯¸íÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸® jQueryÀÇ ¹ßÀü ½ÃÀÛÇϱâ JQuery ¼³Ä¡Çϱâ jQuery »ç¿ëÇϱ⠼±ÅÃÀÚ ¿ä¼Ò ¼±ÅÃÀÚ ID ¼±ÅÃÀÚ Å¬·¡½º ¼±ÅÃÀÚ À̺¥Æ® ¸¶¿ì½º À̺¥Æ® Å°º¸µå À̺¥Æ® Æû À̺¥Æ® ºê¶ó¿ìÀú À̺¥Æ® È¿°ú¿Í ¾Ö´Ï¸ÞÀÌ¼Ç animate() stop() ¼û±è, ³ªÅ¸³¿, Åä±Û ÆäÀ̵å È¿°ú ½½¶óÀ̵å È¿°ú Äݹé callbacks.add() callbacks.fire() callbacks.remove() callbacks.disable() üÀÌ´× jQuery¿Í ¹®¼ °´Ã¼ ¸ðµ¨ jQuery ¼øȸ Á¶»ó parent() parents()- parentsUntil()- ÀÚ¼Õ find() ÇüÁ¦ ¹Ýȯ ÇÊÅ͸µ jQuery¿¡¼ AJAX »ç¿ëÇϱâ jQueryÀÇ Ajax Load jQueryÀÇ Ajax Get jQueryÀÇ Ajax Post ´Ù¾çÇÑ jQuery ÇÔ¼ö noConflict() param() index() each() data() removeData() jQuery Ç÷¯±×ÀÎ jQuery Âü°í ÀÚ·á15Àå. AngularJS- ±¸±ÛÀÇ ¸ÂÃãÇü ÇÁ·¹ÀÓ¿öÅ© ¸ðµâ(ngApp) module config run ¶ó¿ìÆÃ(ngRoute) ngView $routeProvider $route $routeParams ÀÇÁ¸¼º ÁÖÀÔ ¾Þ±Ö·¯¿¡¼ÀÇ ÀÇÁ¸¼º ÁÖÀÔ injector $injector ÄÁÆ®·Ñ·¯ ngController $scope µ¥ÀÌÅÍ ¹ÙÀεù°ú ÅÛÇø´ À̺¥Æ® ¹ÙÀεù ¹üÀ§ ´ÙÀÌÁ¦½ºÆ® »çÀÌŬ $watch $apply °èÃþ ¼ºñ½º ÆÑÅ丮 ¼ºñ½º Á¦°øÀÚ °ª »ó¼ö $http À¯¿ëÇÑ ¸Þ¼Òµå Áß¿äÇÑ ¼ºñ½º ÇÁ¶ó¹Ì½º $q Ç¥Çö½Ä ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Ç¥Çö½Ä Áö½ÃÀÚ Á¤±ÔÈ ¹üÀ§ DOM º¯°æ À̺¥Æ® ¹ÙÀεù Áö½ÃÀÚ Á¤ÀÇ °´Ã¼ ÁÖ¿ä Áö½ÃÀÚ Àü¿ª extend noop isUndefined copy bind Æû ngModel °ËÁõ Å×½ºÆ® Jasmine°ú Karma·Î ´ÜÀ§ Å×½ºÆ®Çϱâ ngMock ´ÜÀ§ Å×½ºÆ® ÄÁÆ®·Ñ·¯ ´ÜÀ§ Å×½ºÆ® Áö½ÃÀÚ ´ÜÀ§ Å×½ºÆ® ¼ºñ½º - ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë - -ÁÖ¿ä HTML ¿ä¼Ò ¹× ¼Ó¼º¿¡ °üÇÑ ¼³¸í°ú ¿¹Á¦ - CSS ÇÁ·ÎÆÛƼ ¹× ÇÔ¼öÀÇ °³³ä°ú »ç¿ë¹ý -ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ý°ú Ç¥Çö½Ä -´Ù¾çÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® ÆÐÅÏ°ú ÀÚ¹Ù½ºÅ©¸³Æ® °´Ã¼ ÁöÇâ ÇÁ·Î±×·¡¹ÖÀÇ ±âº» - À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÇ Å¬¶óÀ̾ðÆ® ´Ü ½ºÅ©¸³ÆÃÀ» À§ÇÑ ÃֽŠECMASCript 6 ±¸Çö -½Å¼ÓÇÑ À¥»çÀÌÆ® ÇÁ·ÐÆ®¿£µå °³¹ßÀ» À§ÇÑ »õ·Î¿î ¹æ¹ý°ú ºÎÆ®½ºÆ®·¦ -jQuery¸¦ ÀÌ¿ëÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® È®Àå -ÀÚ¹Ù½ºÅ©¸³Æ® ¼¹ö ´Ü ÇÁ·Î±×·¡¹ÖÀ» À§ÇÑ ÇÙ½É Node.js ¸ðµâ - AngularJSÀÇ Áß¿ä ¸ðµâ, ÄÁÆ®·Ñ·¯, Áö½ÃÀÚ, ¼ºñ½º - ÀÌ Ã¥ÀÇ ´ë»ó µ¶ÀÚ - °í±Þ À¥ °³¹ßÀÚ»Ó ¾Æ´Ï¶ó Ãʺ¸ÀÚµµ À¯¿ëÇÏ°Ô ÀÐÀ» ¼ö ÀÖµµ·Ï ÀÛ¼ºµÆ´Ù. À¥ °³¹ßÀÚ¶ó¸é ´©±¸³ª ¼ÒÁßÇÑ ¸®¼Ò½º¸¦ ¾òÀ» ¼ö ÀÖÀ» °ÍÀÌ´Ù. HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®, NodeJS, ºÎÆ®½ºÆ®·¦, jQuery, Angular¿¡ ´ëÇÑ ÄܼÁÆ®¸¦ ã¾Æº¼ ¼ö ÀÖ´Ù.- ÀÌ Ã¥ÀÇ ±¸¼º - 1Àå, 'HTML ¿ä¼Ò'¿¡¼´Â À¥ÆäÀÌÁö¸¦ ¸¸µé ¶§ ÇÊ¿äÇÑ ¸ðµç ¿ä¼Ò¸¦ »ìÆ캻´Ù. HTML5À» ÁýÁßÀûÀ¸·Î ´Ù·é´Ù. 2 Àå, 'HTML ¼Ó¼º'¿¡¼´Â HTML ¿ä¼Ò¿Í °°ÀÌ »ç¿ëÇÒ ¼ö ÀÖ´Â ¼Ó¼ºÀ» »ìÆ캻´Ù. 3Àå, 'CSS °³³ä°ú ¾ÖÇø®ÄÉÀ̼Ç'¿¡¼´Â ¼±ÅÃÀÚ(selector)¿¡ ´ëÇØ ÁÖ·Î ¼³¸íÇÑ´Ù. ¼±ÅÃÀÚ´Â CSS ¼Ó¼ºÀÌ ¾î¶² ¿ä¼Ò¿¡ Àû¿ëµÉÁö¸¦ °áÁ¤ÇÑ´Ù. 4Àå, 'CSS ÇÁ·ÎÆÛƼ- ÆÄÆ®I'¿¡¼´Â ¾Ö´Ï¸ÞÀ̼Ç, ¹é±×¶ó¿îµå, ¹Ú½º ¸ðµ¨, CSS À¯´Ö, Ä®·³, Ç÷º½º¹Ú½º(Flexbox)ÀÇ ÇÁ·ÎÆÛƼ¸¦ ´Ù·é´Ù. 5Àå, 'CSS ÇÁ·ÎÆÛƼ- ÆÄÆ®2'¿¡¼´Â ÆùÆ®, Æ®·£½ºÆû(transform), Àüȯ(transition), Æ÷Áö¼Ç(position), ÅؽºÆ®, Å×À̺í, ´Ü¾î(word,) ´Ü¶ô(paragraph), ÆäÀÌ¡(paging)À» ´Ù·é´Ù. 6Àå, 'CSS ÇÁ·ÎÆÛƼ- ÆÄÆ®3'¿¡¼´Â ÆäÀÌÁö ¹Ú½º, ¸®½ºÆ®, Ä«¿îÅÍ, ¼¨µµ¿ì µå·Ó(drop shadow), µð½ºÇ÷¹ÀÌ(display)¿Í °¡½Ã¼º(visibility), ¸¶½ºÅ·(masking)°ú Å©¸®ÇÎ(clipping), »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º ¹× 3DÀÇ ÇÁ·ÎÆÛƼ¸¦ ´Ù·é´Ù. 7Àå, 'CSS ÇÔ¼ö'¿¡¼´Â ÇÊÅÍ, Æ®·£½ºÆû, »ö»ó, ±×·¡µð¾ðÆ®, °ªÀ» ´Ù·é´Ù. at-±ÔÄ¢, Àü¿ª Å°¿öµå °ª, ±âŸ Ç׸ñ µîÀÇ º°µµ °³³äµµ ´Ù·ð´Ù. 8Àå, 'ÀÚ¹Ù½ºÅ©¸³Æ® ±¸Çö, ±âº» ¹®¹ý, º¯¼ö ŸÀÔ'¿¡¼´Â ¹®¹ý°ú º¯¼ö, ±×¸®°í ŸÀÔÀ» Æ÷ÇÔÇÑ ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±¸Çö°ú ±âº»ÀûÀÎ ¾ð¾î »çÇ×À» ´Ù·ð´Ù. ÀÌ Àå¿¡¼´Â ±âº»ÀûÀÎ ½ºÅ©¸³ÆÃÀ» ÀÌÇØÇÏ°í ½ÃÀÛÇÒ ¼ö ÀÖµµ·Ï ÇØÁØ´Ù. 9Àå, 'ÀÚ¹Ù½ºÅ©¸³Æ® Ç¥Çö½Ä, ¿¬»êÀÚ, ¹®Àå, ¹è¿'¿¡¼´Â ±âº»ÀûÀÎ ÀÚ¹Ù½ºÅ©¸³Æ® ¾ð¾î¸¦ ÀÌÇØÇÏ°í ´õºÒ¾î °í±Þ ³»¿ëÀ¸·Î ³ª¾Æ°£´Ù. ÀÚ¹Ù½ºÅ©¸³Æ® Ç¥Çö½Ä, ±âº» ¿¬»êÀÚ, ¹®Àå, ¹è¿À» ¼Ò°³ÇÏ°í, ´õ ³ªÀº ÀÌÇظ¦ µ½±â À§ÇØ ¿¹Á¦¸¦ Æ÷ÇÔÇÑ´Ù. 10Àå, 'ÀÚ¹Ù½ºÅ©¸³Æ® °´Ã¼ ÁöÇâ ÇÁ·Î±×·¡¹Ö'¿¡¼´Â °´Ã¼ ÁöÇâ ÇÁ·Î±×·¡¹ÖÀÇ ±âº» °³³äÀ» ¼³¸íÇÑ´Ù. »ó¼Ó(inheritance), ´ÙÇü¼º(polymorphism), Ãß»óÈ(abstraction), ĸ½¶È(encapsulation)¸¦ ´Ù·é´Ù. ±×¸®°í ¿ÀºêÁ§Æ®, Ŭ·¡½º, °ü·Ã ¸Þ¼Òµå¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀ» ¹è¿î´Ù. ´õ ³ªÀº ÀÌÇظ¦ µ½±â À§ÇØ ´Ù¾çÇÑ ¿¹Á¦¸¦ Æ÷ÇÔÇÑ´Ù. 11Àå, 'ÀÚ¹Ù½ºÅ©¸³Æ®¿Í ECMAScript 6ÀÇ È®Àå'¿¡¼´Â 2015³â¿¡ Ãâ½ÃµÈ ECMAScript 6ÀÇ ¸ðµç »õ·Î¿î ±â´ÉÀ» ´Ù·é´Ù. ¿ÀºêÁ§Æ®, ÆÐÅÏ, ¹®¹ýÀûÀÎ º¯°æ »çÇ×, ±âÁ¸ ¿ÀºêÁ§Æ®ÀÇ »õ·Î¿î ¸Þ¼Òµå µî±îÁö ¸ðµç ±â´ÉÀ» »ó¼¼È÷ ´Ù·é´Ù. 12Àå, '¼¹ö ´Ü ÀÚ¹Ù½ºÅ©¸³Æ®- NodeJS'¿¡¼´Â Ŭ¶óÀ̾ðÆ® ´ÜÀÌ ¾Æ´Ñ ¼¹ö ´Ü¿¡¼ÀÇ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÛ¼ºÇÏ´Â ¹æ¹ýÀ» ¹è¿î´Ù. Ưº°ÇÑ NodeJS ¿ÀºêÁ§Æ®¿Í Æз¯´ÙÀÓÀ» ¹è¿ì¸ç, ÀÚ¹Ù½ºÅ©¸³Æ®¿Í °ü·ÃµÈ ´Ù¸¥ ÀåÀÇ °³³äµµ ´Ù½Ã »ç¿ëÇÑ´Ù. 13Àå, 'ºÎÆ®½ºÆ®·¦- ½ºÅ¸Àϸ®½Ã CSS ÇÁ·ÐÆ®¿£µå ÇÁ·¹ÀÓ¿öÅ©'¿¡¼´Â ¹ÝÀÀÇü À¥»çÀÌÆ®¸¦ ¸¸µé±â À§ÇÑ Á÷°üÀûÀÎ ÇÁ·¹ÀÓ¿öÅ©ÀÎ ºÎÆ®½ºÆ®·¦¿¡ ´ëÇØ À̾߱âÇÑ´Ù. ºÎÆ®½ºÆ®·¦Àº ÀÚ¹Ù ½ºÅ©¸³Æ®, HTML, CSS¸¦ Æ÷ÇÔÇÑ´Ù. ºÎÆ®½ºÆ®·¦ ÇÁ·¹ÀÓ¿öÅ©¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ³»¿ëÀ» Á¦°øÇϸç, ¹ÝÀÀÇü ·¹À̾ƿô°ú À¥ÆäÀÌÁö¸¦ ¸¸µé ¼ö ÀÖ°Ô ÇØÁØ´Ù. °¢ ÅäÇÈÀº °ü·Ã ¿¹Á¦¸¦ Æ÷ÇÔÇÑ´Ù. 14Àå, 'jQuery- À¯¸íÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®'¿¡¼´Â HTMLÀÇ ´Ù¾çÇÑ ³»¿ëÀ» Áö¿øÇÏ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÎ jQuery¸¦ ÁýÁßÀûÀ¸·Î ¼³¸íÇÑ´Ù. ½Å¼ÓÇÑ °³¹ßÀ» À§ÇÑ HTML ¹®¼ÀÇ ¿ä¼Ò, ¸Þ¼Òµå, À̺¥Æ® Çڵ鸵, ¾Ö´Ï¸ÞÀ̼Ç, AJAX¿¡ ´ëÇØ ¹è¿î´Ù. 15Àå, 'AngularJS- ±¸±ÛÀÇ ¸ÂÃãÇü ÇÁ·¹ÀÓ¿öÅ©'¿¡¼´Â ¿ÜºÎ ¶óÀ̺귯¸®¸¦ ´Ù·ç´Â ³»¿ë Áß ¸¶Áö¸· ºÎºÐÀÌ´Ù. ±¸±Û¿¡ ÀÇÇØ ¼Ò°³µÈ °¡Àå À¯¸íÇÑ ÇÁ·¹ÀÓ¿öÅ©ÀÎ Angular¸¦ »ç¿ëÇØ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¶§ ÇÊ¿äÇÑ ÁÖ¿ä ÄܼÁÆ®¸¦ ¼³¸íÇÑ´Ù. - ÁöÀºÀÌÀÇ ¸» - ÀÌ Ã¥Àº À¥ °³¹ßÀÚ°¡ ¾Ë¾Æ¾ß ÇÏ´Â ¸¹Àº ³»¿ëÀ» ´Ù·é´Ù. »õ·Ó°Å³ª, ¾Ë°í Àְųª, ÀÌ¹Ì Àؾî¹ö¸° ³»¿ëµµ ´Ù·é´Ù. ÀÌ Ã¥ÀÇ Ã¹ µÎ Àå¿¡¼´Â HTMLÀÇ ±âº»ÀûÀÎ ¿ä¼Ò(element)¿Í ¼Ó¼º(attribute)À» ´Ù·é´Ù. ´ÙÀ½ ³× Àå¿¡¼´Â CSSÀÇ °³³ä°ú ¹®¹ýÀ» ´Ù·é´Ù. ±×´ÙÀ½ ´Ù¼¸ Àå¿¡¼´Â ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇØ »ìÆ캻´Ù. ¸¶Áö¸·À¸·Î´Â ¿ÜºÎ ¶óÀ̺귯¸®¸¦ ´Ù·é´Ù. ¿©±â¼´Â ºÎÆ®½ºÆ®·¦(Bootstrap), jQuery, Angular¸¦ Æ÷ÇÔÇÑ´Ù. ÀÌ Ã¥Àº ·¹ÆÛ·±½º °¡À̵åÀ̹ǷÎ, Âß Àо´Â Âü°í¼ ÇüŸ¦ ÃëÇÏÁö´Â ¾Ê¾Ò´Ù. °¢ Àå°ú °³³äÀº °³º°·Î Àбâ ÆíÇϸç, ÇÊ¿äÇÒ ¶§ °ü·Ã Á¤º¸¸¦ »¡¸® »ìÆ캼 ¼ö ÀÖµµ·Ï ±¸¼ºµÅ ÀÖ´Ù. - ¿Å±äÀÌÀÇ ¸»- ¸ð¹ÙÀÏ°ú Ŭ¶ó¿ìµåÀÇ µîÀåÀº À¥ ±â¼ú¿¡ Æø¹ßÀûÀÎ Çõ½ÅÀ» °¡Á®¿Ô´Ù. ÆÀ ¹ö³Ê½º ¸®¿¡ ÀÇÇØ ¼Ò°³µÈ ÃʱâÀÇ ¿ùµå ¿ÍÀ̵å À¥Àº ´Ü¹æÇâÀ¸·Î ´Ü¼øÈ÷ Á¤º¸¸¦ Àü´ÞÇÒ ¼ö ÀÖ¾úÁö¸¸, Ajax¿Í ½Ã¸Çƽ À¥ °°Àº ´Ù¾çÇÑ ±â¼úÀ» ÅëÇØ ÇöÀç´Â ´õ¿í ´Ù¾çÇÑ ±â´ÉÀ» ¼öÇàÇÏ°í ÀÖ´Ù. ¿ùµå ¿ÍÀ̵å À¥ ±â¼úÀÇ ÀÌ¿Í °°Àº ¹ßÀü°ú ÇÔ²² ´Ù¾çÇÑ °³¹ß ±â¼úµéÀÌ ¼Ò°³µÆÀ¸¸ç, ÃÖ±Ù °¡Àå ÇÙ½É ±â¼ú·Î ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ´Ü¿¬ µÎ°¢À» ³ªÅ¸³»°í ÀÖ´Ù. »õ·Î¿î ȯ°æ¿¡ ÀûÇÕÇÑ Á» ´õ °·ÂÇÑ ÇÁ·ÐÆ®¿£µå¿Í À¯¿¬ÇÑ ¹é¿£µå°¡ ÇÊ¿äÇØÁ³°í, À̸¦ À§ÇØ ¸¹Àº ¶óÀ̺귯¸®¿Í ÇÁ·¹ÀÓ¿öÅ©°¡ Ãâ½ÃµÆ´Ù. AngularJS³ª NodeJS¿Í °°ÀÌ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ±¸ÇöµÈ ´Ù¾çÇÑ ÇÁ·¹ÀÓ¿öÅ©´Â À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßÀڵ鿡°Ô ¸¹Àº µµ¿òÀ» ÁÖ°í ÀÖ´Ù. ÇÏÁö¸¸ ÀÌ·¯ÇÑ ÇÁ·¹ÀÓ¿öÅ©¸¦ È°¿ëÇØ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÏ·Á¸é HTMLÀ̳ª CSS °°Àº ±âº»ÀûÀÎ ±â¼ú»Ó¸¸ ¾Æ´Ï¶ó ÀÚ¹Ù½ºÅ©¸³Æ®¶ó´Â ¾ð¾î ÀÚü¸¦ ÀÌÇØÇÏ°í ÀÖ¾î¾ß ÇÑ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®´Â AjaxÀÇ µîÀåÀ¸·Î Á¶¸íÀ» ¹Þ±â ½ÃÀÛÇß´Ù. ¿ø·¡´Â Ŭ¶óÀ̾ðÆ® ´Ü°³¹ß ¾ð¾î¿´´ø ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ±â¹ÝÀ¸·Î ¼¹ö ´Ü Ç÷§ÆûÀÎ NodeJS¸¦ ÀÌ¿ëÇØ ¼¹öµµ °³¹ßÇÒ ¼ö ÀÖ°Ô µÆÀ¸¸ç, °¡Àå Àαâ ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸® Áß ÇϳªÀÎ jQuery¸¦ ÅëÇØ Ajax È£Ãâ°ú DOM Á¶ÀÛÀÌ ´õ¿í ½¬¿öÁ³´Ù. ¶ÇÇÑ MVC ÆÐÅÏÀÌ Àû¿ëµÈ ÇÁ·¹ÀÓ¿öÅ©·Î¼ SPA ±¸Ãà¿¡ °¡Àå ÃÖÀûÈµÈ AngularJS ¿ª½Ã ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ±â¹ÝÀ¸·Î ÇÑ´Ù. ÀÌ Ã¥Àº À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß ÀÔ¹®ÀÚ¿¡°Ô ÇÊ¿äÇÑ ±âº» ¿ä¼Ò¸¦ ºüÁü¾øÀÌ ¼Ò°³ÇÑ´Ù. À¥ ±â¼úÀÇ ±âº»À̶ó ÇÒ ¼ö ÀÖ´Â HTML°ú CSS¸¦ ºñ·ÔÇØ µ¿ÀûÀÎ ¿ä¼Ò¸¦ Ãß°¡Çϱâ À§ÇÑ ÀÚ¹Ù½ºÅ©¸³Æ®¿Í À̸¦ È°¿ëÇÑ ¼¹ö ÂÊ ±â¼úÀÎ NodeJS, ±×¸®°í À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß¿¡ °ü·ÃµÈ ±âº»ÀûÀÎ ±â¼úÀ» »ó¼¼È÷ ¼Ò°³ÇÑ´Ù. ºÎÆ®½ºÆ®·¦À̳ª jQuery, AngularJS¿Í °°Àº À¥ ÇÁ·¹ÀÓ¿öÅ©¸¦ È°¿ëÇØ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ´õ È¿À²ÀûÀÌ°í ¸ÚÁö°Ô ¸¸µå´Â ¹æ¹ýÀ» ¼³¸íÇÏ°í, ¸ð¹ÙÀÏ ±â±â¸¦ ÅëÇÑ À¥ Á¢¼ÓÀÌ Áõ°¡ÇÏ¸é¼ ¹ÝÀÀÇü À¥ÀÇ ÀαⰡ ±ÞÁõÇÑ Ãß¼¼¿¡ ¸ÂÃç À¥ °³¹ß¿ë ÇÁ·ÐÆ®¿£µå ÇÁ·¹ÀÓ¿öÅ©ÀÎ ºÎÆ®½ºÆ®·¦¿¡ ´ëÇؼµµ »ìÆ캻´Ù. ÀÌ Ã¥Àº À¥ °³¹ß¿¡ ÇÊ¿äÇÑ ÇÙ½É ³»¿ë»Ó ¾Æ´Ï¶ó ÃÖ±Ù °¡Àå Àαâ ÀÖ´Â ÇÁ·¹ÀÓ¿öÅ©µé¿¡ ´ëÇÑ ³»¿ëµµ ´ã°í ÀÖÀ¸¹Ç·Î À¥ °³¹ß ÀÔ¹®ÀÚ¿Í ¼÷·ÃµÈ °³¹ßÀÚ ¸ðµÎ¿¡°Ô ÈǸ¢ÇÑ °¡À̵尡 µÉ °ÍÀ̶ó ¹Ï´Â´Ù.