°øÁö»çÇ×
2018.12.02 / 23:45

ÀÚ½ºÀÇ ´ë¼¼´Â ´©°¡ µÇ´Â°¡?

hanulbit
Ãßõ ¼ö 274
¡×

¾ÕÀ¸·Î °¡Àå À¯¸ÁÇÑ ÇÁ·Î±×·¡¹Ö ¾ð¾î Áß Çϳª·Î Áö¸ñµÇ´Â ¾ð¾î´Â ÀÚ½º (javascript) ÀÌ°í, ±×·¡¼­ ÆäºÏ°ú ±¸±Û, ¸¶¼Ò µîÀº ÀÌ ÀÚ½º¿¡¼­ÀÇ À§Ä¡¸¦ ¼±Á¡ÇÏ°í ¿ìÀ§¸¦ Â÷ÁöÇÏ·Á°í ºÒƼ³ª´Â ½Î¿òÀ» ¹úÀÌ°í ÀÖ½À´Ï´Ù.

¸¹Àº ºÐµéÀÌ ¹Ì·¡ÀÇ ÀÚ½º¶ó¸é react vs. ¾Ó (angular) ¾Æ´Ï³Ä? ¶ó°í »ý°¢ÇÏ½Ç ¼ö Àִµ¥, Àú´Â ±×·¸°Ô »ý°¢ÇÏÁö ¾Ê½À´Ï´Ù.

* ¡°¾ÓÀº ÇÁ·¹ÀÓ¿öÅ©°í, react Àº UI library Àε¥ ÀÌ µÑÀº ºñ±³´ë»óÀÌ ¾Æ´ÏÀݾÆ.¡± ¶ó°í ÇϽǺеµ °è½Ç µí Çѵ¥, ½ÇÁ¦ »ç¿ëµÇ´Â À¯ÇüÀ» º¸¸é ºñ±³´ë»óÀÌ ¸Â½À´Ï´Ù.

ºñ(Þª) front-end °³¹ßÀںеéÀ» À§Çؼ­ react.js ¸¦ °£·«ÇÏ°Ô ¼³¸íÇÏÀÚ¸é. (ÀÇ¿Ü·Î react ¿¡ ´ëÇÑ °£´Ü¸í·áÇÑ ¼³¸íÀÌ À¥¿¡ Á¸ÀçÇÏÁö ¾Ê´õ¶ó±¸¿ä.)

React ÀÇ Ã¶ÇÐ

structure (±¸Á¶) º¸´Ù´Â function (±â´É) ÀÌ ¿ì¼±À̾ß. ÀÚ½º (javascript) ¿Í css, ±×¸®°í html À» JSX ¶ó´Â À̸§À¸·Î °³¹äó·³ ¼¯¾î¼­ ÀÌ°É ÀÚ½º Áß½ÉÀûÀÎ ¸ðµâ·Î À¥¿¡ »Ñ·ÁÁà¾ß ÇØ.

*ÆäºÏÀÇ Ã¶ÇÐÀ̶ó±â º¸´Ù´Â React â½ÃÀÚ Jordan Walke ÀÇ ½Å³äÀ̶ó°í º¸½Ã¸é µË´Ï´Ù.


var Letter = React.createClass({
render: function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: "#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: "32",
textAlign: "center"
};
return (
<div>
{this.props.children}
</div>
);
}
});

¹®¼­°¡ html °ú css À§ÁÖÀÎ °æ¿ì, ÀÌ·± ÇüÅÂÀÇ ÀÚ½º Á᫐ ¸¶Å©¾÷Àº »ý»ê¼ºÀÌ ±Þ°ÝÇÏ°Ô ³·¾ÆÁú ¼ö ¹Û¿¡ ¾ø½À´Ï´Ù.

Angular ÀÇ Ã¶ÇÐ

ÀÚ½º (javascript) ¿Í html Àº ¸íÈ®ÇÏ°Ô ±¸ºÐÀÌ µÇ¾î¾ß ÇØ. ¹¹´Ï¹¹´Ï Çصµ architecture °¡ Áß¿äÇÑ°Å°í, ȹÀÏÈ­ µÈ ±â¹Ý¿¡¼­ ÀÏ°ýÀûÀÎ ÀÚ½º°¡ À¥¿¡ Àû¿ëµÇ¾ßÇϴ°žß. css ¿Í html, js ¸¦ ±¸ºÐÇؼ­ ÀÛ¼ºÇÏ´ø front-ender µéÀÌ Angular ¸¦ ¼±È£ÇÏ´Â °¡Àå Å« ÀÌÀ¯ Áß Çϳª ÀÔ´Ï´Ù.

ÀÌ·¸°Ô react °ú angular ÀÇ Ã¶ÇÐÀº ¼­·Î ¸Å¿ì ´Ù¸¨´Ï´Ù.

±×¸®°í ÇöÀç ÀÚ½º »ýÅ°è´Â ÀÌ·¸°Ô react °ú angular ·Î ¾çºÐÈ­ µÈµí º¸ÀÔ´Ï´Ù.

ÆäºÏ Á¦±¹ (React) vs. ±¸±Û + ¸¶¼Ò ¿¬ÇÕ (Angular)

ÀÌ·±½ÄÀ¸·Î.

±×·±µ¥ ¾î¶² ¾ð¾î³ª framework °¡ ²À ´ë±â¾÷¿¡¼­ ¹Ð¾î´í´Ù°í ¼º°øÇÏ´Â °Ç ¾Æ´Õ´Ï´Ù.

¸¶¼Ò°¡ ¼¼»óÀ» Áö¹èÇÏ´ø ½ÃÀý¿¡ ¸¶¼Ò°¡ ¹Ð´ø asp (¿¡ÀÌ18) ÀÌ Áö±Ý ¾î¶»°Ô µÇ¾úÁÒ?

ÀÌ·¡¼­ Vue.js ¿¡ ÁÖ¸ñÇÒ ÇÊ¿ä°¡ ÀÖ½À´Ï´Ù.

Vue.js

Vue.js ´Â ±¸±Û¿¡ ÀÖ´ø Evan You °¡ Angular ÀÇ Ã¶ÇÐÀ» µû¸£Áö¸¸, Angular ÀÇ ´ÜÁ¡À» º¸¾ÈÇÏ°í react.js ÀÇ ÀåÁ¡À» ´ä½ÀÇØ °³¹ßÇÑ ÀÚ½º ÇÁ·¹ÀÓ¿öÅ© ÀÔ´Ï´Ù. (Evan You °¡ ´ë¸¸°èÀÎÁö, º»Åä°è Áß±¹ÀÎÀÎÁö´Â Àß ¸ð¸£°ÚÁö¸¸, Áß±¹¾î·Î ±Ûµµ ¾²°í ±×·¯´õ¶ó±¸¿ä.)

minimalism, ³·Àº ÇнÀÄ¿ºê, angular °¡ ÁÖÁö ¾Ê´Â ÀÚÀ¯µµ °¡ Vue.js ÀÇ Æ¯Â¡ ÀÔ´Ï´Ù.

°³ÀÎÀûÀ¸·Î vue.js °¡ ¼º°øÇÑ´Ù°í º¸´Â ÀÌÀ¯°¡.

1. Á¤È®ÇÏ°í »ó¼¼ÇÑ documentation (¿öµåÇÁ·¹½º¿Í jQuery ÀÇ Æ¯Â¡À̱⵵ ÇÏÁÒ.)

2. ³·Àº ÇнÀÄ¿ºê (¹è¿ì°í ½ÍÀº ¸¸Å­¸¸, ³»¼öÁØ¿¡ ¸Â´Â Á¤µµ±îÁö¸¸ ¹è¿ö¼­ È°¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.)

3. °³¹ßÀÇ ¾Æ½¬¿î Á¡À» ÄÛÄÛ Âó¾îÁÖ´Â ÇØ°á¾È

4. ¸¶Áö¸·À¸·Î React À̳ª Angular ¿¡ ºñÇØ ¹«½Ã¹«½ÃÇÏ°Ô ºü¸¥ ¼Óµµ

µîÀ» µé ¼ö ÀÖ½À´Ï´Ù.

Á»´õ »ó¼¼ÇÑ ³»¿ëÀº ÀÌ ±ÛÀ» ÂüÁ¶ÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.

Top 7 reasons to try Vue.js in 2016

ÇöÀç ´©°¡ Vue.js ¸¦ »ç¿ëÇϴ°¡?

GitLab (Github ¿¡ À§ÇùÀûÀÎ °æÀï»ó´ë·Î ¶°¿À¸¥, ¿äÁò ¸Å¿ì hot ÇÑ È¸»ç ÀÔ´Ï´Ù.)
Alibaba
Baidu
Sina Weibo
Xiaomi
¶ó¶óº§

¶ó¶óº§ÀÇ °æ¿ì ¶ó¶óº§¿¡ vue.js °¡ ¹øµéµÇ¾î ³ª¿É´Ï´Ù. (¶ó¶óº§Àº ÇöÀç php ¸¦ ´ëÇ¥ÇÏ´Â ÇÁ·¹ÀÓ¿öÅ© ÀÔ´Ï´Ù. Symfony ´Â ¿äÁò ¾î¶² »óȲÀÎÁö, ¸¹ÀÌ Á×¾ú´õ¶ó±¸¿ä.)

Á¦°¡ À̱ÛÀ» À۳⠰¡À»¿¡ ½á³õ°í °ø°³ÇÏÁö ¾Ê¾Ò´ø ÀÌÀ¯´Â, Vue.js ¿¡ ´ëÇÑ È®½ÅÀÌ ¾ø¾ú±â ¶§¹®ÀÔ´Ï´Ù. ^^;;;

±×·±µ¥ ÃÖ±Ù front-end °³¹ßÀÚµéÀ» »ó´ë·Î ÇÑ ¼³¹®Á¶»ç¸¦ Çϳª Á¢ÇÏ°Ô µÇ¾ú½À´Ï´Ù. õ¿©¸í Á¤µµ ¹Û¿¡ µÇÁö¾Ê´Â front-ender µéÀ» »ó´ë·Î ÇÑ ¼³¹®Á¶»ç¶ó Á¤È®µµ°¡ Á¶±Ý ¶³¾îÁú ¼ö ÀÖÁö¸¸, ´ëüÀûÀ¸·Î ÇöÀç javascript Á¦Ç°µé¿¡ ´ëÇÑ »ç¿ëµµ¸¦ Á¤È®ÇÏ°Ô º¸¿©ÁÖ°í ÀÖ´Ù°í »ý°¢ÇÕ´Ï´Ù.

ÇöÀç °¡Àå ¸¹ÀÌ »ç¿ëµÇ°í ÀÖ´Â Á¦Ç°Àº jQuery ÀÔ´Ï´Ù. ¹«·Á 70%¿¡ °¡±î¿î Á¡À¯À².
ÈĹßÁÖÀÚÀÓ¿¡µµ ÆäºÏÀÇ Àû±ØÀûÀÎ ¸¶ÄÉÆÿ¡ ÈûÀÔÀº React ÀÌ 37% Á¤µµ µÇ´Â Á¡À¯À²À» º¸¿©ÁÖ°í, ¾Ó2·Î °³ÆÇÀÌ µÇ¹ö¸° Angular °¡ ¾Ó1 °ú ¾Ó2 ÇÕÃļ­ React °ú ºñ½ÁÇÑ ¼öÁØÀÇ Á¡À¯À²¸¦ À¯ÁöÇÏ°í ÀÖ½À´Ï´Ù.

±×·±µ¥ ¿©±â¼­ ÁÖ¸ñÇؾßÇÒ Åë°è´Â ¹Ù·Î Vue.js ÀÇ 10% ¿¡ ±ÙÁ¢ÇÏ´Â Á¡À¯À² ÀÔ´Ï´Ù. ÀÛ³â ÃʱîÁöµµ Vue.js ¿¡ °üÇØ µé¾îº» °³¹ßÀÚµµ ¸î¸í ¾ø¾úÀ» Á¤µµ·Î Vue.js ´Â ¾Æ¹«·± ¸¶ÄÉÆõµ ¾øÀÌ ¼ø¼öÈ÷ word of mouth, °³¹ßÀÚµé »çÀÌ¿¡ ÀÔ¿¡¼­ ÀÔÀ¸·Î ÀüÇØÁ®¼­ À̸¸Å­ ¼ºÀå ÇÑ °Í ÀÔ´Ï´Ù. ´ë´ëÀûÀÎ ¸¶ÄÉÆÃÀ» ¹úÀÎ Angular 2 º¸´Ùµµ ´õ Á¡À¯À²ÀÌ ³ô½À´Ï´Ù.

ÀÌ·¡¼­ Vue.js ´Â ¾ÕÀ¸·Î jQuery ¸¸Å­ ´ëÁßÀûÀÎ ¼Ö·ç¼ÇÀÌ µÉ°Å¶ó´Â ¾ê±âµµ ³ª¿É´Ï´Ù.


¹ø¿Ü

Riot.js ´Â web components (À¥ÄÄÆ÷³ÙÆ®)¸¦ ½±°Ô »ç¿ëÇÒ ¼ö ÀÖ°Ô ÇØÁÖ´Â UI ¶óÀ̺귯¸® ÀÔ´Ï´Ù. (abstraction À̶ó°í ÇÒ ¼ö µµ ÀÖ½À´Ï´Ù. À¥ÄÄÆ÷³ÙÆ®¸¦ À§ÇÑ jQuery °°Àº°Å´Ù ¶ó°í ÀÌÇØÇÏ½Ã¸é µË´Ï´Ù.)

React.js ¸¦ º¸°í, ¡®¾Æ¡¦ ÀÌ°Ç °³¹ä°°Àݾơ¯ ¶ó°í ´À³¤ »ç¶÷µéÀÌ ¸¸µç Á¦Ç°ÀÌ°í, ÀϺ»ÀÇ À¯¸íÇÑ ÀÚ½º °³¹ßÀÚ/ ¿ÀǼҽº Çùȸ ȸÀå/ »ç¾÷°¡ÀÎ Tsutomu Kawamura °¡ ÁÖµµÇÏ°í ÀÖ½À´Ï´Ù.

´ç±Ù ÀϺ»¿¡¼­ °¡Àå È°¹ßÇÑ °³¹ßÀÌ ÀÌ·ïÁö°í ÀÖ½À´Ï´Ù. ƯÈ÷ ¿öµåÇÁ·¹½º¿Í ¿¬µ¿±¸ÃàÀÌ ÀϺ»¿¡¼­ ¸¹ÀÌ ÀÌ·ïÁ³´Âµ¥, Riot.js ´Â ±â¼ú·ÂÀÌ ¸¹ÀÌ µþ¸®´Â °æÇâÀ» º¸¿©¼­, ¾ÕÀ¸·Î ¾î¶»°Ô µÉÁö´Â Àß ¸ð¸£°Ú½À´Ï´Ù.

Back-end ¿¡¼­ÀÇ ÀÚ½º´Â?

°³ÀÎÀûÀ¸·Î Á¶±Ý ºñ°üÀû ÀÔ´Ï´Ù. node.js ȯ°æ¿¡¼­ÀÇ ÀÚ½º´Â concurrency, ºü¸¥ ¼Óµµ, microservices µî¿¡¼­ °­Á¡/¸Þ¸®Æ®°¡ ÀÖ´Ù°í ¼±ÀüÇؿԴµ¥, ÀÌ node.js ÀÇ °­Á¡À¸·Î ¿©°ÜÁö´ø ºÐ¾ß¿¡¼­ ¿äÁò Go (golang) ¿¡°Ô ¿µÈ¥±îÁö ŻŻ Åи®°í ÀÖ´Â »óȲÀ̶ó¡¦.

¶Ç ÇнÀÄ¿ºêµµ ¹«½ÃÇÒ ¼ö ¾ø´Âµ¥, Go ´Â server-side ÀÚ½º º¸´Ù ¹è¿ì±â°¡ ´õ ½±½À´Ï´Ù. ÀÏ´Ü ÀÚ½º´Â callback hell ¾î¿?¡¦ ÀÚ½º´Â ÆÄ°í µé¾î °¥¼ö·Ï, ¡°Javascript is easy to learn, impossible to master.¡± ¶ó´Â °Ý¾ðÀ» ½Ç°¨ÇÏ°Ô µË´Ï´Ù. ¤Ð¤Ð¤Ð¤Ð

node.js ÀÇ Å»ýÀûÀÎ ÇÑ°è¿¡ ´ëÇØ ³Ê¹«³ªµµ Àß ¼³¸íÇÏ°í ÀÖ´Â ÀÌ ±ÛÀº node.js °³¹ßÀ» °í·ÁÇÏ´Â ºÐÀ̽öó¸é ²À Çѹø Àо½Ã±æ ¹Ù¶ø´Ï´Ù.

https://medium.com/@theflapjack103/the-way-of-the-gopher-6693db15ae1f#.bko7cbks4

¸¶Áö¸·À¸·Î Go, ÆÄÀ̽ã, Ruby (RoR), php¡¦ ÀÌ ¸ðµç ¾ð¾îµéÀº MySql/MariaDB ¿Í ÀÚ¿¬½º·´°Ô ¿¬µ¿ÀÌ µÇ°í ¿¬µ¿ÀÌ ½±½À´Ï´Ù. ¹Ý¸é ÀÚ½ºÀÇ °æ¿ì Çö½ÇÀûÀ¸·Î MongoDB ½á¾ß ÇÕ´Ï´Ù. ¹°·Ð MySql °°Àº relational DB °¡ MongoDB º¸´Ù ´õ ¿ì¿ùÇÏ´Ù, Àý´ë ±×·± ¾ê±â´Â ¾Æ´Õ´Ï´Ù. ÇÏÁö¸¸ ´ëÁßÀûÀÌ°í »ç¿ë±â¹ÝÀÌ ³Ð¾î ±âÁ¸ ready-made/off the shelf ¼Ö·ç¼ÇÀÌ Á¸ÀçÇÑ´Ù´Â °ÍÀº Å« ÀÕÁ¡ ÀÔ´Ï´Ù.

ÀÌ·± ¿©·¯°¡Áö ÀÌÀ¯·Î Àú´Â server-side ÂÊ¿¡¼­ÀÇ ÀÚ½º ¹Ì·¡´Â ±×¸® ¹àÁö ¾Ê´Ù°í »ý°¢ÇÏ´Â °Í ÀÔ´Ï´Ù. Felix Geisendörfer, TJ (TJ Holowaychuk) µî node.js Ä·ÇÁ¿¡¼­ ÇٽɿªÈ°À» ÇÏ´ø ¶È¶ÈÇÑ °³¹ßÀÚ/±â¿©ÀÚµéÀÌ ´ë°Å golang À¸·Î ÀÌÀüÇØ °£ °Í¸¸ ºÁµµ node.js environment ÀÇ ¹Ì·¡°¡ ¹à¾Æ º¸ÀÌÁö¸¸Àº ¾Ê½À´Ï´Ù.

Tags: , , , ,

Ä«Å×°í¸®: , ,