- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ½Ç½Ã°£ ¸ð´ÏÅ͸µ ½Ã½ºÅÛÀ» ¸¸µé¸ç Á¤º¹ÇÏ´Â MEVN[ºñÁ¦ÀÌÆÛºí¸¯]
ÀÚ¹Ù½ºÅ©¸³Æ® ¾ð¾î°¡ ¹ßÀüÇÔ¿¡ µû¶ó °³¹ß ½ÃÀå¿¡¼ ´õ¿í ¿µÇâ·ÂÀÌ Ä¿Áö°í ÀÖ½À´Ï´Ù. ÀÌ Ã¥¿¡¼´Â ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À¸·Î ½ÀµæÇÒ ¼ö ÀÖ´Â ±â¼úÀÎ ¡®MEVN¡¯À¸·Î À¥¾ÛÀ» Á¦ÀÛÇÕ´Ï´Ù. MEVNÀº MongoDB, Express, Vue.js, Node.js·Î ÀÌ·ç¾îÁø ½ºÆåÀÇ ¾àÀÚ·Î, ÀÌ ÇÑ ±ÇÀÇ Ã¥À» ÅëÇØ 4°¡Áö ±â¼úÀ» ¸ðµÎ ¹è¿ì°Ô µË´Ï´Ù. ¶ÇÇÑ À̷аú ½Ç½ÀÀ¸·Î ±¸ºÐÇÏ¿© Áö½Ä°ú ½Ç¹«¿¡ ¸ðµÎ ´ÉÅëÇÒ ¼ö ÀÖµµ·Ï ±¸¼ºµÇ¾ú½À´Ï´Ù.
ÀÌ Ã¥Àº ÀÚ¹Ù½ºÅ©¸³Æ® Áß±Þ ±â¼úÀ» ÀÍÇô¼ ÀÚ½ÅÀÇ ½ºÅ³ ¿ª·®À» °ÈÇÏ¿© °í±Þ °³¹ßÀÚ·Î ¼ºÀåÇÏ°í ½ÍÀº ºÐµé²² ƯÈ÷ À¯¿ëÇÕ´Ï´Ù. ÀúÀÚÀÇ °³¹ß ³ëÇÏ¿ì¿Í ½Ç¹«¿¡ µµ¿òÀÌ µÇ´Â ÆÁ, ±×¸®°í Àç¹Õ´Â ¿¹Á¦ ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ µ¶ÀÚ ¿©·¯ºÐµéµµ ÀڽŸ¸ÀÇ ÇÁ·ÎÁ§Æ®¸¦ ÀÌ Ã¥°ú ÇÔ²² ¿Ï¼º½ÃÄÑ º¸½Ã±â ¹Ù¶ø´Ï´Ù.
ÀÌ Ã¥ÀÌ ÇÊ¿äÇÑ µ¶ÀÚ
-HTML, JavaScript, CSS¿¡ ´ëÇØ ±âº» Áö½ÄÀÌ ÀÖ´Â ÃÊ±Þ ¶Ç´Â Áß±Þ °³¹ßÀÚ
-ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ Åä´ë·Î ¿©·¯ ÇÁ·ÎÁ§Æ®¸¦ ¸¸µé¾î º¸°í ½ÍÀº °³¹ßÀÚ
-º»ÀÎÀÇ ÇÁ·ÎÁ§Æ®¸¦ ÃֽŠÄڵ带 ÅëÇØ º¸¿ÏÇÏ°í ¿Ï¼ºÇÏ°í ½ÍÀº °³¹ßÀÚ
-MEVN¡¯À¸·Î À¥¾ÛÀ» Á¦ÀÛÇÏ°í ½ÍÀº °³¹ßÀÚ
ÀÌ Ã¥Àº ÀÚ¹Ù½ºÅ©¸³Æ® Áß±Þ ±â¼úÀ» ÀÍÇô¼ ÀÚ½ÅÀÇ ½ºÅ³ ¿ª·®À» °ÈÇÏ¿© °í±Þ °³¹ßÀÚ·Î ¼ºÀåÇÏ°í ½ÍÀº ºÐµé²² ƯÈ÷ À¯¿ëÇÕ´Ï´Ù. ÀúÀÚÀÇ °³¹ß ³ëÇÏ¿ì¿Í ½Ç¹«¿¡ µµ¿òÀÌ µÇ´Â ÆÁ, ±×¸®°í Àç¹Õ´Â ¿¹Á¦ ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ µ¶ÀÚ ¿©·¯ºÐµéµµ ÀڽŸ¸ÀÇ ÇÁ·ÎÁ§Æ®¸¦ ÀÌ Ã¥°ú ÇÔ²² ¿Ï¼º½ÃÄÑ º¸½Ã±â ¹Ù¶ø´Ï´Ù.
ÀÌ Ã¥ÀÌ ÇÊ¿äÇÑ µ¶ÀÚ
-HTML, JavaScript, CSS¿¡ ´ëÇØ ±âº» Áö½ÄÀÌ ÀÖ´Â ÃÊ±Þ ¶Ç´Â Áß±Þ °³¹ßÀÚ
-ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ Åä´ë·Î ¿©·¯ ÇÁ·ÎÁ§Æ®¸¦ ¸¸µé¾î º¸°í ½ÍÀº °³¹ßÀÚ
-º»ÀÎÀÇ ÇÁ·ÎÁ§Æ®¸¦ ÃֽŠÄڵ带 ÅëÇØ º¸¿ÏÇÏ°í ¿Ï¼ºÇÏ°í ½ÍÀº °³¹ßÀÚ
-MEVN¡¯À¸·Î À¥¾ÛÀ» Á¦ÀÛÇÏ°í ½ÍÀº °³¹ßÀÚ
ÀúÀÚ: ÁÖȫö
1Àå | °³¹ß ȯ°æ Áغñ¿Í git, github
ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå·Î ½Ç½À ÁغñÇϱâ
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : Å׸¶¿Í ¾ÆÀÌÄÜ, ÆùÆ®
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : Beautify È®Àå
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : Color Highlight
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : HTML Snippets
Âü°í : ÀÚÁÖ »ç¿ëÇÏ´Â ´ÜÃàÅ°
npmÀ» ÀÌ¿ëÇÑ ÆÐÅ°Áö ¼³Á¤
Node.js ¼³Ä¡ÇÏ°í npm »ç¿ëÇغ¸±â
package.json¿¡ ¸í·É¾î µî·ÏÇϱâ
Âü°í : npmÀ¸·Î ¸ðµâ ¼³Ä¡°¡ ¾È µÉ ¶§ ¾²´Â ¹æ¹ý
Çٽɸ¸ ¹è¿ì´Â git°ú github
gitÀÇ Æ¯Â¡
gitÀ¸·Î repository °¡Á®¿À±â
ÀÚÁÖ »ç¿ëÇÏ´Â git ¸í·É¾î
Ä¿¹Ô°ú À̽´ ¸¸µé ¶§ ÁÖÀÇÁ¡
½ÇÀü! git
2Àå | Á¦´ë·Î ¹è¿ì´Â ÀÚ¹Ù½ºÅ©¸³Æ®
ÇÔ¼ö ½ºÄÚÇÁ¿Í È£À̽ºÆÃ
½ºÄÚÇÁ¿Í È£À̽ºÆÃÀÇ °³³ä
const, letÀÇ È£À̽ºÆÃ
È»ìÇ¥ÇÔ¼ö¿Í ±âº» ¸Å°³º¯¼ö
È»ìÇ¥ÇÔ¼ö
±âº» ¸Å°³º¯¼ö
forEach, map, filter, reduce, every, some
forEach, map, filter, reduce
every, some
find, findIndex, includes
find, findIndex
includes
ÅÛÇø´ ¹®ÀÚ¿
±¸¹® »ý·«, spread ¿¬»êÀÚ, ±¸Á¶ºÐÇØ ÇÒ´ç
±¸¹® »ý·«
spread ¿¬»êÀÚ
±¸Á¶ºÐÇØ ÇÒ´ç
Promise¿Í async/await
ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ÀÇ ºñµ¿±â
DeepDive : queue
Callback°ú Promise
Promise¸¦ °¨½Î´Â Æ÷ÀåÁö, async¿Í await
Promise¸¦ »ç¿ëÇÑ ¿¡·¯Çڵ鸵
¿©·¯ °¡Áö Promise¸¦ ÇѲ¨¹ø¿¡ ÇØ°áÇÏ´Â Promise.all
ÀÌÅÍ·¯ºí, ÀÌÅÍ·¹ÀÌÅÍ, Á¦³Ê·¹ÀÌÅÍ - ES6
ÀÌÅÍ·¯ºí
ÀÌÅÍ·¹ÀÌÅÍ
Á¦³Ê·¹ÀÌÅÍ
ÀÌÅÍ·¯ºí/ÀÌÅÍ·¹ÀÌÅÍ ÇÁ·ÎÅäÄÝ
Á¦³Ê·¹ÀÌÅ͸¦ ÀÌ¿ëÇÑ Áö¿¬Æò°¡
Á¦³Ê·¹ÀÌÅ͸¦ ÀÌ¿ëÇÑ À¥½ºÅ©·¡ÇÎ
¸ðµâÈ - ESM°ú CJS
ESM ¸ðµâÈ ¹æ¹ý
CJS ¸ðµâÈ ¹æ¹ý
´À½¼ÇÏ°Ô °áÇÕÇÑ ¸ðµâ
DeepDive : ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ call by value
3Àå | ÄÚµå ¸®ÆÑÅ丵°ú ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö
ÇÔ¼ö ¼º´É ºñ±³
Á¤¼öÇü º¯È¯ : parseInt¿Í ºñÆ®¿¬»êÀÚ
¹è¿Æ÷ÇÔ È®ÀÎ : indexOf¿Í includes
°´Ã¼¼±¾ð : new Object¿Í {}
¿Ã¹Ù¸£°Ô °´Ã¼ º¹»çÇϱâ
½ºÇÁ·¹µå ¿¬»êÀÚ¿Í Object.assign
Àç±ÍÇÔ¼ö
JSON.parse¿Í JSON.stringify
DeepDive : JSON.stringifyÀÇ È°¿ë¹ý
JSONÀÇ ±âÃÊ
JSON Á÷·ÄÈ
UX Çâ»óÀ» À§ÇÑ À̹ÌÁö ·¹ÀÌÁö ·Îµå ±¸Ãà
Âü°í : slice¶õ?
ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö°ú ¸ð³ªµå
¼ø¼öÇÔ¼ö¿Í ÂüÁ¶ Åõ¸í¼º
°íÂ÷ÇÔ¼ö
Ä¿¸µ(currying)
ÇÔ¼öÇÕ¼º
Æı«ÀûÀÎ ÇÔ¼ö ¾²Áö ¾Ê±â
Point-free, ¹«Àμö ÇÁ·Î±×·¡¹Ö
¸ð³ªµå
Ŭ·ÎÀú
DeepDive : ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ½ÇÇà ÄÁÅؽºÆ®
ÇÔ¼öÇü ÇÁ·Î±×·¡¹ÖÀÇ ÀÀ¿ë
¹è¿ ¾È¿¡¼ Â÷·Ê´ë·Î ÀÛµ¿ÇÏ´Â ºñµ¿±â·ÎÁ÷
reduce¸¦ ÅëÇÑ Áý°è
Âü°í : ºó°ª Ãʱâ ÇÒ´çÀÚ(Logical nullish assignment) ??=
¹«°Ì°í ¸¹Àº ºñµ¿±â·ÎÁ÷À» ¹èÄ¡´ÜÀ§·Î ó¸®Çϱâ
CSS¿Í ÀÚ¹Ù½ºÅ©¸³Æ® ÃÖÀûÈ
CSS¿¡¼ÀÇ ÃÖÀûÈ
ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ÀÇ ÃÖÀûÈ
DeepDive : ȸéÀÇ ±¸¼º °úÁ¤(ºê¶ó¿ìÀú ·»´õ¸µ) ¹× reflow¿Í repaint
4Àå| Node.js·Î ÇÏ´Â ¾ÈÁ¤ÀûÀÎ ¼¹öÀÇ ½ÃÀÛ
Node.jsÀÇ ±âº»
Node.js
http °´Ã¼·Î À¥¼¹ö ¸¸µé±â
Âü°í : listen ¿¡·¯ ÇØ°á ¹æ¹ý
pm2·Î ¼¹ö °ü¸®Çϱâ
ÀϺη¯ ÁßÁöµÇ´Â ¼¹ö ¸¸µé±â
pm2·Î °è¼ÓÇؼ ´Ù½Ã »ì¾Æ³ª´Â ¼¹ö ¸¸µé±â
express·Î ¼¹ö ±¸ÃàÇÏ±â ¹× ·Î°Å
½¬¿î ¹Ìµé¿þ¾î ¼³Á¤
½±°Ô ¼³Á¤ÇÒ ¼ö ÀÖ´Â ¶ó¿ìÆÃ
½±°Ô ¼³Á¤ÇÏ´Â Á¤Àû ÀÚ¿ø Á¦°ø ¼¹ö
Âü°í : path ¸ðµâ
°³¹ßÀÚ Æ÷Æ®Æú¸®¿À ¸¸µé±â
DeepDive : SEOÀÇ ±âº»
NCP, ±êÇãºê¸¦ ÀÌ¿ëÇÑ ¹èÆ÷
NCP, ³×À̹ö Ŭ¶ó¿ìµå Ç÷§Æû
NCP¸¦ ÀÌ¿ëÇØ ¹èÆ÷Çغ¸±â
Âü°í : HTTPÀÇ ±âº» Æ÷Æ®
±êÇãºê¸¦ ÀÌ¿ëÇØ ¹èÆ÷Çϱâ
5Àå | ¿¹Á¦¸¦ ÅëÇØ ¹è¿ì´Â Vue.js 3.0
Vue.js¸¦ »ç¿ëÇØ¾ß ÇÏ´Â ÀÌÀ¯¿Í SPA
Vue.js¸¦ ½á¾ß ÇÏ´Â ÀÌÀ¯
SPA
MVVM µðÀÚÀÎ ÆÐÅÏ
Vue.jsÀÇ ÇÙ½É ¹× vuex
°¡»óµ¼°ú µ¥ÀÌÅÍ Á᫐ ±×¸®°í ÄÄÆ÷³ÍÆ® ±â¹Ý
¶óÀÌÇÁ»çÀÌŬ°ú composition API
µð·ºÆ¼ºê¿Í µ¥ÀÌÅ͹ÙÀεù
Âü°í : v-if¿Í v-showÀÇ Â÷ÀÌ
ºÎ¸ð¿Í ÀÚ½Ä ÄÄÆ÷³ÍÆ® °£ÀÇ Åë½Å
ref, reactive
vuex¿Í »óÅ°ü¸®
Vue-cli¸¦ ÅëÇÑ ÆÐÅ°Áö ¼³Á¤
Vue-cli ¼³Á¤Çϱâ
webpack
Vue.js·Î ¸¸µå´Â À̹ÌÁö ½½¶óÀÌ´õ
°£´ÜÇÑ À̹ÌÁö ¼¹ö ±¸Ãà
App.vue ÄÄÆ÷³ÍÆ® ¼öÁ¤
Âü°í : computed¿Í watch
Vue.js, vuex·Î ¸¸µå´Â ÇÒ ÀÏ À¥¾Û
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó ¼³°è
ºôµå ¹× ¼¹ö ±¸Ãà
6Àå | MongoDBÀÇ ±âº»°ú ¼º´É Å×½ºÆ®
MongoDBÀÇ ±¸Á¶¿Í Ư¡
MongoDB¿Í BSON
MongoDBÀÇ ¾ÆÅ°ÅØó
MongoDB Ư¡ 10°¡Áö
Âü°í : Äõ¸® Á¤·Ä¿¡¼ ¸Þ¸ð¸® °ü·Ã ¿¡·¯ ¹ß»ý ½Ã ÇØ°á ¹æ¹ý
MongoDBÀÇ ÇÑ°è
MongoDB ¼³Ä¡¿Í º¸¾È
MongoDB ¼³Ä¡¿Í ȯ°æ ¼³Á¤
Âü°í : À©µµ¿ì¿¡¼ÀÇ MongoDB ȯ°æº¯¼ö ¿À·ù ½Ã ÇØ°á ¹æ¹ý
MongoDBÀÇ °èÁ¤»ý¼º
MongoDBÀÇ º¸¾È ¸ÞÄ¿´ÏÁò
DeepDive : SCRAM
Mongoose¿Í MongoDB µå¶óÀ̹ö ¼º´É ºñ±³ ¹× CRUD
Mongoose¿Í MongoDB µå¶óÀ̹ö ¼º´É Å×½ºÆ®
Âü°í : MongoDB¿¡ ½Ã°£À» ³ÖÀ» ¶§ ÃßõÇÏ´Â ¹æ¹ý
Mongoose¸¦ ÀÌ¿ëÇÑ CRUD Çغ¸±â
Âü°í : MongoDB ShellÀÇ °£´ÜÇÑ ¸í·É¾î
ÁýÀûµÈ °á°ú¹°À» ³»±â À§ÇÑ aggregate
aggregate¿Í mapReduceÀÇ Â÷ÀÌ
aggregate ½Ç½À
MongoDBÀÇ À妽Ì
À妽ºÀÇ ±âº»
single Field Index À妽º¿Í ¼º´É ºñ±³
compound Field Index À妽º
MongoDB·Î ÇÏ´Â °ü°èÇü ½ºÅ°¸¶
DeepDive : ¾Ë¾ÆµÎ¸é À¯¿ëÇÑ DB °ü·Ã Áö½Ä
7Àå | D3.js·Î ÇÏ´Â ½Ç½Ã°£ µ¥ÀÌÅÍ ½Ã°¢È
D3.js¿Í ±× ¿Ü ½Ã°¢È ¶óÀ̺귯¸® ºñ±³
½Ã°¢È ¶óÀ̺귯¸® D3.js
D3.js¿Í ±× ¿Ü ½Ã°¢È ¶óÀ̺귯¸® ºñ±³
D3.jsÀÇ ±âÃÊ
circle
scale
axis
transition
bar chart
Äڷγª¸Ê ¸¸µé±â
Áöµµ¸¦ ±×¸± Àç·á topojson°ú geojson
Äڷγª¸Ê ½Ç½À
DeepDive : ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ call
Âü°í : interpolateÀÇ ÀǹÌ
Áõ°¡ÇÏ´Â ¼ýÀÚ ÄÄÆ÷³ÍÆ® ¸¸µé±â
8Àå | ½Ç½Ã°£ ÁÖ½Ä ¸ð´ÏÅ͸µ ½Ã½ºÅÛ
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó
¿ä±¸»çÇ×
¾ÆÅ°ÅØó
¹é¿£µå ±¸Ãà
¹é¿£µå ÄÚµå ¼³¸í
¹é¿£µå Å×½ºÆÃ
DeepDive : curl
DeepDive : REST APIÀÇ ±âº»
ÇÁ·ÐÆ®¿£µå ±¸Ãà
9Àå | ½Ç½Ã°£ ¼¾¼ ¸ð´ÏÅ͸µ ½Ã½ºÅÛ
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó
¿ä±¸»çÇ×
¾ÆÅ°ÅØó
DeepDive : websocket ¹æ½Ä°ú polling ¹æ½Ä ºñ±³
¹é¿£µå ±¸Ãà
¼¾¼ µ¥ÀÌÅÍ ±¸Ãà
DB °èÁ¤ Ãß°¡
½Ç½Ã°£ ¼¾¼ ¼¹ö ¸¸µé±â
ÇÁ·ÐÆ®¿£µå ±¸Ãà
10Àå | ¿¡·¯ ó¸®¿Í ½Ç½Ã°£ ·Î±×½Ã½ºÅÛ
Node.js¿¡¼ÀÇ ¿¡·¯ ó¸®
try - catch·Î ÇÏ´Â ¿¡·¯ ó¸®
express ³»¿¡¼ Promise·Î ÇÏ´Â ¿¡·¯ ó¸®
DeepDive : Node.js¿¡¼ÀÇ ¿¡·¯
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó
DeepDive : ·Î±ë ¶óÀ̺귯¸® Winston
¹é¿£µå ±¸Ãà
ÇÁ·ÐÆ®¿£µå ±¸Ãà
DeepDive : axios¸¦ Á¦´ë·Î ¾²´Â ¹ý
ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå·Î ½Ç½À ÁغñÇϱâ
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : Å׸¶¿Í ¾ÆÀÌÄÜ, ÆùÆ®
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : Beautify È®Àå
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : Color Highlight
ºñÁÖ¾ó ½ºÆ©µð¿À Ä¿½ºÅÒ ¼³Á¤ : HTML Snippets
Âü°í : ÀÚÁÖ »ç¿ëÇÏ´Â ´ÜÃàÅ°
npmÀ» ÀÌ¿ëÇÑ ÆÐÅ°Áö ¼³Á¤
Node.js ¼³Ä¡ÇÏ°í npm »ç¿ëÇغ¸±â
package.json¿¡ ¸í·É¾î µî·ÏÇϱâ
Âü°í : npmÀ¸·Î ¸ðµâ ¼³Ä¡°¡ ¾È µÉ ¶§ ¾²´Â ¹æ¹ý
Çٽɸ¸ ¹è¿ì´Â git°ú github
gitÀÇ Æ¯Â¡
gitÀ¸·Î repository °¡Á®¿À±â
ÀÚÁÖ »ç¿ëÇÏ´Â git ¸í·É¾î
Ä¿¹Ô°ú À̽´ ¸¸µé ¶§ ÁÖÀÇÁ¡
½ÇÀü! git
2Àå | Á¦´ë·Î ¹è¿ì´Â ÀÚ¹Ù½ºÅ©¸³Æ®
ÇÔ¼ö ½ºÄÚÇÁ¿Í È£À̽ºÆÃ
½ºÄÚÇÁ¿Í È£À̽ºÆÃÀÇ °³³ä
const, letÀÇ È£À̽ºÆÃ
È»ìÇ¥ÇÔ¼ö¿Í ±âº» ¸Å°³º¯¼ö
È»ìÇ¥ÇÔ¼ö
±âº» ¸Å°³º¯¼ö
forEach, map, filter, reduce, every, some
forEach, map, filter, reduce
every, some
find, findIndex, includes
find, findIndex
includes
ÅÛÇø´ ¹®ÀÚ¿
±¸¹® »ý·«, spread ¿¬»êÀÚ, ±¸Á¶ºÐÇØ ÇÒ´ç
±¸¹® »ý·«
spread ¿¬»êÀÚ
±¸Á¶ºÐÇØ ÇÒ´ç
Promise¿Í async/await
ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ÀÇ ºñµ¿±â
DeepDive : queue
Callback°ú Promise
Promise¸¦ °¨½Î´Â Æ÷ÀåÁö, async¿Í await
Promise¸¦ »ç¿ëÇÑ ¿¡·¯Çڵ鸵
¿©·¯ °¡Áö Promise¸¦ ÇѲ¨¹ø¿¡ ÇØ°áÇÏ´Â Promise.all
ÀÌÅÍ·¯ºí, ÀÌÅÍ·¹ÀÌÅÍ, Á¦³Ê·¹ÀÌÅÍ - ES6
ÀÌÅÍ·¯ºí
ÀÌÅÍ·¹ÀÌÅÍ
Á¦³Ê·¹ÀÌÅÍ
ÀÌÅÍ·¯ºí/ÀÌÅÍ·¹ÀÌÅÍ ÇÁ·ÎÅäÄÝ
Á¦³Ê·¹ÀÌÅ͸¦ ÀÌ¿ëÇÑ Áö¿¬Æò°¡
Á¦³Ê·¹ÀÌÅ͸¦ ÀÌ¿ëÇÑ À¥½ºÅ©·¡ÇÎ
¸ðµâÈ - ESM°ú CJS
ESM ¸ðµâÈ ¹æ¹ý
CJS ¸ðµâÈ ¹æ¹ý
´À½¼ÇÏ°Ô °áÇÕÇÑ ¸ðµâ
DeepDive : ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ call by value
3Àå | ÄÚµå ¸®ÆÑÅ丵°ú ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö
ÇÔ¼ö ¼º´É ºñ±³
Á¤¼öÇü º¯È¯ : parseInt¿Í ºñÆ®¿¬»êÀÚ
¹è¿Æ÷ÇÔ È®ÀÎ : indexOf¿Í includes
°´Ã¼¼±¾ð : new Object¿Í {}
¿Ã¹Ù¸£°Ô °´Ã¼ º¹»çÇϱâ
½ºÇÁ·¹µå ¿¬»êÀÚ¿Í Object.assign
Àç±ÍÇÔ¼ö
JSON.parse¿Í JSON.stringify
DeepDive : JSON.stringifyÀÇ È°¿ë¹ý
JSONÀÇ ±âÃÊ
JSON Á÷·ÄÈ
UX Çâ»óÀ» À§ÇÑ À̹ÌÁö ·¹ÀÌÁö ·Îµå ±¸Ãà
Âü°í : slice¶õ?
ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö°ú ¸ð³ªµå
¼ø¼öÇÔ¼ö¿Í ÂüÁ¶ Åõ¸í¼º
°íÂ÷ÇÔ¼ö
Ä¿¸µ(currying)
ÇÔ¼öÇÕ¼º
Æı«ÀûÀÎ ÇÔ¼ö ¾²Áö ¾Ê±â
Point-free, ¹«Àμö ÇÁ·Î±×·¡¹Ö
¸ð³ªµå
Ŭ·ÎÀú
DeepDive : ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ½ÇÇà ÄÁÅؽºÆ®
ÇÔ¼öÇü ÇÁ·Î±×·¡¹ÖÀÇ ÀÀ¿ë
¹è¿ ¾È¿¡¼ Â÷·Ê´ë·Î ÀÛµ¿ÇÏ´Â ºñµ¿±â·ÎÁ÷
reduce¸¦ ÅëÇÑ Áý°è
Âü°í : ºó°ª Ãʱâ ÇÒ´çÀÚ(Logical nullish assignment) ??=
¹«°Ì°í ¸¹Àº ºñµ¿±â·ÎÁ÷À» ¹èÄ¡´ÜÀ§·Î ó¸®Çϱâ
CSS¿Í ÀÚ¹Ù½ºÅ©¸³Æ® ÃÖÀûÈ
CSS¿¡¼ÀÇ ÃÖÀûÈ
ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ÀÇ ÃÖÀûÈ
DeepDive : ȸéÀÇ ±¸¼º °úÁ¤(ºê¶ó¿ìÀú ·»´õ¸µ) ¹× reflow¿Í repaint
4Àå| Node.js·Î ÇÏ´Â ¾ÈÁ¤ÀûÀÎ ¼¹öÀÇ ½ÃÀÛ
Node.jsÀÇ ±âº»
Node.js
http °´Ã¼·Î À¥¼¹ö ¸¸µé±â
Âü°í : listen ¿¡·¯ ÇØ°á ¹æ¹ý
pm2·Î ¼¹ö °ü¸®Çϱâ
ÀϺη¯ ÁßÁöµÇ´Â ¼¹ö ¸¸µé±â
pm2·Î °è¼ÓÇؼ ´Ù½Ã »ì¾Æ³ª´Â ¼¹ö ¸¸µé±â
express·Î ¼¹ö ±¸ÃàÇÏ±â ¹× ·Î°Å
½¬¿î ¹Ìµé¿þ¾î ¼³Á¤
½±°Ô ¼³Á¤ÇÒ ¼ö ÀÖ´Â ¶ó¿ìÆÃ
½±°Ô ¼³Á¤ÇÏ´Â Á¤Àû ÀÚ¿ø Á¦°ø ¼¹ö
Âü°í : path ¸ðµâ
°³¹ßÀÚ Æ÷Æ®Æú¸®¿À ¸¸µé±â
DeepDive : SEOÀÇ ±âº»
NCP, ±êÇãºê¸¦ ÀÌ¿ëÇÑ ¹èÆ÷
NCP, ³×À̹ö Ŭ¶ó¿ìµå Ç÷§Æû
NCP¸¦ ÀÌ¿ëÇØ ¹èÆ÷Çغ¸±â
Âü°í : HTTPÀÇ ±âº» Æ÷Æ®
±êÇãºê¸¦ ÀÌ¿ëÇØ ¹èÆ÷Çϱâ
5Àå | ¿¹Á¦¸¦ ÅëÇØ ¹è¿ì´Â Vue.js 3.0
Vue.js¸¦ »ç¿ëÇØ¾ß ÇÏ´Â ÀÌÀ¯¿Í SPA
Vue.js¸¦ ½á¾ß ÇÏ´Â ÀÌÀ¯
SPA
MVVM µðÀÚÀÎ ÆÐÅÏ
Vue.jsÀÇ ÇÙ½É ¹× vuex
°¡»óµ¼°ú µ¥ÀÌÅÍ Á᫐ ±×¸®°í ÄÄÆ÷³ÍÆ® ±â¹Ý
¶óÀÌÇÁ»çÀÌŬ°ú composition API
µð·ºÆ¼ºê¿Í µ¥ÀÌÅ͹ÙÀεù
Âü°í : v-if¿Í v-showÀÇ Â÷ÀÌ
ºÎ¸ð¿Í ÀÚ½Ä ÄÄÆ÷³ÍÆ® °£ÀÇ Åë½Å
ref, reactive
vuex¿Í »óÅ°ü¸®
Vue-cli¸¦ ÅëÇÑ ÆÐÅ°Áö ¼³Á¤
Vue-cli ¼³Á¤Çϱâ
webpack
Vue.js·Î ¸¸µå´Â À̹ÌÁö ½½¶óÀÌ´õ
°£´ÜÇÑ À̹ÌÁö ¼¹ö ±¸Ãà
App.vue ÄÄÆ÷³ÍÆ® ¼öÁ¤
Âü°í : computed¿Í watch
Vue.js, vuex·Î ¸¸µå´Â ÇÒ ÀÏ À¥¾Û
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó ¼³°è
ºôµå ¹× ¼¹ö ±¸Ãà
6Àå | MongoDBÀÇ ±âº»°ú ¼º´É Å×½ºÆ®
MongoDBÀÇ ±¸Á¶¿Í Ư¡
MongoDB¿Í BSON
MongoDBÀÇ ¾ÆÅ°ÅØó
MongoDB Ư¡ 10°¡Áö
Âü°í : Äõ¸® Á¤·Ä¿¡¼ ¸Þ¸ð¸® °ü·Ã ¿¡·¯ ¹ß»ý ½Ã ÇØ°á ¹æ¹ý
MongoDBÀÇ ÇÑ°è
MongoDB ¼³Ä¡¿Í º¸¾È
MongoDB ¼³Ä¡¿Í ȯ°æ ¼³Á¤
Âü°í : À©µµ¿ì¿¡¼ÀÇ MongoDB ȯ°æº¯¼ö ¿À·ù ½Ã ÇØ°á ¹æ¹ý
MongoDBÀÇ °èÁ¤»ý¼º
MongoDBÀÇ º¸¾È ¸ÞÄ¿´ÏÁò
DeepDive : SCRAM
Mongoose¿Í MongoDB µå¶óÀ̹ö ¼º´É ºñ±³ ¹× CRUD
Mongoose¿Í MongoDB µå¶óÀ̹ö ¼º´É Å×½ºÆ®
Âü°í : MongoDB¿¡ ½Ã°£À» ³ÖÀ» ¶§ ÃßõÇÏ´Â ¹æ¹ý
Mongoose¸¦ ÀÌ¿ëÇÑ CRUD Çغ¸±â
Âü°í : MongoDB ShellÀÇ °£´ÜÇÑ ¸í·É¾î
ÁýÀûµÈ °á°ú¹°À» ³»±â À§ÇÑ aggregate
aggregate¿Í mapReduceÀÇ Â÷ÀÌ
aggregate ½Ç½À
MongoDBÀÇ À妽Ì
À妽ºÀÇ ±âº»
single Field Index À妽º¿Í ¼º´É ºñ±³
compound Field Index À妽º
MongoDB·Î ÇÏ´Â °ü°èÇü ½ºÅ°¸¶
DeepDive : ¾Ë¾ÆµÎ¸é À¯¿ëÇÑ DB °ü·Ã Áö½Ä
7Àå | D3.js·Î ÇÏ´Â ½Ç½Ã°£ µ¥ÀÌÅÍ ½Ã°¢È
D3.js¿Í ±× ¿Ü ½Ã°¢È ¶óÀ̺귯¸® ºñ±³
½Ã°¢È ¶óÀ̺귯¸® D3.js
D3.js¿Í ±× ¿Ü ½Ã°¢È ¶óÀ̺귯¸® ºñ±³
D3.jsÀÇ ±âÃÊ
circle
scale
axis
transition
bar chart
Äڷγª¸Ê ¸¸µé±â
Áöµµ¸¦ ±×¸± Àç·á topojson°ú geojson
Äڷγª¸Ê ½Ç½À
DeepDive : ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ call
Âü°í : interpolateÀÇ ÀǹÌ
Áõ°¡ÇÏ´Â ¼ýÀÚ ÄÄÆ÷³ÍÆ® ¸¸µé±â
8Àå | ½Ç½Ã°£ ÁÖ½Ä ¸ð´ÏÅ͸µ ½Ã½ºÅÛ
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó
¿ä±¸»çÇ×
¾ÆÅ°ÅØó
¹é¿£µå ±¸Ãà
¹é¿£µå ÄÚµå ¼³¸í
¹é¿£µå Å×½ºÆÃ
DeepDive : curl
DeepDive : REST APIÀÇ ±âº»
ÇÁ·ÐÆ®¿£µå ±¸Ãà
9Àå | ½Ç½Ã°£ ¼¾¼ ¸ð´ÏÅ͸µ ½Ã½ºÅÛ
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó
¿ä±¸»çÇ×
¾ÆÅ°ÅØó
DeepDive : websocket ¹æ½Ä°ú polling ¹æ½Ä ºñ±³
¹é¿£µå ±¸Ãà
¼¾¼ µ¥ÀÌÅÍ ±¸Ãà
DB °èÁ¤ Ãß°¡
½Ç½Ã°£ ¼¾¼ ¼¹ö ¸¸µé±â
ÇÁ·ÐÆ®¿£µå ±¸Ãà
10Àå | ¿¡·¯ ó¸®¿Í ½Ç½Ã°£ ·Î±×½Ã½ºÅÛ
Node.js¿¡¼ÀÇ ¿¡·¯ ó¸®
try - catch·Î ÇÏ´Â ¿¡·¯ ó¸®
express ³»¿¡¼ Promise·Î ÇÏ´Â ¿¡·¯ ó¸®
DeepDive : Node.js¿¡¼ÀÇ ¿¡·¯
¿ä±¸»çÇ×°ú ¾ÆÅ°ÅØó
DeepDive : ·Î±ë ¶óÀ̺귯¸® Winston
¹é¿£µå ±¸Ãà
ÇÁ·ÐÆ®¿£µå ±¸Ãà
DeepDive : axios¸¦ Á¦´ë·Î ¾²´Â ¹ý
º£Å¸ ¸®´õ Ãßõ»ç
Ã¥ °÷°÷¿¡¼ º¼ ¼ö ÀÖ´Â Èï¹Ì·Î¿î ¿¹Á¦¿Í Ä£ÀýÇÑ ÄÚµå ¼³¸íÀ¸·Î µ¶ÀÚÀÇ Àǹ®Á¡¿¡ ÃæºÐÇÑ ÇØ´äÀ» Á¦°øÇÕ´Ï´Ù.
±èÀιü´Ô
¸ð´ÏÅ͸µ ½Ã½ºÅÛÀ» ¹é¿£µå, ÇÁ·ÐÆ®¿£µå¸¦ ³Ñ³ªµé¸ç °³¹ßÇÏ´Â °úÁ¤¿¡¼ ²Ä²ÄÈ÷ ¼³¸íÇϱ⠶§¹®¿¡ ¸Ó¸´¼ÓÀÇ ¹°À½Ç¥¸¦ ´À³¦Ç¥·Î ¹Ù²Ù¾î ÁÝ´Ï´Ù!
ÀÌÅ¿ì´Ô
½º½º·Î Àü¹ÝÀûÀÎ ¼ÒÇÁÆ®¿þ¾î °³¹ß¿¡ ´ëÇØ ÀÌÇØÇÏ°í Á÷Á¢ ¸¸µé¾îº¸°í ½ÍÀº ºÐµé²² ÀÌ Ã¥À» ÃßõÇÕ´Ï´Ù.
À̼ºÁØ´Ô
MEVN 4°¡Áö ±â¼úÀ» ´Ù·ç´Â ÀÌ Ã¥Àº JavaScript ±â¹Ý Ç®½ºÅà °³¹ßÀÚ·Î ¼ºÀåÇÏ·Á´Â ºÐµé¿¡°Ô ÁÁÀº ±æ¶óÀâÀÌ°¡ µÉ °ÍÀÔ´Ï´Ù.
±è¿ë¿õ´Ô
¿©·¯ ½Ç¿ëÀûÀÎ ÇÁ·ÎÁ§Æ®µé°ú ÇÔ²² ÀúÀÚÀÇ °æÇè°ú ¿©·¯ °¡Áö ±â¼úµéÀ» ÀÚ¼¼ÇÏ°Ô ¼Ò°³¹Þ´Â ´À³¦ÀÌ µå´Â Ã¥ÀÔ´Ï´Ù.
¼Û¼ººó´Ô
ÇÊ¿äÇÑ ÇÙ½ÉÀ» ²Ú²Ú ´·¯ ´ã¾Æ, ±¤¹üÀ§Çϸ鼵µ ÀÀÃàµÈ Áö½ÄÀ» ¿øÇÏ´Â ½ÅÀÔ ¹× ÁÖ´Ï¾î °³¹ßÀÚ¿¡°Ô ÃßõÇÕ´Ï´Ù!
¹®ÁÖ¿µ´Ô
ÀÌ Ã¥Àº ÀÚ¹Ù½ºÅ©¸³Æ®ºÎÅÍ ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö, DB¿Í Ŭ¶óÀ̾ðÆ®±îÁö ´Ù¾çÇÑ ÁÖÁ¦¸¦ ´Ù·ç¾î, ÈǸ¢ÇÑ °³¹ßÀڷμÀÇ Ã¹°ÉÀ½ÀÌ µÉ °ÍÀÔ´Ï´Ù.
Dyel.Park´Ô
Ã¥ °÷°÷¿¡¼ º¼ ¼ö ÀÖ´Â Èï¹Ì·Î¿î ¿¹Á¦¿Í Ä£ÀýÇÑ ÄÚµå ¼³¸íÀ¸·Î µ¶ÀÚÀÇ Àǹ®Á¡¿¡ ÃæºÐÇÑ ÇØ´äÀ» Á¦°øÇÕ´Ï´Ù.
±èÀιü´Ô
¸ð´ÏÅ͸µ ½Ã½ºÅÛÀ» ¹é¿£µå, ÇÁ·ÐÆ®¿£µå¸¦ ³Ñ³ªµé¸ç °³¹ßÇÏ´Â °úÁ¤¿¡¼ ²Ä²ÄÈ÷ ¼³¸íÇϱ⠶§¹®¿¡ ¸Ó¸´¼ÓÀÇ ¹°À½Ç¥¸¦ ´À³¦Ç¥·Î ¹Ù²Ù¾î ÁÝ´Ï´Ù!
ÀÌÅ¿ì´Ô
½º½º·Î Àü¹ÝÀûÀÎ ¼ÒÇÁÆ®¿þ¾î °³¹ß¿¡ ´ëÇØ ÀÌÇØÇÏ°í Á÷Á¢ ¸¸µé¾îº¸°í ½ÍÀº ºÐµé²² ÀÌ Ã¥À» ÃßõÇÕ´Ï´Ù.
À̼ºÁØ´Ô
MEVN 4°¡Áö ±â¼úÀ» ´Ù·ç´Â ÀÌ Ã¥Àº JavaScript ±â¹Ý Ç®½ºÅà °³¹ßÀÚ·Î ¼ºÀåÇÏ·Á´Â ºÐµé¿¡°Ô ÁÁÀº ±æ¶óÀâÀÌ°¡ µÉ °ÍÀÔ´Ï´Ù.
±è¿ë¿õ´Ô
¿©·¯ ½Ç¿ëÀûÀÎ ÇÁ·ÎÁ§Æ®µé°ú ÇÔ²² ÀúÀÚÀÇ °æÇè°ú ¿©·¯ °¡Áö ±â¼úµéÀ» ÀÚ¼¼ÇÏ°Ô ¼Ò°³¹Þ´Â ´À³¦ÀÌ µå´Â Ã¥ÀÔ´Ï´Ù.
¼Û¼ººó´Ô
ÇÊ¿äÇÑ ÇÙ½ÉÀ» ²Ú²Ú ´·¯ ´ã¾Æ, ±¤¹üÀ§Çϸ鼵µ ÀÀÃàµÈ Áö½ÄÀ» ¿øÇÏ´Â ½ÅÀÔ ¹× ÁÖ´Ï¾î °³¹ßÀÚ¿¡°Ô ÃßõÇÕ´Ï´Ù!
¹®ÁÖ¿µ´Ô
ÀÌ Ã¥Àº ÀÚ¹Ù½ºÅ©¸³Æ®ºÎÅÍ ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö, DB¿Í Ŭ¶óÀ̾ðÆ®±îÁö ´Ù¾çÇÑ ÁÖÁ¦¸¦ ´Ù·ç¾î, ÈǸ¢ÇÑ °³¹ßÀڷμÀÇ Ã¹°ÉÀ½ÀÌ µÉ °ÍÀÔ´Ï´Ù.
Dyel.Park´Ô