±ÍÇÏ´Â ¼Õ´Ô À̽ʴϴÙ
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ
  
  µ¨¸¶´ç °ø½Ä ÀºÇà°èÁÂ
  ÇϳªÀºÇà 227-910235-83607
  ¿¹±ÝÁÖ ÀÌ»ó±¹(¿î¿µÁø)
ÇÁ·ÎÁ§Æ® °Ô½ÃÆÇ
ÅõÇ¥°Ô½ÃÆÇ
µ¨¸¶´ç¼Ò°³
±âÃʺÎÅÍ È°¿ë±îÁö! µ¨ÆÄÀÌ ±³À° - µ¥ºê±â¾î
ÀÚÀ¯°Ô½ÃÆÇ ÀÚÀ¯°Ô½ÃÆÇ ÀÔ´Ï´Ù.
±Û³»¿ë - ÀÚÀ¯°Ô½ÃÆÇ
 µ¨ÆÄÀ̷ΠÀ¥°³¹ß ºÒ°¡´É? ÀÚ¹Ù ½ºÇÁ¸µ MVC°¡ À¯ÀÏÇÑ ´ë¾ÈÀΰ¡?
ÁÖÁ¤¼·
(ÁÖÁ¤¼·)
2016-12-13 ¿ÀÀü 9:29:44
3516ȸ Á¶È¸


÷ºÎÆÄÀÏ ´Ù¿î·Îµå
VaadinTutorial.pdf
Àû°íº¸´Ï ³Ê¹« ±â³×¿ä. ¼ºÁú±ÞÇÑ ºÐµéÀ» À§ÇØ ÇÑÁÙ ¿ä¾àÇÏÀÚ¸é "À¥¾îÇà°³¹ß¿¡ °ü½ÉÀÖ´Ù¸é VAADINÀ̶ó´Â ÇÁ·¹ÀÓ¿÷À» »ç¿ëÇغ̼¼¿ä"

ÇöÀç À¥¾îÇà°³¹ßÀº ÀÚ¹Ù°¡ °ÅÀÇ ´ë¼¼ÀΰŠ°°´Ù. Çö½ÃÁ¡¿¡¼­ À¥¾îÇà°³¹ß ºÐ¾ß¿¡¼­ µ¨ÆÄÀ̴ µµÀúÈ÷ ÀÚ¹ÙÀÇ Àû¼ö°¡ µÉ¼ö ¾ø°í ¾ÕÀ¸·Îµµ µ¨ÆÄÀÌ°¡ À¥¿¡¼­ ¾î¶² ¸é¸ð¸¦ º¸ÀÏ °¡´É¼ºÀº Àü¹«ÇÑ °Í °°´Ù. À̴ ÀÚ¹Ù °³¹ß È¯°æÀǠƯ¼ö¼º¿¡ ±âÀÎÇϴµ¥, ÀÚ¹Ù °ü·Ã ºÐ¾ß´Â °ÅÀÇ ´ëºÎºÐÀÌ ¿ÀÇ ¼Ò½º, Áï ¹«·á¶ó´Â Á¡ÀÌ´Ù. ÀÚ¹Ù ¾ð¾î ÀÚü, °³¹ß IDEÀΠÀÌŬ¸³½º, »ó´ç¼öÀÇ DB,  ¾ÆÆÄÄ¡ À¥¼­¹ö,  ¸®´ª½º ¿À¿¡½º, °Å±â´Ù »ó´ç¼öÀÇ ÀÚ¹Ù À¥ °ü·Ã ¶óÀ̺귯¸®µéÀÌ ´ëºÎºÐ ¿ÀǼҽº´Ù. ºñ¿ëÀ̶ó´Â °æÁ¦ÀûÀΠÃø¸é¿¡¼­ ÀÚ¹ÙÀÇ ÀÌ ¹«·á Á¤Ã¥Àº ¾öû³­ ¸Å·ÂÀÌ ¾Æ´Ò ¼ö ¾ø´Ù. ÀÌ ¶§¹®¿¡ ¸¹Àº ¾÷üµéÀÌ À©µµ¿ì ¾îÇÃÀÌ ¾Æ´Ñ À¥¾îÇ÷Π¹Ù²Ù´Â °ÍÀÎÁöµµ ¸ð¸£°Ú´Ù. 

±×·±µ¥ ³» »ý°¢¿¡´Â À©µµ¿ì ¾îÇðú À¥¾îÇÃÀº ±× ¼º°Ý»ó º°°³ÀÇ ¿ëµµ°¡ ÀÖ´Ù°í º¸´Âµ¥, ¿äÁò º¸¸é Áö³ªÄ¥ Á¤µµ·Î À¥¾îÇÿ¡ ¸ÅÁøÇϴ ±¹³» °³¹ß È¯°æÀº ³ª°°Àº À©µµ¿ì °³¹ßÀڵ鿡°Õ ¸Å¿ì ¾¹¾µÇÑ Çö»óÀÌ ¾Æ´Ò ¼ö ¾ø´Ù. µ¨ÆÄÀ̸¦ ÁÖÁ¾À¸·Î »ç¿ëÇϴ À©µµ¿ì °³¹ßÀڷμ­, À¥¾îÇà°³¹ß ¿äûÀÌ µé¾î¿À¸é ³ª´Â Âü ´çȲ½º·¯¿ï ¼ö ¹Û¿¡ ¾ø´Ù. ¿¹Àü¿¡ µ¨ÆÄÀ̷ΠCGI ¹æ½ÄÀ¸·Î À¥ ÇÁ·Î±×·¥À» ¸¸µé¾î º» ÀûÀÌ Àֱ⠶§¹®¿¡, À¥¾îÇÃÀ» ¸¸µé·Á¸é ¾ó¸¶³ª ¸¹Àº ³ë°¡´Ù ÄÚµùÀ» ÇؾߠÇÏ´ÂÁö Àß ¾Ë°í Àֱ⠶§¹®ÀÌ´Ù. ÀÚ¹Ù¸¦ ¾²´ø, µ¨ÆÄÀ̸¦ ¾²´ø°£¿¡ À¥¼­¹öÃøÀÇ ÄÚµùÀº º°·Î °ñ¸Ó¸® ¾ÆÇÁÁö ¾Ê´Ù. ¹°·Ð ¼¼¼ÇÀ̶ó´ø°¡ º¸¾È°°Àº ¾à°£ÀÇ À庮ÀÌ ÀÖ±ä ÇÏÁö¸¸... 

À¥¾îÇà°³¹ßÀÇ ÃÖ´ë ³­°üÀº HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¶ó´Â °Å´ëÇÑ ³ë°¡´Ù »ðÁú À庮ÀÌ´Ù. HTML ÀÚü°¡ ÇÁ·Î±×·¥ Ä£È­ÀûÀΠ¾ð¾îµµ ¾Æ´Ò »Ó´õ·¯, µ¨ÆÄÀÌ°°Àº ÄÄÆÄÀÏ·¯ ¾ð¾î¸¸ »ç¿ëÇغ» °³¹ßÀÚ¶ó¸é ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âÀÌÇÒ Á¤µµ·Î È²´çÇÑ ¹®¹ý(?)¿¡ ³î¶ó¿òÀ» ±ÝÄ¡ ¸øÇÒ °ÍÀÌ´Ù. ±×·±µ¥ À¥¿¡¼­´Â ÀÌ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ µµÀúÈ÷ ¾È¾µ ¼ö°¡ ¾ø´Ù. ¾Æ¸¶ À¥¾îÇÿ¡¼­ °¡Àå ¸¹ÀÌ »ç¿ëµÇ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®°¡ JQuery°¡ ¾Æ´Ñ°¡ ½Í´Ù. ÀÌ JQuery´Â AJAX È£ÃâÀ» ºñ±³Àû ½±°Ô ÇØÁִµ¥, Çö´ë À¥¾îÇÿ¡¼­ ¾ÆÀÛ½º È£ÃâÀº ÇʼöºÒ°¡°áÇϱ⠶§¹®ÀÌ´Ù. µ¨ÆÄÀÌ °³¹ßÀÚ¶ó¸é È­¸éÀ» 4µîºÐÇÏ¿© ¹öÆ°À» Å¬¸¯Çϸé, Æ¯Á¤ ºÎºÐ¸¸ ´Ù¸¥ ³»¿ëÀ¸·Î °»½ÅÇϴ ±â´ÉÀ» ±¸ÇöÇÏ°íÀÚ ÇÒ ¶§, °áÄÚ ¸Ó¸®¸¦ ½Î¸È ÇÊ¿ä°¡ ¾øÀ» °ÍÀÌ´Ù. ±×Á¤µµ ±â´É ±¸ÇöÀº ²­°ªÀÌÁö ¾Ê´Â°¡? 

±×·¯³ª, À¥¿¡¼­ ÀÌ·± È­¸é ÀϺΠ°»½ÅÀº, Ç÷¡½Ã, ¾×ƼºÎ¿¢¼ö°°Àº Æí¹ýÀ» »ç¿ëÇÏÁö ¾Ê´Â ÇÑ, ¿øÄ¢ÀûÀ¸·Î´Â ºÒ°¡´ÉÇÏ´Ù. À¥¿¡¼­ ÀÌ ÀϺΠȭ¸é °»½ÅÀ» °¡´ÉÇÏ°Ô Çϴ À¯ÀÏÇÑ ¹æ¹ýÀÌ AJAX È£ÃâÀ̱⠶§¹®¿¡ À̸¦ »ç¿ëÇÏÁö ¾ÊÀ» ¼ö°¡ ¾ø´Ù. ÇÏ¿©Æ° »ç¿ëÀÚ UI È­¸é ¹èÄ¡¸¦ À§Çؼ­ div Å±׳ª table Å±׸¦ Áßø(nested) µµ¹èÇÏ°í, Áß°£¿¡ ¾ÆÀÛ½º È£ÃâÀ» À§Çؼ­ ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ带 »ðÀÔÇÏ´Ùº¸¸é, JSP¸¦ ¾²´ø, PHP¸¦ ¾²´ø, ÇöÁ¸Çϴ ¾î¶² À¥½ºÅ©¸³Æ® ÅøÀ» ¾´µé, ¾öû³­ ¾çÀÇ HTML ÄÚµå¿Í ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ带 ÀÛ¼ºÇؾߠÇÑ´Ù. À¥À¸·Î °Ô½ÃÆÇÀ» ¸¸µé¾îº» °³¹ßÀÚ¶ó¸é °Ô½Ã¹° ÀÔ·Â/¼öÁ¤ Æû ÀÛ¼ºÀÌ µ¨ÆÄÀÌ Æû¿¡ ºñÇϸ頾󸶳ª ³ë°¡´Ù½º·¯¿îÁö Àß ¾Ë °ÍÀÌ´Ù. 

À¥°³¹ß ¿ª»ç´Â »ó´çÈ÷ ¿À·¡µÇ¾ú¿¡µµ ºÒ±¸ÇÏ°í, ¿Ö ¾ÆÁ÷µµ ÀÌ·± ³ë°¡´Ù ÄÚµùÀ» Çؾ߸¸ À¥¾îÇÃÀ» ¸¸µé ¼ö ÀÖ´ÂÁö Âü ÀÌÇØ°¡ µÇÁö ¾Ê´Â´Ù. ´å³Ý ASP°¡ Ã³À½ ³ª¿ÔÀ» ¶§, ³ª´Â ¾Èµ¨½º ÇìÀÌÁñ¹ö±×°¡ ¾öû³­ ÃµÀ缺À» ¹ßÈÖÇÏ¿© ½Ã¼¥ ÄÚµå·Î¸¸ ÀÛ¼ºÇϴ À¥°³¹ßÅøÀ» ¸¸µé¾îÁÙÁÙ ¾Ë¾ÒÀ¸³ª, ¸·»ó º¸´Ï, °ú°Å ASP ½ºÅ©¸³Æ® ¿£Áøº¸´Ù Á»´õ Áøº¸¸¸ µÇ¾úÀ» »Ó ¿©ÀüÈ÷ HTML ºñ½ÁÇѠű׸¦ ÀÏÀÏÈ÷ ÄÚµå·Î ÀÛ¼ºÇؾߠÇϴ °ÍÀº ¾î¿¼ö ¾ø¾ú´ø ¸ð¾çÀÌ´Ù. ´å³Ý ASP´Â ±×·¡µµ <input> <select>µîÀ» »ó´çºÎºÐ ÄÞÆ÷³ÍƮȭÇؼ­ ³ë°¡´Ù¸¦ Á¶±Ý ÁÙ¿©ÁÖ±ä ÇßÁö¸¸, ¿©ÀüÈ÷ ½Ã¼¥ Äڵ常À¸·Î À¥¾îÇà°³¹ßÀº ºÒ°¡´ÉÇß´Ù. ¾Æ¸¶ Áö±Ý ¹öÀüÀÇ ´å³Ýµµ ¸¶Âù°¡ÁöÀΰŠ°°´Ù. 

±¸±Û °³¹ßÀÚµé Áß¿¡ ³ª°°Àº »ý°¢À» °¡Áø »ç¶÷µéÀÌ GWT¶ó´Â °É ¸¸µé¾ú´Ù°í ÇÑ´Ù. ¸Å¹ø ³­ÀâÇÑ HTML ÄÚµå¿Í ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ带 ÀÛ¼ºÇϱ⠽Ⱦ, ÀڹٷΠÄÚµùÇϸé À̸¦ ÀÚ¹Ù½ºÅ©¸³Æ®¿Í HTML ÄÚµå·Î º¯È¯Çϴ ¿£ÁøÀÌ GTW¶ó°í ÇÑ´Ù. ÀÌ GWT¸¦ ÀÌ¿ëÇÏ¿© Á»´õ Àڹ٠ģȭÀûÀΠÀ¥ÇÁ·¹ÀÓ¿÷À¸·Î ¹ßÀü½ÃŲ °ÍÀÌ VAADIN À̶ó°í ÇÑ´Ù. GWT¸¦ ÀÌ¿ëÇϴ ÀÚ¹Ù À¥ ÇÁ·¹ÀÓ¿÷Àº ¸î°³ ´õ ÀÖÁö¸¸, ±¸±Û¸µÀ» Çغ¸´Ï °¡Àå ±¦ÂúÀº ³ðÀÌ ÀÌ VAADIN°°´Ù. 

À̳ðÀ» ÀÌ¿ëÇÏ¿© °£´ÜÇÑ À¥ °Ô½ÃÆÇÀ» ¸¸µé¾î ºÃ´Ù. ±×·¨´õ´Ï 600 ¶óÀΠÁ¤µµÀÇ ¼ø¼ö ÀÚ¹ÙÄÚµå·Î, ½ÉÁö¾î SQL ¹® ÇѶóÀÎÁ¶Â÷ ¾øÀÌ, À¥°Ô½ÃÆÇÀ» ¸¸µé¾ú´Ù. ¹°·Ð ´ë´ÜÇÑ ±â´ÉÀÇ À¥°Ô½ÃÆÇÀ» ¸¸µéÀÚ¸é ÈξÀ´õ ¸¹Àº Äڵ差ÀÌ ÇÊ¿äÇÏ°ÚÁö¸¸, À¥°Ô½ÃÆÇÀ» ¸¸µé¶§ °¡Àå Áß¿äÇÑ ±â´ÉÀÌ, ·Î±×ÀÎÇߴ°¡ ¾ÈÇߴ°¡¿¡ µû¶ó¼­ °Ô½Ã¹°¿¡ ´ëÇÑ Àбâ, »õ·ÎÀÛ¼º, »èÁ¦ µîÀÇ ±ÇÇÑÀ» ºÎ¿©Çϴ °ÍÀÌ´Ù(´Þ¸® ¸»ÇÏÀÚ¸é ÀÌ·± ±â´ÉÀ» ½ÇÇàÇϴ ¹öÆ°µéÀÇ Á×ÀÌ°í »ì¸®±â¸¦ Á¹¶ó º¹ÀâÇϰԠó¸®ÇؾßÇѴٴ °Í). ÀÌ·± ±â´ÉÀ» µ¨ÆÄÀ̷ΠÇѴٸ頸ſ젰£´ÜÇÏÁö¸¸, À¥¿¡¼­´Â ¾ÆÀÛ½º¸¦ ¾²°Å³ª ¾Æ´Ï¸é jsp¾È¿¡ if Å±׸¦ µµ¹èÇϰųª, ¾Æ´Ï¸é jsp¿¡ ÀÚ¹ÙÄڵ带 »ðÀÔÇϰųª µîÀÇ ¹æ¹ýÀ» »ç¿ëÇؾߠÇϴµ¥, ¾î·µç°£¿¡ À̹̠¾öû³­ ¾çÀÇ HTML ÄÚµå·Î ÃæºÐÈ÷ º¹ÀâÇÑ, JSP³ª PHP¾È¿¡ ÂüÀ¸·Î ³ÊÀúºÐÇÑ Äڵ带 ¶Ç »ðÀÔÇؾߠÇÑ´Ù. 

¹ÙµòÀ¸·Î À¥°Ô½ÃÆÇÀ» ¸¸µé¾îº¸´Ï, ¹ÙµòÀº ÀÌ ±â´É ±¸Çö°ú È­¸é ±¸¼º±îÁö ¿À·ÎÁö ¼ø¼ö ÀÚ¹ÙÄÚµå·Î¸¸, ´Ü ÇÑÁÙÀÇ HTML ÄÚµå, ´Ü ÇÑÁÙÀÇ ÀÚ¹ÙÅ©¸³Æ® Äڵ堾øÀÌ °¡´ÉÇß´Ù. °á·ÐÀÎÁï ¹ÙµòÀº ÀÚ¹ÙÀ¥¾îÇàºÐ¾ß¿¡¼­ °ÅÀÇ µ¨ÆÄÀÌ°°Àº Á¸Àç¶õ °ÍÀÌ´Ù. À©µµ ½Ã´ë°¡ Ã³À½ µµ·¡ÇßÀ» ‹š ºñÁÖ¾ó ¾¾·Î ¸¸µç Hello world »ùÇàÄڵ带 º¸°í "Çæ! ¾ÕÀ¸·Î À©µµ ÇÁ·Î±×·¥ ¸¸µé·Á¸é Àú·¸°Ô ³ë°¡´Ù½º·± ÄÚµùÀ» ÇؾߠÇϴ°¡?" °í¹Î½º·¯¿ü´Âµ¥, µ¨ÆÄÀ̶ó´Â ÅøÀ» ¸¸³ª°í º¸´Ï ±× °í¹ÎÀÌ ¸ðµÎ »ç¶óÁ³´ø, ±×·± ´À³¦À» ¹ÙµòÀ» »ç¿ëÇغ¸¸é¼­ ´À²¼´Ù.

¹ÙµòÀ¸·Î À¥¾îÇÃÀ» ¸¸µé¸é °ÅÀÇ 90ÇÁ·Î ÀÌ»óÀ» ÀÚ¹ÙÄÚµå·Î¸¸ ÀÛ¼ºÇÑ´Ù. °£È¤ 10ÇÁ·Î Á¤µµ´Â ¿©ÀüÈ÷ HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇؾߠÇÑ´Ù. ¿Ö³ÄÇϸé ÀÌ µÑÀº À¥ÀÇ ±Ù°£À̱⠶§¹®ÀÌ´Ù. ±×·¯³ª °Ô½ÃÆÇ, ÆǸŠÀç°í µîÀÇ ¾÷¹«¿ë À¥¾îÇÃÀ» ¸¸µç´Ù¸é HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀüÇô »ç¿ëÇÒ ÇÊ¿ä°¡ ¾ø´Ù. HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇؾߠÇϴ °æ¿ì´Â, ¹Ùµò¿¡¼­ Á¦°øÇÏÁö ¾Ê´Â ´Ù¸¥ ±â´ÉÀ» ±¸ÇöÇϱâ À§Çؼ­, ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¸¸µç ±â¶ËÂù ¶óÀ̺귯¸®¸¦ °¡Á®¿Í¼­ »ç¿ëÇؾßÇÒ ¶§´Ù. ¿¹¸¦ µé¸é ³×À̹ö ¸Ê API °°Àº °ÍÀÌ´Ù. À̸»ÀÎÁï ¹ÙµòÀº ±Ùº»ÀûÀ¸·Î »ó´çÈ÷ ÀÚ¹Ù½ºÅ©¸³Æ® Ä£È­ÀûÀÌÁö¸¸, ±× ³ë°¡´Ù½º·¯¿òÀ» °³¹ßÀÚ¿¡°Ô Àü°¡ÇÏÁö ¾Ê´Â´Ù´Â °ÍÀÌ´Ù. 

¸¸ÀÏ ±ÍÇÏ°¡ À¥¾îÇÃÀ» ¸¸µé°í ½ÍÀºµ¥ ¾î¶² ´ë¾ÈÀ» Ã£°í Àִٸ頹ٵòÀ» »ç¿ëÇØ º¸½Ã¶ó. Á¹¶ó ³­ÀâÇÑ ½ºÇÁ¸µ MVCº¸´Ù´Â ÈξÀ ÆíÇÏ´Ù. ½ºÇÁ¸µ mvc·Î À¥¾îÇÃÀ» ¸¸µé·Á¸é ´ë·« ´ÙÀ½°ú °°Àº Áö½ÄÀÌ ÇÊ¿äÇÏ´Ù. ÀÚ¹Ù ±âº» ¹®¹ý + ½ºÇÁ¸µ MVC ÀÌÇØ, html, ÀÚ¹Ù½ºÅ©¸³Æ®(±âº»Àû ÀÚ¹Ù½ºÅ©¸³Æ® ¾ð¾î ÀÌÇØ¿Í ´õºÒ¾î JQuery, Angular.js »ç¿ë¹ý), sitemesh È¤Àº ¾ÆÆÄÄ¡ Å¸ÀÏ°°Àº ÅÛÇø®Æ® ¿£Áø »ç¿ë¹ý, CSS¹®¹ý, JSPűנ»ç¿ë¹ý µîµî.

¹ÙµòÀº À§¿Í °°Àº ³»¿ëÀ» ÀüÇô ¸ô¶óµµ À¥¾îÇÃÀ» ¸¸µé ¼ö ÀÖ´Ù. ¹°·Ð ¿µ¿øÈ÷ ÀÚ¹Ù½ºÅ©¸³Æ®¿Í HTMLÀ» ¿Ü¸éÇÒ ¼ö´Â ¾øÁö¸¸, ÀÌ µÎ Á¸ÀçÀÇ ³ë°¡´Ù½º·¯¿òÀº È®½ÇÈ÷ ¾öû³ª°Ô ÁÙ¿©ÁØ´Ù. ¾ÈŸ±õÁö¸¸ ¹ÙµòÀ» ¾µ·Á¸é ÀÚ¹Ù ¹®¹ýÀº ¾Ë¾Æ¾ß ÇÑ´Ù. µ¨ÆÄÀ̷Π¹Ùµò À¥¾îÇàÀÛ¼ºÀº  ºÒ°¡´ÉÇÏ´Ù°í ¹Ùµò ¸Å´º¾ó¿¡ ¸í½ÃµÇ¾î Àֱ⠶§¹®ÀÌ´Ù. 

Âü°í·Î Ã·ºÎÆÄÀÏÀº ³»°¡ ¹ø¿ªÇغ» ¹Ùµò Æ©Å丮¾óÀÌ´Ù. °ü½ÉÀÖÀ¸½Å ºÐÀº Çѹø Àо½Ã¶ó.