ÄÜÅÙÃ÷ »ó¼¼º¸±â
SPA °³¹ß °¡À̵å with Vue.js + ½ºÇÁ¸µ


SPA °³¹ß °¡À̵å with Vue.js + ½ºÇÁ¸µ

SPA °³¹ß °¡À̵å with Vue.js + ½ºÇÁ¸µ

<¿Â°³¹ßÆÀ> Àú | ¿Â³ëÆ®

Ãâ°£ÀÏ
2023-09-07
ÆÄÀÏÆ÷¸Ë
ePub
¿ë·®
4 M
Áö¿ø±â±â
PC½º¸¶Æ®ÆùÅÂºí¸´PC
ÇöȲ
½Åû °Ç¼ö : 0 °Ç
°£·« ½Åû ¸Þ¼¼Áö
ÄÜÅÙÃ÷ ¼Ò°³
¸ñÂ÷
ÇÑÁÙ¼­Æò

ÄÜÅÙÃ÷ ¼Ò°³

ÀÌ Ã¥Àº SPA(Single Page Application) °³¹ßÀÇ ¼¼°è¸¦ dz¼ºÇÏ°Ô ¾È³»ÇÏ´Â Á¾ÇÕ °¡À̵åÀÔ´Ï´Ù. ÀÌ Ã¥Àº ÃֽŠ±â¼úÀ» »ç¿ëÇÏ¿© µ¿ÀûÀÌ°í ¹ÝÀÀÀÌ ºü¸¥ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÃàÇÏ´Â ¹æ¹ýÀ» ÀüüÀûÀ¸·Î ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ¼¼½ÉÇÏ°Ô ¼³°èµÇ¾ú½À´Ï´Ù.

AxxÀå, 'SPA'¿¡¼­´Â ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç ¿µ¿ªÀ¸·Î µé¾î°¡´Â °ü¹® ¿ªÇÒÀ» ÇÕ´Ï´Ù. SPAÀÇ ÇÙ½É °³³äÀ» »ìÆ캸°í ÀåÁ¡°ú °úÁ¦, ±âÁ¸ ´ÙÁß ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ǰúÀÇ Â÷ÀÌÁ¡À» ÀÌÇØÇÕ´Ï´Ù.

BxxÀå, '¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®'¿¡¼­´Â ÃֽŠÀÚ¹Ù½ºÅ©¸³Æ® °³¹ßÀÇ ¼¼°è·Î ºüÁ®µì´Ï´Ù. ECMAScript Ç¥ÁØÀ» »ìÆ캸°í, ÇÁ·Î¹Ì½º¿Í async/await¸¦ »ç¿ëÇÑ ºñµ¿±â ÇÁ·Î±×·¡¹Ö¿¡ ´ëÇØ ¾Ë¾Æº¸°í, Çʼö JavaScript µµ±¸¿Í ½Ç½ÀÀ» »ìÆ캾´Ï´Ù.

CxxÀå, 'Vue.js'¿¡¼­´Â SPA¸¦ ±¸ÃàÇϱâ À§ÇÑ Á¢±ÙÇϱ⠽±°í ´ÙÀç´Ù´ÉÇÑ ÇÁ·¹ÀÓ¿öÅ©ÀÎ Vue.js ÇÁ·¹ÀÓ¿öÅ©¿¡ ´ëÇØ ¾È³»ÇÕ´Ï´Ù. Vue ÄÄÆ÷³ÍÆ®, Vuex¸¦ »ç¿ëÇÑ »óÅ °ü¸®, Vue ¶ó¿ìÅ͸¦ »ç¿ëÇÑ ¶ó¿ìÆÃ, ´ëÈ­Çü ¹× µ¿Àû »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¸¦ ¸¸µå´Â ¹æ¹ý¿¡ ´ëÇØ ¾Ë¾Æº¾´Ï´Ù.

DxxÀå, '½ºÇÁ¸µÀ» »ç¿ëÇÑ RESTful ÇÁ·Î±×·¡¹Ö'¿¡¼­´Â ÇÁ·ÐÆ®¿£µå¿Í ¹é¿£µå °£ÀÇ °ÝÂ÷¸¦ ÇؼÒÇÕ´Ï´Ù. ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇÏ¿© RESTful API¸¦ ±¸ÃàÇÏ´Â ¹æ¹ýÀ» »ìÆ캸°í, ÇÁ·ÐÆ®¿£µå ¾ÖÇø®ÄÉÀ̼ǰú ¿øÈ°ÇÏ°Ô Åë½ÅÇÏ´Â °­·ÂÇÑ ¹é¿£µå ¼­ºñ½º¸¦ ¸¸µå´Â ¹æ¹ýÀ» ÀÌÇØÇÕ´Ï´Ù.

ÀÌ Ã¥À» ÅëÇØ ÃֽŠÀ¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» Á¦ÀÛÇÏ´Â µ¥ ÇÊ¿äÇÑ Áö½Ä°ú ±â¼úÀ» ½ÀµæÇÒ ¼ö ÀÖ½À´Ï´Ù. SPAÀÇ ¼¼°è¿¡ ÀÔ¹®ÇÏ·Á´Â ÇÁ·ÐÆ®¿£µå ¾ÖÈ£°¡µç, µ¿Àû »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¿¡ ¸ÂÃç ¼­ºñ½º¸¦ Á¶Á¤ÇÏ·Á´Â ¹é¿£µå °³¹ßÀÚÀ̵ç ÀÌ Ã¥Àº SPA ±¸ÃàÀÇ ±âº» °³³ä°ú °í±Þ ±â¼úÀ» ¾È³»ÇÕ´Ï´Ù. ÀÌ Ã¥À» ´Ù ÀÐ°í ³ª¸é ÃֽŠÀ¥ °³¹ßÀÇ ¿ä±¸ »çÇ×À» ÃæÁ·ÇÏ´Â ¹ÝÀÀÇü, ´ëÈ­Çü, È¿À²ÀûÀÎ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.

ÀÌ Ã¥Àº AxxÀåÀ» Á¦¿ÜÇÑ ³ª¸ÓÁö ÀåÀº ¿Â³ëÆ®¿¡¼­ Ãâ°£µÈ Ã¥ÀÇ ³»¿ëÀ» ÇÕÄ£ ÇüÅÂÀÔ´Ï´Ù. °³º° ÀüÀÚÃ¥À¸·Î µû·Î ±¸¸ÅÇÏ·Á¸é ¾Æ·¡ Á¤º¸¸¦ ÂüÁ¶Çϱ⠹ٶø´Ï´Ù.

º»¼­¿Í °ü·ÃµÈ ÀüÀÚÃ¥ ¸®½ºÆ®ÀÔ´Ï´Ù.
- [ ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ]
- [ Vue.js ]
- [ RESTful ÇÁ·Î±×·¡¹Ö with ½ºÇÁ¸µ ]

¸ñÂ÷

A01Àå : ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç ¼Ò°³
___1. ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ÇÀ̶õ?
___2. ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ÇÀÇ ÀåÁ¡°ú ´ÜÁ¡
___3. ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ÇÀÇ ÀÛµ¿ ¹æ½Ä
A02Àå : ÇÁ·±Æ®¿£µå ±â¼ú
___1. HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®
___2. ÇÁ·±Æ®¿£µå ÇÁ·¹ÀÓ¿öÅ©/¶óÀ̺귯¸®
___3. UI/UX µðÀÚÀÎ ¿øÄ¢
A03Àå : ¹é¿£µå ±â¼ú
___1. RESTful API
___2. ¼­¹ö Ãø ÇÁ·¹ÀÓ¿öÅ©
___3. ÀÎÁõ ¹× ±ÇÇÑ ºÎ¿©
A04Àå : ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç ±¸Ãà
___1. °³¹ß ȯ°æ ¼³Á¤
___2. ¾ÖÇø®ÄÉÀÌ¼Ç ¾ÆÅ°ÅØó °èȹ
___3. ÇÁ·ÐÆ®¿£µå ¸¸µé±â
___4. ¹é¿£µå ¸¸µé±â
___5. ÇÁ·ÐÆ® ¿£µå¿Í ¹é¿£µå ¿¬°áÇϱâ
___6. Å×½ºÆ® ¹× µð¹ö±ë
A05Àå : ¹èÆ÷ ¹× È®Àå
___1. ½Ì±Û ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ÇÀ» À§ÇÑ È£½ºÆà ¿É¼Ç
___2. ÇÁ·Î´ö¼Ç ȯ°æ¿¡ ¹èÆ÷
___3. ¾ÖÇø®ÄÉÀÌ¼Ç ¸ð´ÏÅ͸µ ¹× ½ºÄÉÀϸµ
A06Àå : °í±Þ ÁÖÁ¦
___1. ÇÁ·Î±×·¹½Ãºê À¥ ¾ÖÇø®ÄÉÀ̼Ç
___2. ¼­¹ö Ãø ·»´õ¸µ
___3. ¼º´É ¹× »ç¿ëÀÚ °æÇè ÃÖÀûÈ­
___4. Á¢±Ù¼º °í·Á »çÇ×
B01Àå : ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ¼Ò°³
___1. ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®¶õ?
___2. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¿ª»ç
___3. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ÃֽŠ¹öÀüÀº?
___4. ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ÀåÁ¡
B02Àå : ¾ð¾î ±âÃÊ
___1. º¯¼ö¿Í µ¥ÀÌÅÍ Å¸ÀÔ
___2. ¿¬»êÀÚ
___3. Á¦¾î È帧¹®
___4. ÇÔ¼ö
___5. °´Ã¼
___6. ¹è¿­
B03Àå : ES6 (ECMAScript 2015)
___1. ºí·Ï ¹üÀ§ ¼±¾ð(let, const)
___2. È­»ìÇ¥ ÇÔ¼ö
___3. ÅÛÇø´ ¸®ÅÍ·²
___4. ±¸Á¶ ºÐÇØ ÇÒ´ç
___5. ³ª¸ÓÁö ¹× ½ºÇÁ·¹µå ¿¬»êÀÚ
___6. ±âº» ÆĶó¹ÌÅÍ
___7. Ŭ·¡½º ¹× »ó¼Ó
___8. ¸ðµâ
___9. ÇÁ·Î¹Ì½º
___10. Async/Await
___11. Á¦³Ê·¹ÀÌÅÍ
B04Àå : °í±Þ ÀÚ¹Ù½ºÅ©¸³Æ® °³³ä
___1. ¹üÀ§¿Í Ŭ·ÎÀú
___2. ÇÁ·ÎÅäŸÀÔ°ú »ó¼Ó
___3. °íÂ÷ ÇÔ¼ö
___4. ºñµ¿±â ÀÚ¹Ù½ºÅ©¸³Æ®
___5. Äݹé ÇÔ¼ö
___6. À̺¥Æ® ·çÇÁ
___7. Á¤±Ô Ç¥Çö½Ä
B05Àå : ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ °í±Þ ÁÖÁ¦
___1. ÇÔ¼öÇü ÇÁ·Î±×·¡¹Ö
___2. ¸®¾×Ƽºê ÇÁ·Î±×·¡¹Ö
___3. µ¥ÀÌÅÍ ½Ã°¢È­
___4. À¥ ÄÄÆ÷³ÍÆ®
___5. À¥ ¾î¼Àºí¸®
B06Àå : ºê¶ó¿ìÀú·Î ÀÛ¾÷Çϱâ
___1. ¹®¼­ °´Ã¼ ¸ðµ¨(DOM)
___2. DOM ¿ä¼Ò Á¶ÀÛÇϱâ
___3. ºê¶ó¿ìÀú À̺¥Æ®
___4. AJAX
___5. Fetch API
___6. ·ÎÄÃ ÀúÀå¼Ò
B07Àå : ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸® ¹× ÇÁ·¹ÀÓ¿öÅ©
___1. React
___2. Vue.js
___3. Angular
___4. Node.js
___5. Express
___6. jQuery
B08Àå : µµ±¸ ¹× ¿öÅ©Ç÷Î
___1. ÃֽŠ°³¹ß ȯ°æ ¼³Á¤
___2. ºôµå µµ±¸(Webpack, Parcel, Rollup)
___3. ŽºÅ© ·¯³Ê(Gulp, Grunt)
___4. ¸°ÅÍ ¹× ÄÚµå Ç°Áú µµ±¸(ESLint, Prettier)
___5. µð¹ö±ë µµ±¸
___6. Å×½ºÆ® ÇÁ·¹ÀÓ¿öÅ©(Jest, Mocha, Jasmine)
___7. Áö¼ÓÀû ÅëÇÕ(CI) ¹× Áö¼ÓÀû ¹èÆ÷(CD)
B09Àå : ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ¸ð¹ü »ç·Ê
___1. ÄÚµù ½ºÅ¸ÀÏ
___2. ÄÚµå ±¸¼º
___3. ¼º´É ÃÖÀûÈ­
___4. ¿À·ù ó¸®
___5. º¸¾È
___6. Á¢±Ù¼º
___7. ´ÜÀ§ Å×½ºÆ®
___8. µð¹ö±ë
C01Àå : Vue.js ¼Ò°³
___1. Vue.js¶õ?
___2. ¿Ö Vue.js¸¦ »ç¿ëÇϳª¿ä?
___3. Vue.js¿Í ´Ù¸¥ ÇÁ·¹ÀÓ¿öÅ©¶óÀ̺귯¸® ºñ±³
C02Àå : Vue.js ½ÃÀÛÇϱâ
___1. ¼³Ä¡ ¹× ¼³Á¤
___2. Hello World ¿¹Á¦
___3. Vue ÀνºÅϽº ÀÌÇØÇϱâ
C03Àå : Vue.js ÅÛÇø´
___1. Vue.js ÅÛÇø´ ±¸¹®
___2. Áö½Ã¹® ¹× Ç¥Çö½Ä
___3. ÅÛÇø´ ·»´õ¸µ
C04Àå : Vue.js ÄÄÆ÷³ÍÆ®
___1. Vue.js ÄÄÆ÷³ÍÆ®¶õ?
___2. ÄÄÆ÷³ÍÆ® »ý¼ºÇϱâ
___3. ÇÁ·ÎÆÛƼ¿Í ±× »ç¿ë¹ý
___4. À̺¥Æ® ¹ß»ý
___5. ½½·Ô
C05Àå : Vue.js ¹ÝÀÀÇü ¼Ó¼º
___1. Vue.jsÀÇ ¹ÝÀÀ¼º ÀÌÇØÇϱâ
___2. Computed ¼Ó¼º
___3. Watchers
___4. Methods
C06Àå : Vue.js Æû°ú ÀÔ·Â ¹ÙÀεù
___1. Vue.jsÀÇ Æû ó¸®
___2. v-model Áö½Ã¹®
___3. »ç¿ëÀÚ Á¤ÀÇ ÀÔ·Â ÄÄÆ÷³ÍÆ®
___4. À¯È¿¼º °Ë»ç
C07Àå : Vue.js ¶ó¿ìÆÃ
___1. Vue ¶ó¿ìÅÍ ¼³Á¤
___2. ±âº» ¶ó¿ìÆÃ
___3. °æ·Î ¸Å°³º¯¼ö
___4. ³»ºñ°ÔÀÌ¼Ç °¡µå
C08Àå : Vuex¸¦ »ç¿ëÇÑ Vue.js »óÅ °ü¸®
___1. Vuex ¼Ò°³
___2. ½ºÅä¾î, ¾×¼Ç ¹× ¹ÂÅ×À̼Ç
___3. Vue.js¿Í Vuex ¿¬°áÇϱâ
___4. Vuex ¸ðµâ
C09Àå : Vue.js ¾Ö´Ï¸ÞÀÌ¼Ç ¹× Æ®·£Áö¼Ç
___1. Vue.jsÀÇ CSS ¾Ö´Ï¸ÞÀ̼Ç
___2. ¿ä¼Ò °£ Àüȯ
___3. µ¿Àû Æ®·£Áö¼Ç
C10Àå : Vue.js Áö½Ã¹®
___1. Vue.js Áö½Ã¹®À̶õ?
___2. ±âº» Á¦°ø Áö½Ã¹®
___3. »ç¿ëÀÚ Á¤ÀÇ Áö½Ã¹®
C11Àå : Vue.js Å×½ºÆ®
___1. Jest·Î Vue.js ÄÄÆ÷³ÍÆ® Å×½ºÆ®Çϱâ
___2. ½º³À¼¦ Å×½ºÆ®
___3. ÀÇÁ¸¼º ¸ðÅ·
C12Àå : °í±Þ Vue.js ÁÖÁ¦
___1. Vue.js¸¦ »ç¿ëÇÑ ¼­¹ö Ãø ·»´õ¸µ
___2. Vue.js 3 ±â´É
___3. Vue.js¿Í ŸÀÔ½ºÅ©¸³Æ®
___4. Vue.js ¿¡ÄڽýºÅÛ ¹× Àα⠶óÀ̺귯¸®
D01Àå : RESTful ÇÁ·Î±×·¡¹Ö ¼Ò°³
___1. Á¤ÀÇ ¹× ÁÖ¿ä ¿øÄ¢
___2. HTTP ¸Þ¼­µå ÀÌÇØ
___3. ¹Ìµð¾î À¯Çü °³¿ä
D02Àå : ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ© ¼Ò°³
___1. ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©ÀÇ ÇÙ½É °³³ä
___2. ½ºÇÁ¸µ ºÎÆ® °³¿ä ¹× ¾ÆÅ°ÅØó
___3. ½ºÇÁ¸µÀÇ ÀÇÁ¸¼º ÁÖÀÔ
___4. ½ºÇÁ¸µÀÇ ºó°ú ¿¬°á
D03Àå : ½ºÇÁ¸µÀ¸·Î RESTful À¥ ¼­ºñ½º ±¸ÃàÇϱâ
___1. ½ºÇÁ¸µ ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼ºÇϱâ
___2. ù ¹ø° REST API ºôµåÇϱâ
___3. HTTP ¸Þ¼­µå
___4. ¿¹¿Ü ¹× À¯È¿¼º °Ë»ç ó¸®Çϱâ
D04Àå : ½ºÇÁ¸µÀÇ °í±Þ °³³ä for REST API
___1. ½ºÇÁ¸µ µ¥ÀÌÅÍ JPA¸¦ »ç¿ëÇÑ ÆäÀÌ¡ ¹× Á¤·Ä
___2. ¹öÀü °ü¸®
___3. ÄÜÅÙÃ÷ Çù»ó
___4. ij½Ì
___5. HATEOAS
D05Àå : ½ºÇÁ¸µ REST APIÀÇ º¸¾È
___1. ±âº» ÀÎÁõ
___2. OAuth2.0
___3. JWT
D06Àå : ½ºÇÁ¸µÀ¸·Î REST API Å×½ºÆ®Çϱâ
___1. JUnitÀ» »ç¿ëÇÑ ´ÜÀ§ Å×½ºÆ®
___2. Mockito¸¦ »ç¿ëÇÑ ÅëÇÕ Å×½ºÆ®
___3. PostmanÀ¸·Î Å×½ºÆ®Çϱâ
D07Àå : ½ºÇÁ¸µ REST API ¹èÆ÷
___1. ½ºÇÁ¸µ ºÎÆ® ¾ÖÇø®ÄÉÀÌ¼Ç µµÄ¿È­
___2. Ŭ¶ó¿ìµå¿¡ ¹èÆ÷Çϱâ
D08Àå : RESTful ÇÁ·Î±×·¡¹ÖÀÇ ¸ð¹ü »ç·Ê
___1. »óÅ ºñÀúÀå API ºôµå
___2. ¸í¸í ±ÔÄ¢
___3. ¿À·ù ó¸®
D09Àå : »ç·Ê ¿¬±¸
___1. º»°ÝÀûÀÎ RESTful À¥ ¼­ºñ½º °³¹ßÇϱâ
___2. REST API ¹®Á¦ ÇØ°á ¹× µð¹ö±ë