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


SPA °³¹ß °¡À̵å with ¸®¾×Æ®+½ºÇÁ¸µ

SPA °³¹ß °¡À̵å with ¸®¾×Æ®+½ºÇÁ¸µ

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

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

ÄÜÅÙÃ÷ ¼Ò°³

ÀÌ Ã¥Àº ÇÁ·ÐÆ®¿£µå °³¹ßÀ» À§ÇÑ ¸®¾×Æ®¿Í ¹é¿£µå Áö¿øÀ» À§ÇÑ ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©ÀÇ °­·ÂÇÑ Á¶ÇÕÀ» »ç¿ëÇØ SPA(Single Page Application)¸¦ ¸¸µå´Â ¹æ¹ýÀ» ÀÚ¼¼È÷ ¼³¸íÇÏ´Â Á¾ÇÕ °¡À̵åÀÔ´Ï´Ù. ÀÌ Ã¥Àº Ŭ¶óÀ̾ðÆ® Ãø°ú ¼­¹ö Ãø ±â¼úÀ» ¿øÈ°ÇÏ°Ô ÅëÇÕÇÏ´Â ÃֽŠ¹ÝÀÀÇü SPA¸¦ ±¸ÃàÇÒ ¼ö ÀÖ´Â ±â¼úÀ» °®Ãßµµ·Ï ¼³°èµÇ¾ú½À´Ï´Ù.

AxxÀå, 'SPA'¿¡¼­´Â ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀ̼ÇÀÇ °³³ä°ú ÃֽŠÀ¥ °³¹ß¿¡¼­ÀÇ ÀÌÁ¡À» ¼Ò°³ÇÕ´Ï´Ù. SPAÀÇ ÀÛµ¿ ¹æ½Ä°ú ¿øÈ°ÇÑ »ç¿ëÀÚ °æÇèÀ» Á¦°øÇÏ´Â µ¥ ÀÖ¾î SPAÀÇ Á߿伺À» ÀÌÇØÇÏ°Ô µÉ °ÍÀÔ´Ï´Ù.

BxxÀå, '¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®'¿¡¼­´Â ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·Î±×·¡¹ÖÀÇ ¼¼°è¸¦ »ìÆ캾´Ï´Ù. µ¿ÀûÀÌ°í È¿À²ÀûÀÎ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÏ´Â µ¥ ÇʼöÀûÀÎ ES6+ ±â´É, ÀÚ¹Ù½ºÅ©¸³Æ® ¸ðµâ ¹× ±âŸ ¹ßÀüµÈ ±â´É¿¡ ´ëÇØ ¾Ë¾Æº¾´Ï´Ù.

CxxÀå, '¸®¾×Æ®'¿¡¼­´Â »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¸¦ ±¸ÃàÇÏ´Â µ¥ ³Î¸® »ç¿ëµÇ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÎ ¸®¾×Æ®¸¦ ¸¶½ºÅÍÇÏ´Â µ¥ ÁßÁ¡À» µÓ´Ï´Ù. ÄÄÆ÷³ÍÆ®, ÇÁ·ÎÆÛƼ, »óÅ °ü¸®, Àç»ç¿ë °¡´ÉÇÑ ¸ðµâ½Ä UI ¿ä¼Ò ±¸Ãà ¿øÄ¢¿¡ ´ëÇØ ¾Ë¾Æº¾´Ï´Ù.

DxxÀå, '½ºÇÁ¸µÀ» »ç¿ëÇÑ RESTful ÇÁ·Î±×·¡¹Ö'¿¡¼­´Â ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇÏ¿© RESTful API¸¦ ºôµåÇÏ´Â ¹æ¹ýÀ» ¼Ò°³ÇÕ´Ï´Ù. REST ¾ÆÅ°ÅØóÀÇ ¿ø¸®¸¦ »ìÆ캸°í, ¿£µåÆ÷ÀÎÆ®¸¦ »ý¼ºÇÏ°í, Ŭ¶óÀ̾ðÆ®¿Í ¼­¹ö °£ÀÇ µ¥ÀÌÅÍ ±³È¯À» ó¸®ÇÏ´Â ¹æ¹ýÀ» ÀÌÇØÇÏ°Ô µË´Ï´Ù.

ÀÌ Ã¥À» ÁøÇàÇϸ鼭 ¸®¾×Æ®¿Í ½ºÇÁ¸µÀÇ °­·ÂÇÑ ±â´ÉÀ» ¿øÈ°ÇÏ°Ô ÅëÇÕÇÏ¿© È¿À²ÀûÀÌ°í ¹ÝÀÀ¼ºÀÌ ¶Ù¾î³ª¸ç µ¿ÀûÀÎ SPA¸¦ ¸¸µå´Â ¹æ¹ýÀ» ±íÀÌ ÀÖ°Ô ÀÌÇØÇÏ°Ô µÉ °ÍÀÔ´Ï´Ù. ÀÌ Ã¥Àº ±â¼úÀ» È®ÀåÇÏ·Á´Â ÇÁ·ÐÆ®¿£µå °³¹ßÀÚÀ̵ç, SPA °³¹ß ¿ª·®À» °­È­ÇÏ·Á´Â ¹é¿£µå °³¹ßÀÚÀÌµç »ó°ü¾øÀÌ ¸®¾×Æ®¿Í ½ºÇÁ¸µÀ» »ç¿ëÇØ SPA¸¦ ±¸ÃàÇÏ´Â ±âº» °³³ä°ú °í±Þ ±â¼úÀ» ¾È³»ÇÕ´Ï´Ù. ÀÌ Ã¥À» ´Ù ÀÐ°í ³ª¸é ÇÁ·ÐÆ®¿£µå ¹× ¹é¿£µå ±â¼úÀÇ ÀåÁ¡À» ¸ðµÎ °áÇÕÇÑ °­·ÂÇÏ°í Çö´ëÀûÀÎ SPA¸¦ °³¹ßÇÒ ¼ö ÀÖ°Ô µÉ °ÍÀÔ´Ï´Ù.

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

º»¼­¿Í °ü·ÃµÈ ÀüÀÚÃ¥ ¸®½ºÆ®ÀÔ´Ï´Ù.
- [ ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ]
- [ ¸®¾×Æ® ]
- [ 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Àå : ¸®¾×Æ® ¼Ò°³
___1. ¸®¾×Æ®¶õ?
___2. ¸®¾×Æ®¸¦ »ç¿ëÇÏ´Â ÀÌÀ¯
___3. ¸®¾×Æ®¿Í ´Ù¸¥ ÇÁ·¹ÀÓ¿öÅ©¶óÀ̺귯¸® ºñ±³
C02Àå : °³¹ß ȯ°æ ¼³Á¤Çϱâ
___1. Node.js ¼³Ä¡
___2. npm/yarn ¼³Ä¡
___3. ¸®¾×Æ® ¾Û »ý¼º
C03Àå : JSX ±âÃÊ
___1. JSX¶õ?
___2. JSX ±¸¹®
___3. JSX Ç¥Çö½Ä
C04Àå : ÄÄÆ÷³ÍÆ®¿Í Props
___1. ÄÄÆ÷³ÍÆ®¶õ?
___2. ÇÔ¼öÇü ¹× Ŭ·¡½º ÄÄÆ÷³ÍÆ® »ý¼ºÇϱâ
___3. Props¿Í ±× »ç¿ë¹ý
___4. Prop ŸÀÔ°ú defaultProps
C05Àå : »óÅÂ¿Í ¶óÀÌÇÁ»çÀÌŬ
___1. state ÀÌÇØÇϱâ
___2. setState ¸Þ¼­µå
___3. ¶óÀÌÇÁ»çÀÌŬ ¸Þ¼­µå
C06Àå : À̺¥Æ® ó¸®Çϱâ
___1. ¸®¾×Æ®ÀÇ À̺¥Æ® ó¸®
___2. ÇÕ¼º À̺¥Æ®
___3. this ¹ÙÀεù
C07Àå : ¸®½ºÆ®¿Í Å°
___1. mapÀ¸·Î ¸®½ºÆ® ·»´õ¸µÇϱâ
___2. Å°¿Í Å°ÀÇ Á߿伺
___3. ÄÄÆ÷³ÍÆ® ÃßÃâÇϱâ
C08Àå : Æû°ú Á¦¾î ÄÄÆ÷³ÍÆ®
___1. ¸®¾×Æ®¿¡¼­ Æû µ¥ÀÌÅÍ Ã³¸®Çϱâ
___2. Á¦¾î ÄÄÆ÷³ÍÆ®
___3. ºñÁ¦¾î ÄÄÆ÷³ÍÆ®
C09Àå : ¸®¾×Æ® ¶ó¿ìÅÍ
___1. ¸®¾×Æ® ¶ó¿ìÅÍ ¼³Á¤Çϱâ
___2. ±âº» ¶ó¿ìÆÃ
___3. °æ·Î ¸Å°³º¯¼ö
C10Àå : Redux
___1. Redux ¼Ò°³
___2. ½ºÅä¾î, ¾×¼Ç ¹× ¸®µà¼­
___3. ¸®¾×Æ®¿Í Redux ¿¬°áÇϱâ
___4. Redux Thunk¿Í ¹Ìµé¿þ¾î
C11Àå : ¸®¾×Æ® ¾ÖÇø®ÄÉÀÌ¼Ç Å×½ºÆ®Çϱâ
___1. Jest¿Í Enzyme
___2. ÄÄÆ÷³ÍÆ® Å×½ºÆ®
___3. ½º³À¼¦ Å×½ºÆ®
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 ¹®Á¦ ÇØ°á ¹× µð¹ö±ë