±¹³»µµ¼
Àü°øµµ¼/´ëÇб³Àç
°øÇаè¿
ÄÄÇ»ÅÍ°øÇÐ
2013³â 9¿ù 9ÀÏ ÀÌÈÄ ´©Àû¼öÄ¡ÀÔ´Ï´Ù.
Á¤°¡ |
30,000¿ø |
---|
27,000¿ø (10%ÇÒÀÎ)
1,500P (5%Àû¸³)
ÇÒÀÎÇýÅÃ | |
---|---|
Àû¸³ÇýÅà |
|
|
|
Ãß°¡ÇýÅÃ |
|
À̺¥Æ®/±âȹÀü
¿¬°üµµ¼(207)
»óÇ°±Ç
ÀÌ»óÇ°ÀÇ ºÐ·ù
Ã¥¼Ò°³
D3.js´Â HTML5 ±â¹Ý µ¥ÀÌÅÍ ½Ã°¢È ¶óÀ̺귯¸®ÀÇ ´ë¸í»ç¶ó°í Çصµ ÁÁÀ» ¸¸Å ÈǸ¢ÇÑ ½Ã°¢È µµ±¸´Ù. ÀÌ Ã¥ [D3.js ½Ç½Ã°£ µ¥ÀÌÅÍ ½Ã°¢È]´Â D3.jsÀÇ ±âº» ³»¿ë°ú ¹éº»(BackBone) °°Àº MVC ÇÁ·¹ÀÓ¿öÅ©, Socket.io °°Àº ½Ç½Ã°£ µ¿±âÈ ³×Æ®¿öÅ© ¶óÀ̺귯¸®¿Í ÇÔ²² Node.js»ó¿¡¼ ½Ç½Ã°£ µ¥ÀÌÅÍ ½Ã°¢È¸¦ ¸¸µé¾î°¡´Â °úÁ¤À» ´ã°í ÀÖ´Ù. ÇÁ·ÐÆ®¿£µå °³¹ßÀÇ ÇÑ ÃàÀ¸·Î¼ ½ÇÀü µ¥ÀÌÅÍ ½Ã°¢È¸¦ Á¢Çغ¸°í ½ÍÀº ºÐ¿¡°Ô´Â À¯¿ëÇÑ Á¤º¸¸¦ Á¦°øÇÒ °ÍÀÌ´Ù.
ÃâÆÇ»ç ¼Æò
¡Ú ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë ¡Ú
¡á ´Ù¸¥ ÇÁ·ÎÁ§Æ®¿¡¼µµ »ç¿ëÇÒ ¼ö ÀÖ´Â Àç»ç¿ë °¡´ÉÇÑ Â÷Æ® ÀÛ¼º
¡á Æú¸®ÇÊ(polyfill)À» »ç¿ëÇؼ SVG°¡ Áö¿øµÇÁö ¾Ê´Â ºê¶ó¿ìÀú¿¡¼µµ ÀÛµ¿ÇÏ´Â Â÷Æ® ÀÛ¼º
¡á D3¿Í ¹éº»(Backbone)À» »ç¿ëÇÑ ´ëÈÇü ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç ÀÛ¼º
¡á D3 ±â¹Ý Â÷Æ® ÆÐÅ°Áö ÀÛ¼º, Å×½ºÆ®, ¹èÆ÷
¡á ÀÚü Á¦ÀÛ Áöµµ ÀÛ¼º ¹× Áöµµ ¶óÀ̺귯¸®¿Í D3ÀÇ ÅëÇÕ
¡á ³ëµå(Node)¿Í D3¸¦ È°¿ëÇÑ ½Ç½Ã°£ ¾ÖÇø®ÄÉÀÌ¼Ç ÀÛ¼º
¡Ú ÀÌ Ã¥ÀÇ ´ë»ó µ¶ÀÚ ¡Ú
º¹ÀâÇÑ µ¥ÀÌÅÍ ½Ã°¢È¸¦ ¸¸µé ¼ö ÀÖ´Â ¹æ¹ýÀ» ¹è¿ì°í ½ÍÀº ¼ÒÇÁÆ®¿þ¾î °³¹ßÀÚ¶ó¸é ÀÌ Ã¥Àº Çʼö ¾ÆÀÌÅÛÀÌ´Ù. D3¿¡ ´ëÇÑ ±âÃÊ Áö½ÄÀÌ ÀÖ´Â µ¶ÀÚ¿¡°Ô ÀûÇÕÇϸç, ½ÇÁ¦ ÇöÀå¿¡¼ »ç¿ëµÇ´Â ¿¹Á¦¸¦ Áß½ÉÀ¸·Î µ¥ÀÌÅÍ ½Ã°¢È ¾ÖÇø®ÄÉÀ̼ÇÀÇ ±¸Á¶¸¦ ¼³°èÇÏ°í ¿£ÅÍÇÁ¶óÀÌÁî ¼öÁØÀÇ Â÷Æ®¿Í ÀÎÅÍ·¢Æ¼ºê ´ë½Ãº¸µå¸¦ ¸¸µé°í ½Í¾î ÇÏ´Â »ç¶÷¿¡°Ô ´õ¾øÀÌ ÁÁÀº ¼±¹°ÀÌ µÉ °ÍÀÌ´Ù.
¡Ú ÀÌ Ã¥ÀÇ ±¸¼º ¡Ú
1Àå, ¡®µ¥ÀÌÅÍ ½Ã°¢È¡¯¿¡¼´Â µ¥ÀÌÅÍ ½Ã°¢È¿¡ ´õ Ä£¼÷ÇØÁú ¼ö ÀÖµµ·Ï Èï¹Ì·Î¿î ½Ã°¢È ÇÁ·ÎÁ§Æ®³ª ·¹ÆÛ·±½º ¿¹Á¦¸¦ º¸¿©ÁØ´Ù. ¿ª»ç ¼Ó¿¡¼ÀÇ ½Ã°¢È ¿¹Á¦¸¦ »ìÆ캸°í ¾î¶² Á¡ÀÌ D3¸¦ µ¥ÀÌÅÍ ½Ã°¢È¿¡ ¾ÆÁÖ ÀûÇÕÇÑ µµ±¸·Î ¸¸µå´ÂÁö ¾Ë¾Æº»´Ù.
2Àå, ¡®Àç»ç¿ë °¡´ÉÇÑ Â÷Æ®¡¯¿¡¼´Â ´Ù¼öÀÇ ÇÁ·ÎÁ§Æ®¿¡¼ »ç¿ëµÉ ¼ö ÀÖ´Â ¼³Á¤Çü Â÷Æ®(configurable chart)¸¦ ¸¸µå´Â ¹ýÀ» ¾Ë¾Æº»´Ù. ÀÌ Àå¿¡¼´Â À¥ ÆäÀÌÁö ³»ÀÇ ¿ä¼ÒµéÀ» ´Ù·ç±â À§ÇØ ¼¿·º¼Ç(selection)À» ¾²´Â ¹æ¹ý°ú Àç»ç¿ë °¡´ÉÇÑ ¹ÙÄÚµå Â÷Æ®¸¦ ¸¸µå´Â ¹ýÀ» ¿ÏÀüÈ÷ óÀ½ºÎÅÍ ÀÍÇôº¸°í, Ä¿½ºÅÒ ·¹À̾ƿô ¾Ë°í¸®ÁòÀ» ¸¸µé¾î¼ ¹æ»çÇü ¸·´ë Â÷Æ®¿¡ Àû¿ëÇØ º¼ °ÍÀÌ´Ù.
3Àå, ¡®SVG ¾øÀÌ ½Ã°¢È Á¦ÀÛ¡¯¿¡¼´Â ÇöÀç ºê¶ó¿ìÀú ½ÃÀå¿¡¼ÀÇ SVG Áö¿ø »óÅ¿¡ ´ëÇØ Åä·ÐÇغ¸°í SVG¸¦ Áö¿øÇÏÁö ¾Ê´Â ºê¶ó¿ìÀú¿¡¼ ½Ã°¢È¸¦ ¸¸µå´Â Àü·«À» ¾Ë¾Æº»´Ù. div ¿ä¼Ò¸¦ ½á¼ ¿òÁ÷ÀÌ´Â ¹öºí Â÷Æ®¸¦ ¸¸µé°í, ºê¶ó¿ìÀúÀÇ SVG Áö¿ø ¿©ºÎ¸¦ ¾Ë¾Æ³»´Â ¹æ¹ýÀ» ¹è¿ì°í, HTML5ÀÇ canvas ¿ä¼Ò¸¦ »ç¿ëÇؼ SVG µµÇüÀ» ·»´õ¸µÇÏ´Â Æú¸®ÇÊ(polyfill)À» Àû¿ëÇØ º¼ °ÍÀÌ´Ù. D3¿Í canvas¸¦ ÇÔ²² »ç¿ëÇؼ ½Ã°¢È¸¦ ¸¸µå´Â ¹æ¹ýµµ ¾Ë¾Æº¼ °ÍÀÌ´Ù.
4Àå, ¡®D3·Î »ö»ó ¼±Åñâ Á¦ÀÛ¡¯¿¡¼´Â »ç¿ëÀÚ »óÈ£ÀÛ¿ëÀ» À§ÇÑ ¿ä¼Ò¿Í ÄÁÆ®·ÑÀ» ¸¸µå´Â µ¥ ÇÊ¿äÇÑ °³³äµéÀ» ¾Ë¾Æº»´Ù. 4Àå¿¡¼´Â ½½¶óÀÌ´õ ÄÁÆ®·ÑÀ» ¸¸µé±â À§ÇØ D3ÀÇ µå·¡±× µ¿ÀÛ°ú Àç»ç¿ë °¡´ÉÇÑ Â÷Æ® ÆÐÅÏÀ» »ç¿ëÇÑ´Ù. ½½¶óÀÌ´õ ÄÁÆ®·ÑÀ» ÀÌ¿ëÇؼ CIE Lab Ä÷¯ ¸ðµ¨ ±â¹ÝÀÇ Àç»ç¿ë °¡´ÉÇÑ »ö»ó ¼±Åñâ(color picker)¸¦ ¸¸µç´Ù.
5Àå, ¡®»ç¿ëÀÚ ÀÎÅÍÆäÀ̽º Á¦ÀÛ¡¯¿¡¼´Â Â÷Æ®¿¡¼ ƯÁ¤ ¿ä¼Ò¸¦ °Á¶Çϱâ À§ÇØ À̺¥Æ® ¸®½º³Ê¸¦ »ç¿ëÇÏ´Â ¹ýÀ» ¾Ë¾Æº»´Ù. ÅøÆÁÀ» ¸¸µå´Â ¹æ¹ýÀ» »ìÆ캸°í, ¾Õ Àå¿¡¼ ¸¸µç Â÷Æ®¿¡ ÅøÆÁÀ» Àû¿ëÇÏ´Â ¹æ¹ýÀ» ¹è¿öº»´Ù. ¿µ¿ª Â÷Æ®¸¦ ¸¸µé¾î¼ brush µ¿ÀÛÀ» ÅëÇØ Â÷Æ®ÀÇ ÀϺΠ¿µ¿ªÀ» ¼±ÅÃÇÏ´Â ¹æ¹ýÀ» ÀÍÈù´Ù.
6Àå, ¡®Â÷Æ®³¢¸®ÀÇ »óÈ£ Àۿ롯¿¡¼´Â ¹éº»(Backbone)À» ½á¼ µ¥ÀÌÅÍ¿Í ½Ã°¢È¸¦ ºÐ¸®ÇÏ¿© ±¸Á¶ÈµÈ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé¾îº¸°í, D3¸¦ À¶ÇÕÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù. ¾ÖÇø®ÄÉÀÌ¼Ç »óÅÂÀÇ ÀÏ°ü¼ºÀ» À¯ÁöÇÒ ¼ö ÀÖµµ·Ï ¸ðµ¨°ú ºä, Ä÷º¼Ç°ú ¶ó¿ìÅ͸¦ ±¸ÇöÇÏ´Â ¹æ¹ýÀ» ¹è¿î´Ù. 6Àå¿¡¼ ¹è¿î ³»¿ëÀ» 5Àå¿¡¼ ±¸ÇöÇÑ ¿µ¿ª Â÷Æ®¿¡ Àû¿ëÇؼ ½Ã°è¿ ÁÖ°¡(stock price)¸¦ º¼ ¼ö ÀÖ´Â ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé¾î º»´Ù.
7Àå, ¡®Â÷Æ® ÆÐÅ°Áö Á¦ÀÛ¡¯¿¡¼´Â D3¸¦ ÀÌ¿ëÇÑ Â÷Æ® ÆÐÅ°Áö¸¦ ¸¸µå´Â °³¹ß ÀÛ¾÷È帧À» ¼Ò°³ÇÑ´Ù. ÆÐÅ°Áö¸¦ ±¸ÇöÇÏ°í, Á¶Á÷ÈÇÏ°í ¹èÆ÷ÇÏ´Â µ¥ °¡Àå ÀûÇÕÇÑ µµ±¸¿Í ¸ð¹ü »ç·Ê¸¦ ¼Ò°³ÇÑ´Ù. ¸¸µé¾î ³½ Â÷Æ® ÆÐÅ°Áö¸¦ ¿ÜºÎ ¶óÀ̺귯¸®Ã³·³ »ç¿ëÇÏ´Â »ùÇà ÇÁ·ÎÁ§Æ®¸¦ ¸¸µé¾î º¼ °ÍÀÌ´Ù.
8Àå, ¡®µ¥ÀÌÅÍ ±â¹Ý ¾ÖÇø®ÄÉÀ̼ǡ¯¿¡¼´Â À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ¿¹Á¦¸¦ ÅëÇØ ½Ã°¢È ÇÁ·ÎÁ§Æ®¸¦ ¹èÄ¡(deploy)ÇÒ ¼ö ÀÖ´Â µµ±¸¸¦ ¼Ò°³ÇÑ´Ù. ¼¼°èÀºÇàÀÇ µ¥ÀÌÅÍ API¸¦ ÀÌ¿ëÇؼ Àΰ£ °³¹ß Áö¼ö(indicators of human development)ÀÇ ÃßÀ̸¦ º¼ ¼ö ÀÖ´Â ½Ã°¢È ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé¾î º»´Ù. ½Ã°¢È ÇÁ·ÎÁ§Æ® È£½ºÆÃÀ» À§ÇØ ±êÇãºê(GitHub) ÆäÀÌÁö¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº¸°í, Á¤ÀûÀÎ À¥ »çÀÌÆ®(static website)¸¦ È£½ºÆÃÇϱâ À§ÇØ ¾Æ¸¶Á¸ S3¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀ» »ìÆ캻´Ù.
9Àå, ¡®´ë½Ãº¸µå Á¦ÀÛ¡¯¿¡¼´Â ´ë½Ãº¸µå¸¦ ¸¸µé±â À§ÇÑ °³³ä°ú ¸ð¹ü »ç·Ê¸¦ ¼Ò°³ÇÑ´Ù. D3¿Í Ä¿½ºÅÒ Â÷Æ®¸¦ ½á¼ ÇÐ±Þ ³» ÇлýµéÀÇ ¼ºÀûÀ» ¸ð´ÏÅ͸µÇÒ ¼ö ÀÖ´Â ´ë½Ãº¸µå¸¦ Á÷Á¢ ¸¸µé¾î º»´Ù.
10Àå, ¡®Áöµµ Á¦ÀÛ¡¯¿¡¼´Â D3ÀÇ Áö¸®(geographic) ÇÔ¼ö¸¦ ÀÌ¿ëÇؼ º¤ÅÍ Áöµµ¸¦ ¸¸µå´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù. Áö¸® µ¥ÀÌÅ͸¦ ȹµæÇÏ´Â ¹æ¹ý°ú Áö¸® µ¥ÀÌÅ͸¦ D3¿¡¼ »ç¿ëÇϱâ Æí¸®ÇÑ GeoJSON°ú TopoJSON Çü½ÄÀ¸·Î º¯È¯ÇÏ´Â ¹æ¹ýÀ» ¹è¿î´Ù. D3¸¦ »ç¿ëÇؼ µîÄ¡ Áö¿ªµµ(choropleth map)¸¦ ¸¸µé°í TopoJSON ¶óÀ̺귯¸®¸¦ ½á¼ ±¹°¡ °£ ÀÎÁ¢°ú °æ°è¸¦ ½Ã°¢ÈÇÒ °ÍÀÌ´Ù. Mapbox¿Í ÇÔ²² Ä¿½ºÅÒ D3 ·¹À̾ ¸¸µå´Â ¹æ¹ýµµ ¾Ë¾Æº»´Ù.
11Àå, ¡®°í±Þ Áöµµ Á¦ÀÛ¡¯¿¡¼´Â ¸î °¡Áö Áö¸®ÇÐÀû Åõ¿µ¹ý(geographic projections)À» ¼Ò°³ÇÏ°í Áöµµ¸¦ ƯÁ¤ À§Ä¡¿¡ Á߽ɰú ÃàôÀ» ¸ÂÃßµµ·Ï Åõ¿µ¹ýÀ» ¼³Á¤ÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù. ȸÀüÇÏ´Â Áö±¸¸¦ Ç¥ÇöÇϱâ À§ÇØ Á¤»ç¿µ¹ýOrthographic projectionÀ» Àû¿ëÇغ¸°í, Àüü ȸéÀÇ º°ÀÚ¸®µµ(star map)¸¦ ¸¸µé±â À§ÇØ Ç×¼º ¸ñ·Ï(star catalog)°ú Æò»çµµ¹ý(Stereographic projection)À» »ç¿ëÇÑ´Ù. Á¤»ç¿µ¹ýÀ» ½á¼ Áö±¸¸¦ ·¡½ºÅÍ(raster) À̹ÌÁö·Î canvas¿¡ Åõ¿µÇÏ´Â ¹æ¹ýµµ ¾Ë¾Æº»´Ù.
12Àå, ¡®½Ç½Ã°£ ¾ÖÇø®ÄÉÀÌ¼Ç Á¦ÀÛ¡¯¿¡¼´Â ½Ç½Ã°£ ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé±â À§ÇØ ÇÊ¿äÇÑ °³³ä°ú µµ±¸¸¦ ¼Ò°³ÇÑ´Ù. ¾ÖÇø®ÄÉÀ̼ÇÀÇ »óŸ¦ ½Ç½Ã°£À¸·Î ¾÷µ¥ÀÌÆ®Çϱâ À§ÇØ Firebase¸¦ ¾²´Â ¹ýÀ» ¹è¿î´Ù. ³¡À¸·Î Node, Socket.IO, D3¸¦ ÇÔ²² »ç¿ëÇؼ »ç¿ëÀÚ°¡ Á¤ÀÇÇÑ ÁÖÁ¦¿¡ ¸Â´Â Áö¿Àű×(geotag) Æ®ÀÀÇ Áö¸® ºÐÆ÷¸¦ º¼ ¼ö ÀÖ´Â ½Ç½Ã°£ ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé¾î º»´Ù.
¸ñÂ÷
1 µ¥ÀÌÅÍ ½Ã°¢È
__µ¥ÀÌÅÍ ½Ã°¢ÈÀÇ Á¤ÀÇ
____µ¥ÀÌÅÍ ½Ã°¢ÈÀÇ Á¾·ù
________ÀÎÆ÷±×·¡ÇÈ
________Ž»öÀû ½Ã°¢È
________´ë½Ãº¸µå
________µ¥ÀÌÅÍ ½Ã°¢È ¹è¿ì±â
__D3 ¶óÀ̺귯¸® ¼Ò°³
__Á¤¸®
2 Àç»ç¿ë °¡´ÉÇÑ Â÷Æ®
__Àç»ç¿ë °¡´ÉÇÑ Â÷Æ® Á¦ÀÛ
____D3·Î ¿ä¼Ò »ý¼º
________µ¥ÀÌÅÍ ¹ÙÀεù
________¿ä¼Ò »ý¼º ĸ½¶È
________svg ¿ä¼Ò »ý¼º
____¹ÙÄÚµå Â÷Æ®
________Á¢±ÙÀÚ ¸Þ¼Òµå
________Â÷Æ® ÃʱâÈ
________µ¥ÀÌÅÍ Ãß°¡
________µ¥ÀÌÅÍ Á¢±ÙÀÚ ÇÔ¼ö Ãß°¡
________µ¥ÀÌÅͼ ¾÷µ¥ÀÌÆ®
________enter¿Í exit ÀüÀÌ °íÁ¤
__¹ÙÄÚµå Â÷Æ® »ç¿ë
__·¹À̾ƿô ¾Ë°í¸®Áò »ý¼º
____¹æ»çÇü ·¹À̾ƿô
________°¢µµ °è»ê
____·¹À̾ƿô »ç¿ë
__Á¤¸®
3 SVG ¾øÀÌ ½Ã°¢È Á¦ÀÛ
__SVG Áö¿ø ºê¶ó¿ìÀú ÇöȲ
__SVG ¾ø´Â ½Ã°¢È
____µ¥ÀÌÅÍ ·Îµù ¹× Á¤·Ä
____Æ÷¿À½º ·¹À̾ƿô ¸Þ¼Òµå
____»ö»ó°ú Å©±â ¼³Á¤
____¹ü·Ê ¸¸µé±â
__Æú¸®ÇÊ
____±â´É °Ë»ç
____canvg ¿¹Á¦
__ĵ¹ö½º¿Í D3
____ĵ¹ö½º¿¡¼ µµÇü ±×¸®±â
________µµÇü »ý¼º
________D3¿Í canvas ÅëÇÕ
__Á¤¸®
4 D3·Î »ö»ó ¼±Åñâ Á¦ÀÛ
__½½¶óÀÌ´õ ÄÁÆ®·Ñ Á¦ÀÛ
____µå·¡±× ¹ÝÀÀ
____½½¶óÀÌ´õ Á¦ÀÛ
____½½¶óÀÌ´õ »ç¿ë
__»ö»ó ¼±Åñâ Á¦ÀÛ
____»ö»ó ¼±Åñâ È£Ãâ±â
________»ö»ó ¼±Åñâ À©µµ¿ì Ãß°¡
____»ö»ó ¼±Åñâ À©µµ¿ì
__Á¤¸®
5 »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º Á¦ÀÛ
__Â÷Æ® ¿ä¼Ò °Á¶
__ÅøÆÁ Á¦ÀÛ
____ÅøÆÁ »ç¿ë
__ºê·¯½Ã¸¦ ÅëÇÑ ¿µ¿ª ¼±ÅÃ
____¿µ¿ª Â÷Æ® »ý¼º
____ºê·¯½Ã Ãß°¡
____ºê·¯½Ã ¸®½º³Ê
__Á¤¸®
6 Â÷Æ®³¢¸®ÀÇ »óÈ£ ÀÛ¿ë
__¹éº»ÀÇ ±âÃÊ
____À̺¥Æ®
____¸ðµ¨
____Ä÷º¼Ç
____ºä
____¶ó¿ìÅÍ
__ÁÖ½Ä Å½»ö±â ¾ÖÇø®ÄÉÀ̼Ç
____ÁÖ°¡ Â÷Æ® »ý¼º
________Á¾¸ñ¸í Â÷Æ®
________ÁÖ½Ä ¿µ¿ª Â÷Æ®
____¾ÖÇø®ÄÉÀÌ¼Ç ±¸Á¶ Áغñ
________À妽º ÆäÀÌÁö
____¸ðµ¨°ú Ä÷º¼Ç »ý¼º
________ÁÖ½Ä ¸ðµ¨
________ÁÖ½Ä Ä÷º¼Ç
________¾ÖÇø®ÄÉÀÌ¼Ç ¸ðµ¨
____ºä ±¸Çö
________ŸÀÌƲ ºä
________ÁÖ½Ä ¼±Åñ⠺ä
________ÁÖ½Ä ÄÁÅؽºÆ® ºä
________ÁÖ½Ä »ó¼¼ ºä
________¾ÖÇø®ÄÉÀÌ¼Ç ºä
____¶ó¿ìÅÍ Á¤ÀÇ
____¾ÖÇø®ÄÉÀÌ¼Ç ÃʱâÈ
__Á¤¸®
7 Â÷Æ® ÆÐÅ°Áö Á¦ÀÛ
__°³¹ß ÀÛ¾÷ È帧
____ÄÚµå ÀÛ¼º
____¸±¸®½º »ý¼º
________½Ã¸Çƽ ¹öÀü ¹øÈ£
__ÆÐÅ°Áö ³»¿ë »ý¼º
____¿ Áöµµ Â÷Æ®
____Çà·Ä ·¹À̾ƿô
__ÇÁ·ÎÁ§Æ® ¼Â¾÷
____Node ¸ðµâ ¼³Ä¡
____±×·±Æ®·Î ºôµå
________¼Ò½º ÆÄÀÏ ÇÕÄ¡±â
________¶óÀ̺귯¸® ¾ÐÃà
________JSHint·Î ÄÚµå °Ë»ç
________ÆÐÅ°Áö Å×½ºÆ®
________ŽºÅ©ÀÇ ¼ø¼ µî·Ï
____ÇÁ·ÐÆ®¿£µå ÀÇÁ¸¼º °ü¸®
__´Ù¸¥ ÇÁ·ÎÁ§Æ®¿¡¼ ÆÐÅ°Áö »ç¿ë
__Á¤¸®
8 µ¥ÀÌÅÍ ±â¹Ý ¾ÖÇø®ÄÉÀ̼Ç
__À¥ ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º
____ÇÁ·ÎÁ§Æ® Áغñ
____Á¦Å³À» ÀÌ¿ëÇÑ Á¤Àû »çÀÌÆ® »ý¼º
____¾ÖÇø®ÄÉÀÌ¼Ç ÄÄÆ÷³ÍÆ® ÀÛ¼º
________¸ðµ¨ ¹× Ä÷º¼Ç ÀÛ¼º
________ºä ÀÛ¼º
________¾ÖÇø®ÄÉÀÌ¼Ç ¼Â¾÷
____±êÇãºê ÆäÀÌÁö¸¦ ÀÌ¿ëÇÑ È£½ºÆÃ
____¾Æ¸¶Á¸ S3¸¦ ÀÌ¿ëÇÑ È£½ºÆÃ
________S3¿¡ ¹èÆ÷Çϱâ À§ÇÑ Á¦Å³ ¼³Á¤
________S3 ¹öŶ¿¡ »çÀÌÆ® ¾÷·Îµå
__Á¤¸®
9 ´ë½Ãº¸µå Á¦ÀÛ
__´ë½Ãº¸µå Á¤ÀÇ
__´ë½Ãº¸µå µðÀÚÀο¡ µµ¿òÀÌ µÇ´Â ÁÁÀº ½À°ü
__´ë½Ãº¸µå Á¦ÀÛ
____´ë½Ãº¸µåÀÇ ¸ñÀû Á¤ÀÇ
____µ¥ÀÌÅÍ ¼öÁý
____Á¤º¸ Á¶Á÷È
____´ë½Ãº¸µå ¿µ¿ª »ý¼º
________Çлý ¿µ¿ª
________°ú¸ñ ¿µ¿ª
________ÇÐ±Þ ¿µ¿ª
________´ë½Ãº¸µå ¿µ¿ª ¹èÄ¡
__Á¤¸®
10 Áöµµ Á¦ÀÛ
__Áö¸® µ¥ÀÌÅÍ ¼öÁý
____GeoJSON°ú ToppoJSON Çü½ÄÀÇ ÀÌÇØ
____Áö¸® µ¥ÀÌÅÍ ÆÄÀÏ º¯È¯ ¹× Á¶ÀÛ
__D3·Î Áöµµ Á¦ÀÛ
____µîÄ¡ Áö¿ªµµ Á¦ÀÛ
____À§»ó ¸ÅÇÎ
____Mapbox¿Í D3 ÇÔ²² »ç¿ë
____Mapbox ÇÁ·ÎÁ§Æ® »ý¼º
____Mapbox¿Í D3ÀÇ Á¶ÇÕ
__Á¤¸®
11 °í±Þ Áöµµ Á¦ÀÛ
__Áöµµ Á¦ÀÛÀ» À§ÇÑ ¿©·¯ °¡Áö Åõ¿µ ¹æ½Ä
____Á¤¹æÇü Åõ¿µ¹ý
____¿ø»Ô µî°Å¸® Åõ¿µ¹ý
____Á÷±³ Åõ¿µ¹ý
__Áö±¸ ȸÀü ±â´É »ý¼º
__´ëÈÇü º°ÀÚ¸® Áöµµ Á¦ÀÛ
____Ç×¼º ¸ñ·Ï ¼±ÅÃ
____Ç×¼º ±×¸®±â
____Åõ¿µ ¹æ½Ä º¯°æ°ú ȸÀü µ¿ÀÛ Ãß°¡
____Ç×¼º¿¡ »ö°ú ·¹À̺í Ãß°¡
__D3¸¦ ÀÌ¿ëÇÑ ·¡½ºÅÍ À̹ÌÁö Åõ»ç
____·¡½ºÅÍ À̹ÌÁö¸¦ canvas¿¡ ·»´õ¸µ
____Çȼ¿ÀÇ Áöµµ »óÀÇ ÁÂÇ¥°ª °è»ê
____Á÷±³ Åõ¿µÀ» ÀÌ¿ëÇÑ À̹ÌÁö ÀçÅõ¿µ
__Á¤¸®
12 ½Ç½Ã°£ ¾ÖÇø®ÄÉÀÌ¼Ç Á¦ÀÛ
__Firebase¸¦ »ç¿ëÇÑ ½Ç½Ã°£ Çù¾÷
____Firebase ¼³Á¤
____Firebase¿Í ¾ÖÇø®ÄÉÀÌ¼Ç ÅëÇÕ
__Æ®À§ÅÍ Å½»ö±â ¾ÖÇø®ÄÉÀ̼Ç
__½ºÆ®¸®¹Ö ¼¹ö »ý¼º
____Æ®À§ÅÍ ½ºÆ®¸®¹Ö API
________TwitÀ» ÀÌ¿ëÇÏ¿© Æ®À§ÅÍ ½ºÆ®¸®¹Ö API¿¡ Á¢±Ù
____Socket.IO
____½ºÆ®¸®¹Ö ¼¹ö ±¸Çö
__Ŭ¶óÀ̾ðÆ® ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º
____¾ÖÇø®ÄÉÀÌ¼Ç ±¸Á¶
________¸ðµ¨°ú Ä÷º¼Ç
________ÅäÇÈ Ä÷º¼Ç ºä ±¸Çö
________¾ÖÇø®ÄÉÀÌ¼Ç ºä »ý¼º
________¾ÖÇø®ÄÉÀÌ¼Ç Áغñ
__Á¤¸®
ÀúÀÚ¼Ò°³
»ý³â¿ùÀÏ | - |
---|
ÇØ´çÀÛ°¡¿¡ ´ëÇÑ ¼Ò°³°¡ ¾ø½À´Ï´Ù.
»ý³â¿ùÀÏ | - |
---|
ÀúÀÚ ¿À¸í¿îÀº ¾ðÁ¦³ª ¹ö±×¿Í ¾¾¸§ÇÏ´Â °³¹ßÀÚ´Ù. ¹ø¿ªÀ» ÅëÇØ °³¹ßÀÚ »ýÅ°迡 Á¶±ÝÀÌ¶óµµ º¸ÅÆÀÌ µÇ°íÀÚ ³ë·ÂÇÑ´Ù. ¡º½ºÇÁ¸µ 5.0 ¸¶ÀÌÅ©·Î¼ºñ½º 2/e¡»(¿¡ÀÌÄÜÃâÆÇ, 2018), ¡ºD3.js ½Ç½Ã°£ µ¥ÀÌÅÍ ½Ã°¢È¡»(¿¡ÀÌÄÜÃâÆÇ, 2015), ¡ºÅ¬¶ó¿ìµå ³×ÀÌƼºê ÀÚ¹Ù¡»(Ã¥¸¸, 2018), ¡º¿£ÅÍÇÁ¶óÀÌÁî µ¥ÀÌÅÍ Ç÷§Æû ±¸Ãà¡»(Ã¥¸¸, 2020) µîÀ» ¹ø¿ªÇßÀ¸¸ç, ¾ÕÀ¸·Îµµ ÀûÀº ¾çÀÌ¶óµµ ²ÙÁØÈ÷ ¹ø¿ª ÀÛ¾÷À» À̾ »ý°¢ÀÌ´Ù. https://homoefficio.github.io/¿¡¼ °³¹ß °ü·Ã Áö½ÄÀ» Á¤¸®Çؼ ³ª´©°í ÀÖ°í, Àâ´ÙÇÑ ¹®Á¦ ÇØ°á ±â·ÏÀ» https://github.com/HomoEfficio/dev-tips¿¡ ³²±â¸é¼ ±â¾ï·Â °¨Å𠸦 ±â·Ï·Â ÁõÁøÀ¸·Î ¸Þ²Ù°í ÀÖ´Ù. ÇöÀç ³×À̹öÁ¦Æ®¿¡¼ ±Û·Î¹ú ¸ÞŸ¹ö½º ¼ºñ½ºÀÎ Á¦ÆäÅä(Zepeto)¸¦ ¸¸µé¸ç ¹é¹ß °³¹ßÀÚÀÇ ²ÞÀ» À̾°í ÀÖ´Ù.
ÆîÃĺ¸±â¿ªÀÚÀÇ ´Ù¸¥Ã¥
Àüüº¸±â¿£ÅÍÇÁ¶óÀÌÁî µ¥ÀÌÅÍ Ç÷§Æû ±¸Ãà
ÁÖ°£·©Å·
´õº¸±â»óÇ°Á¤º¸Á¦°ø°í½Ã
À̺¥Æ® ±âȹÀü
ÀÌ »óÇ°ÀÇ ½Ã¸®Áî
(ÃÑ 208±Ç / ÇöÀ籸¸Å °¡´Éµµ¼ 208±Ç)
Àü°øµµ¼/´ëÇб³Àç ºÐ¾ß¿¡¼ ¸¹Àº ȸ¿øÀÌ ±¸¸ÅÇÑ Ã¥
ÆǸÅÀÚÁ¤º¸
»óÈ£ |
(ÁÖ)±³º¸¹®°í |
---|---|
´ëÇ¥ÀÚ¸í |
¾Èº´Çö |
»ç¾÷ÀÚµî·Ï¹øÈ£ |
102-81-11670 |
¿¬¶ôó |
1544-1900 |
ÀüÀÚ¿ìÆíÁÖ¼Ò |
callcenter@kyobobook.co.kr |
Åë½ÅÆǸž÷½Å°í¹øÈ£ |
01-0653 |
¿µ¾÷¼ÒÀçÁö |
¼¿ïƯº°½Ã Á¾·Î±¸ Á¾·Î 1(Á¾·Î1°¡,±³º¸ºôµù) |
±³È¯/ȯºÒ
¹ÝÇ°/±³È¯ ¹æ¹ý |
¡®¸¶ÀÌÆäÀÌÁö > Ãë¼Ò/¹ÝÇ°/±³È¯/ȯºÒ¡¯ ¿¡¼ ½Åû ¶Ç´Â 1:1 ¹®ÀÇ °Ô½ÃÆÇ ¹× °í°´¼¾ÅÍ(1577-2555)¿¡¼ ½Åû °¡´É |
---|---|
¹ÝÇ°/±³È¯°¡´É ±â°£ |
º¯½É ¹ÝÇ°ÀÇ °æ¿ì Ãâ°í¿Ï·á ÈÄ 6ÀÏ(¿µ¾÷ÀÏ ±âÁØ) À̳»±îÁö¸¸ °¡´É |
¹ÝÇ°/±³È¯ ºñ¿ë |
º¯½É ȤÀº ±¸¸ÅÂø¿À·Î ÀÎÇÑ ¹ÝÇ°/±³È¯Àº ¹Ý¼Û·á °í°´ ºÎ´ã |
¹ÝÇ°/±³È¯ ºÒ°¡ »çÀ¯ |
·¼ÒºñÀÚÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¼Õ½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì ·¼ÒºñÀÚÀÇ »ç¿ë, Æ÷Àå °³ºÀ¿¡ ÀÇÇØ »óÇ° µîÀÇ °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·º¹Á¦°¡ °¡´ÉÇÑ »óÇ° µîÀÇ Æ÷ÀåÀ» ÈѼÕÇÑ °æ¿ì ·½Ã°£ÀÇ °æ°ú¿¡ ÀÇÇØ ÀçÆǸŰ¡ °ï¶õÇÑ Á¤µµ·Î °¡Ä¡°¡ ÇöÀúÈ÷ °¨¼ÒÇÑ °æ¿ì ·ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀÇ ¼ÒºñÀÚº¸È£¿¡ °üÇÑ ¹ý·üÀÌ Á¤ÇÏ´Â ¼ÒºñÀÚ Ã»¾àöȸ Á¦ÇÑ ³»¿ë¿¡ ÇØ´çµÇ´Â °æ¿ì |
»óÇ° Ç°Àý |
°ø±Þ»ç(ÃâÆÇ»ç) Àç°í »çÁ¤¿¡ ÀÇÇØ Ç°Àý/Áö¿¬µÉ ¼ö ÀÖÀ½ |
¼ÒºñÀÚ ÇÇÇغ¸»ó |
·»óÇ°ÀÇ ºÒ·®¿¡ ÀÇÇÑ ±³È¯, A/S, ȯºÒ, Ç°Áúº¸Áõ ¹× ÇÇÇغ¸»ó µî¿¡ °üÇÑ »çÇ×Àº¼ÒºñÀÚºÐÀïÇØ°á ±âÁØ (°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ ÁØÇÏ¿© ó¸®µÊ ·´ë±Ý ȯºÒ ¹× ȯºÒÁö¿¬¿¡ µû¸¥ ¹è»ó±Ý Áö±Þ Á¶°Ç, ÀýÂ÷ µîÀº ÀüÀÚ»ó°Å·¡ µî¿¡¼ÀǼҺñÀÚ º¸È£¿¡ °üÇÑ ¹ý·ü¿¡ µû¶ó ó¸®ÇÔ |
(ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º´Â ȸ¿ø´ÔµéÀÇ ¾ÈÀü°Å·¡¸¦ À§ÇØ ±¸¸Å±Ý¾×, °áÁ¦¼ö´Ü¿¡ »ó°ü¾øÀÌ (ÁÖ)ÀÎÅÍÆÄÅ©Ä¿¸Ó½º¸¦ ÅëÇÑ ¸ðµç °Å·¡¿¡ ´ëÇÏ¿©
(ÁÖ)KGÀ̴Ͻýº°¡ Á¦°øÇÏ´Â ±¸¸Å¾ÈÀü¼ºñ½º¸¦ Àû¿ëÇÏ°í ÀÖ½À´Ï´Ù.
¹è¼Û¾È³»
±³º¸¹®°í »óÇ°Àº Åùè·Î ¹è¼ÛµÇ¸ç, Ãâ°í¿Ï·á 1~2Àϳ» »óÇ°À» ¹Þ¾Æ º¸½Ç ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä »óÇ°À» ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
±ººÎ´ë, ±³µµ¼Ò µî ƯÁ¤±â°üÀº ¿ìü±¹ Åù踸 ¹è¼Û°¡´ÉÇÕ´Ï´Ù.
¹è¼Ûºñ´Â ¾÷ü ¹è¼Ûºñ Á¤Ã¥¿¡ µû¸¨´Ï´Ù.