Ã¥¼Ò°³
¡ºÀÚ¹Ù½ºÅ©¸³Æ® UI °³¹ß°ú Jindo ÇÁ·¹ÀÓ¿öÅ©¡»´Â NHN¿¡¼ ÀÚüÀûÀ¸·Î °³¹ßÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©ÀÎ 'Jindo ÇÁ·¹ÀÓ¿öÅ©'¸¦ ÁÖÁ¦·Î ÀÚ¹Ù½ºÅ©¸³Æ® UI °³¹ßÀÇ ¿ø¸®¿Í ±¸Çö ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. Jindo ÇÁ·¹ÀÓ¿öÅ©°¡ ÁÖÁ¦ÀÌÁö¸¸ À¥ °³¹ßÀÚµéÀÌ UI °³¹ß¿¡ Ä£¼÷ÇØÁöµµ·Ï ±âº»ÀûÀÎ ¿ø¸®¿¡ ÃÊÁ¡À» ¸ÂÃç ¼³¸íÇ߱⠶§¹®¿¡ Jindo ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇÏÁö ¾Ê¾Æµµ ±¦Âú´Ù. ¿¹Á¦ÀÇ ¿ø¸®¸¦ ÀÌÇØÇÑ´Ù¸é ´Ù¸¥ ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇϰųª ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇÏÁö ¾Ê¾Æµµ ½ÇÁ¦ UI °³¹ß¿¡ ÀÀ¿ëÇÒ ¼ö ÀÖµµ·Ï Çß´Ù.
ÀúÀÚ¼Ò°³
ÀúÀÚ : ¹ÚÀ缺
ÀúÀÚ ¹ÚÀ缺Àº °Ç±¹´ëÇб³ ÄÄÇ»ÅÍ°øÇаú¸¦ Á¹¾÷ÇßÀ¸¸ç, ´Ù¾çÇÑ À¥ ÇÁ·ÎÁ§Æ®¿¡ Âü¿©Çß´Ù. SKÄ¿¹Â´ÏÄÉÀ̼ÇÁî¿¡¼ ÀÚ¹Ù °³¹ßÀÚ·Î ÀÏÇÏ´ø Áß ÇÁ·±Æ® ¿£µå °³¹ß¿¡ Èï¹Ì¸¦ ´À²¸ NHNÀ¸·Î ÀÌÁ÷Çß´Ù. NHN¿¡¼´Â Áö½ÄiN, Ä«Æä, ºí·Î±× µî ´Ù¾çÇÑ ³×À̹ö ¼ºñ½º °³¹ß¿¡ Âü¿©Çß°í, ÇöÀç´Â AjaxUIÆÀ¿¡¼ ÀÚ¹Ù½ºÅ©¸³Æ® ±â¼ú Áö¿ø/ºÐ¼®°ú ±³À° ¾÷¹« µîÀ» ´ã´çÇÏ°í ÀÖ´Ù. HTML5¸¦ ÀÌ¿ëÇÑ ½Å±â¼ú°ú ´õ ³ªÀº ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ß¿¡ °ü½ÉÀÌ ¸¹´Ù.
ÀúÀÚ : ¼Õº´´ë
ÀúÀÚ ¼Õº´´ë´Â ¼þ½Ç´ëÇб³ ¹Ìµð¾îÇкΠÁ¹¾÷°ú µ¿½Ã¿¡ AjaxUI·¦¿¡¼ ÀÎÅÏÀ¸·Î ½ÃÀÛÇØ Áö±Ý±îÁö °°Àº ·¦¿¡¼ ¿½ÉÈ÷ ÄÚµùÀ» Áñ±â°í ÀÖ´Ù. ³×À̹ö ¸ÞÀÎ, ³×À̹ö Áöµµ °³Æí ¹× °Å¸®ºä ÇÁ·ÎÁ§Æ®¿¡ Âü¿©ÇßÀ¸¸ç, ³×À̹ö ÀçÆÒ ¼ºñ½º¸¦ Áö¿øÇϱ⵵ Çß´Ù. ÇöÀç´Â ÀÚ¹Ù½ºÅ©¸³Æ®·Î ÇÒ ¼ö ÀÖ´Â ¸ðµç °Í¿¡ °ü½ÉÀÌ ÀÖÀ¸¸ç, NodeJS¿Í ÇÏÀ̺긮µå ¾Û °³¹ß¿¡ ¿Á¤À» ½ñ°í ÀÖ´Ù.
¸ñÂ÷
Part 01 ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©¿Í Jindo ÇÁ·¹ÀÓ¿öÅ©
01_ ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©¿Í UI °³¹ß
AJAX ±â¼úÀÇ µîÀå°ú UI °³¹ßÀÇ ½ÃÀÛ
À¥ ¾ÖÇø®ÄÉÀ̼ǰú UI °³¹ß
ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©
02_Jindo ÇÁ·¹ÀÓ¿öÅ©
Jindo ÇÁ·¹ÀÓ¿öÅ©ÀÇ ¿ª»ç
JindoÀÇ Æ¯Â¡
Jindo ÇÁ·¹ÀÓ¿öÅ©ÀÇ ±¸Á¶
Jindo ÇÁ·¹ÀÓ¿öÅ© »ç¿ë
Part 02 Jindo ÇÁ·¹ÀÓ¿öÅ©
03_¿ä¼Ò ¼±Åðú Á¶ÀÛ
¹®¼ °´Ã¼ ¸ðµ¨(DOM)°ú ¿ä¼Ò ¼±ÅÃ
CSS ¼±ÅÃÀÚ(Selector)¿Í ¿ä¼Ò ¼±ÅÃ
¿ä¼Ò Á¶ÀÛ
04_ ºê¶ó¿ìÀú¿Í ¹®¼ ¿µ¿ª Á¶ÀÛÇϱâ
ºê¶ó¿ìÀú â°ú ¹®¼ ¿µ¿ª
ºê¶ó¿ìÀú¿Í ¹®¼ ¿µ¿ª Á¶ÀÛ
05_À̺¥Æ®¿Í À̺¥Æ® ó¸®
À̺¥Æ®¿Í À̺¥Æ® ó¸®
JindoÀÇ À̺¥Æ® Çڵ鸵°ú ÇÔ¼ö ¹ÙÀεù
06_µ¥ÀÌÅÍ ´Ù·ç±â
µ¥ÀÌÅÍ Å¸ÀÔ°ú ·¡ÆÛ °´Ã¼
JindoÀÇ µ¥ÀÌÅÍ ·¡ÆÛ °´Ã¼
07_Æû µ¥ÀÌÅÍ °ËÁõ
À̺¥Æ®¸¦ È°¿ëÇÑ Æû µ¥ÀÌÅÍ °ËÁõ
°£´ÜÇÑ µ¥ÀÌÅÍ °ËÁõ
08_¼¹ö¿Í Åë½ÅÇϱâ
XHR °´Ã¼ ÀÌÇØÇϱâ
XHR °´Ã¼·Î Åë½ÅÇϱâ
$Ajax( ) °´Ã¼ ±âº» »ç¿ë¹ý
$Ajax( ) °´Ã¼ ½Ç½ÀÇϱâ
±× ¿ÜÀÇ $Ajax( ) °´Ã¼ »ç¿ë¹ý
09_Ŭ·¡½º¿Í ÅÛÇø´
°´Ã¼ÁöÇâÀûÀ¸·Î ¼³°èÇϱâ
ÅÛÇø´À» È°¿ëÇÑ DOM ±¸¼º
10_ ±× ¹ÛÀÇ À¯¿ëÇÑ °´Ã¼
³¯Â¥ Á¶ÀÛÇϱâ
ÄíÅ° »ç¿ëÇϱâ
ºê¶ó¿ìÀú Á¤º¸ È®ÀÎ
Part 03 ÀÚ¹Ù½ºÅ©¸³Æ® UI °³¹ß ½ÇÀü »ç·Ê
11_·¹ÀÌ¾î ´Ù·ç±â
·¹ÀÌ¾î º¸À̱â¿Í ¼û±â±â
·¹ÀÌ¾î ¹èÄ¡Çϱâ
¿µ¿ª Å©±â ±¸Çϱâ
·¹À̾î ÀÀ¿ëÇϱâ
12_µå·¡±× ¾Øµå µå·Ó
µå·¡±× ¾Øµå µå·Ó °úÁ¤
±âº» ±¸Çö
°í±Þ ±¸Çö ¹× ¹®Á¦ ÇØ°á
HTML5ÀÇ µå·¡±× ¾Øµå µå·Ó
13_ŸÀ̸Ó
±âº» »ç¿ë¹ý
ÀÀ¿ë ÆÐÅÏ ÀÍÈ÷±â
14_¾Ö´Ï¸ÞÀ̼Ç
±¸Çö¹æ¹ý
CSS ¼Ó¼ºÀ» ÀÌ¿ëÇÑ ¾Ö´Ï¸ÞÀ̼Ç
ŸÀ̸Ӹ¦ ÀÌ¿ëÇÑ ¾Ö´Ï¸ÞÀ̼Ç
15_AJAX °í±Þ ÀÀ¿ë
Å©·Î½º µµ¸ÞÀÎ ¹®Á¦
AJAX È÷½ºÅ丮
16_½Ç½Ã°£ ±Þ»ó½Â °Ë»ö¾îÀÇ ·Ñ¸µ
UI ¿ä±¸»çÇ×
·Ñ¸µ µ¿ÀÛ ±¸Çö
¸¶¿ì½º ¿À¹ö µ¿ÀÛ Ã³¸®
Àç»ç¿ë °¡´ÉÇÑ Å¬·¡½º °´Ã¼·Î ¸¸µé±â
17_ µµ¼ °ü¸® À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ±âȹ
¿ä±¸»çÇ×
ÀÎÅÍÆäÀ̽º ¸¸µé±â
¾ÖÇø®ÄÉÀÌ¼Ç ¼³°è
¸ðµ¨ ¸¸µé±â
ÄÁÆ®·Ñ·¯ ¸¸µé±â
À̺¥Æ® Àû¿ë
±â´É °³¼±
Part 04 ºÎ·Ï
ºÎ·Ï A _ÄÚµå ÃÖ¼Òȸ¦ ÅëÇÑ ¼º´É Çâ»ó
ÃÖ¼ÒÈ(Minification)ÀÇ ¿ø¸®
ÃÖ¼ÒÈ µµ±¸ - YUI Compressor
ÃÖ¼ÒÈ ÄÚµå º¹¿ø - ÄÚµå Æ÷¸ÅÆÃ
ºÎ·Ï B _µð¹ö±ë
ºê¶ó¿ìÀú °³¹ß µµ±¸
HTTP Æ®·¡ÇÈ Á¤º¸¸¦ È°¿ëÇÑ µð¹ö±ë
ºÎ·Ï C _Á¤±Ô Ç¥Çö½Ä
Á¤±Ô Ç¥Çö½Ä°ú ¹®ÀÚ¿
Á¤±Ô Ç¥Çö½Ä ¼±¾ðÇϱâ
ĸó¸µ(Capturing) »ç¿ëÇϱâ
ºñĸó¸µ(Non-Capturing) È°¿ë
test( ) ¸Þ¼µå¿Í exec( ) ¸Þ¼µåÀÇ ¼º´É Â÷ÀÌ
lastIndex ¼Ó¼º°ú gÇ÷¡±× ¿É¼Ç
ºÎ·Ï D _ÀÚ¹Ù½ºÅ©¸³Æ® ÄÚµù ÄÁº¥¼Ç
³×ÀÌ¹Ö ±ÔÄ¢
ÄÚµå ÀÛ¼º ±ÔÄ¢
AJAX ÀÀ´ä Æ÷¸Ë ÀÛ¼º ±ÔÄ¢
¼Ò½º ÄÚµå Ç¥±â¹ý