»ó¼¼Á¤º¸
Do it! ¸®¾×Æ® ¸ð´ø À¥ °³¹ß with ŸÀÔ½ºÅ©¸³Æ®
- ÀúÀÚ
- Àü¿¹È« Àú
- ÃâÆÇ»ç
- ÀÌÁö½ºÆÛºí¸®½Ì (ÁÖ)
- ÃâÆÇÀÏ
- 2023-01-09
- µî·ÏÀÏ
- 2023-08-25
- ÆÄÀÏÆ÷¸Ë
- PDF
- ÆÄÀÏÅ©±â
- 49MB
- °ø±Þ»ç
- YES24
- Áö¿ø±â±â
-
PC
PHONE
TABLET
À¥ºä¾î
ÇÁ·Î±×·¥ ¼öµ¿¼³Ä¡
ºä¾îÇÁ·Î±×·¥ ¼³Ä¡ ¾È³»
Ã¥¼Ò°³
¡°¸®¾×Æ® °³¹ßÀÚ¶ó¸é ÀÌ·¸°Ô ÄÚµùÇØ¾ß ÀÎÁ¤¹Þ½À´Ï´Ù.¡±
SPA¿Í REST API ¼¹ö¸¦ ¸¸µé¸é¼ ¸ð´ø À¥ °³¹ßÀ» ¹è¿î´Ù!
À¥ ÇÁ·±Æ®¿£µå °³¹ßÀÚ¸¦ ²Þ²Ù´Â ÀÌ¿¡°Ô ¸ð´ø À¥ °³¹ßÀÇ Æ®·»µå¸¦ ¾Ë·Á ÁØ´Ù. ¸¹Àº ±â¾÷¿¡¼ ¿ì´ëÇϴ ŸÀÔ½ºÅ©¸³Æ® ±â¹ÝÀÇ ¸®¾×Æ® ÇÁ·Î±×·¡¹ÖÀ¸·Î ¿äÁò ´ë¼¼·Î ¶°¿À¸¥ SPA(single page application)¿Í REST(representational state transfer) API ¼¹ö¸¦ ¸¸µç´Ù. ±× °úÁ¤¿¡¼ ¸®¾×Æ® ÈÅ°ú ¸®´ö½º, ¶ó¿ìÆÃÀº ¹°·Ð Å×ÀÏÀ©µåCSS·Î ÄÄÆ÷³ÍÆ® ½ºÅ¸Àϸµ±îÁö ½ÀµæÇÒ ¼ö ÀÖ´Ù. ¶ÇÇÑ ¿À·ù¸¦ ¸·°í ¼º´ÉÀ» ³ôÀÌ´Â ÃÖÀûÈ ±â¹ý°ú ±Û·Î¹ú ¼öÁØÀÇ Å¸ÀÔ½ºÅ©¸³Æ® ÄÚµå ÆÐÅϵµ ¿³º¼ ¼ö ÀÖ´Ù. Ã¥¿¡¼ ´Ù·é ³»¿ëÀ» Á¾ÇÕÇØ ¾÷¹« °ü¸® ¼ÒÇÁÆ®¿þ¾îÀÎ Æ®·¼·Î °°Àº ¾ÛÀ» ¸¸µé¾î º»´Ù.
¡Ø ÀÌ Ã¥Àº PDF ÇüÅ·ΠÁ¦°øÇϹǷΠȸéÀÌ ÀÛÀº ´Ü¸»±â(½º¸¶Æ®Æù)¿¡¼´Â º¸±â ºÒÆíÇÒ ¼ö ÀÖ½À´Ï´Ù. ¡Ø
ÀúÀÚ¼Ò°³
¿¬¼¼´ëÇб³ ÀüÀÚ°øÇаú(Çлç)¿Í Ä«À̽ºÆ® ÀüÀÚ°øÇаú(¼®»ç)¸¦ Á¹¾÷ÇÏ°í 1990³âºÎÅÍ Áö±Ý±îÁö 30³â µ¿¾È ÇÁ·Î±×·¡¹ÖÀ» °³¹ßÇØ ¿Ô´Ù. Çѱ¹ ¸¶ÀÌÅ©·Î¼ÒÇÁÆ®¿¡¼ ¼ö¼® °³¹ß ÄÁ¼³ÅÏÆ® ¸®µå(ADC Lead)·Î ±Ù¹«ÇßÀ¸¸ç, Node.js ȯ°æ¿¡¼ µ¿ÀÛÇÏ´Â ÇÁ·Î±×·¥ °³¹ß¿¡ ´ÉÅëÇÏ°í ƯÈ÷ ¸®¾×Æ®¿Í ¸®¾×Æ® ³×ÀÌƼºê, ¾Þ±Ö·¯ ÇÁ·¹ÀÓ¿öÅ©ÀÇ Àü¹®°¡´Ù. ±×µ¿¾È °³¹ßÇÑ Á¦Ç°À¸·Î ´ëÅë·É»ó 1ȸ, Á¤º¸Åë½ÅºÎ Àå°ü»ó 3ȸ ¼ö»óÇßÀ¸¸ç, ¾Æ½Ã¾Æ 100´ë º¸¾È ±â¾÷ Á¦Ç° °¡¿îµ¥ 1µîÀ¸·Î »ÌÇô ¸»·¹ÀÌ½Ã¾Æ ±¹¿ÕÀÌ ÁÖ´Â ´ë»óÀ» ¹Þ±âµµ Çß´Ù.
¸ñÂ÷
================
01 ¸®¾×Æ® °³¹ß Áغñ
================
01-1 ¸®¾×Æ® ÇÁ·¹ÀÓ¿öÅ© ÀÌÇØÇϱâ
01-2 À©µµ¿ì¿¡¼ ¸®¾×Æ® °³¹ß ȯ°æ ¸¸µé±â
01-3 macOS¿¡¼ ¸®¾×Æ® °³¹ß ȯ°æ ¸¸µé±â
01-4 VSCode °³¹ß ȯ°æ ¼³Á¤Çϱâ
01-5 ù ¹ø° ¸®¾×Æ® ÇÁ·ÎÁ§Æ® ¸¸µé±â
=================
02 ¸®¾×Æ® µ¿ÀÛ ¿ø¸®
=================
02-1 °¡»ó DOM ÀÌÇØÇϱâ
02-2 JSX ±¸¹® ÀÌÇØÇϱâ
02-3 ÄÄÆ÷³ÍÆ® ÀÌÇØÇϱâ
02-4 key¿Í children ¼Ó¼º ÀÌÇØÇϱâ
02-5 À̺¥Æ® ¼Ó¼º ÀÌÇØÇϱâ
======================
03 ÄÄÆ÷³ÍÆ® CSS ½ºÅ¸Àϸµ
======================
03-1 ¸®¾×Æ® ÄÄÆ÷³ÍÆ®ÀÇ CSS ½ºÅ¸Àϸµ
03-2 Å×ÀÏÀ©µåCSS ¸®¾×Æ® ÇÁ·ÎÁ§Æ® ¸¸µé±â
03-3 CSS »óÀÚ ¸ðµ¨ ÀÌÇØÇϱâ
03-4 Ç÷º½º ·¹À̾ƿô ÀÌÇØÇϱâ
03-5 daisyui CSS ÄÄÆ÷³ÍÆ® ÀÌÇØÇϱâ
========================
04 ÇÔ¼ö ÄÄÆ÷³ÍÆ®¿Í ¸®¾×Æ® ÈÅ
========================
04-1 óÀ½ ¸¸³ª´Â ¸®¾×Æ® ÈÅ
04-2 useMemo¿Í useCallback ÈÅ ÀÌÇØÇϱâ
04-3 useState ÈÅ ÀÌÇØÇϱâ
04-4 useEffect¿Í useLayoutEffect ÈÅ ÀÌÇØÇϱâ
04-5 useRef¿Í useImperativeHandle ÈÅ ÀÌÇØÇϱâ
04-6 useContext ÈÅ ÀÌÇØÇϱâ
========================
05 »óÅ °ü¸®¿Í ¸®´ö½º ÆÐÅ°Áö
========================
05-1 ¸®´ö½º ±âº» °³³ä ÀÌÇØÇϱâ
05-2 ¸®µà¼ È°¿ëÇϱâ
05-3 ¸®´ö½º ¹Ìµé¿þ¾î ÀÌÇØÇϱâ
05-4 Æ®·¼·Î µû¶ó ¸¸µé±â
===============
06 ¸®¾×Æ® ¶ó¿ìÅÍ
===============
06-1 óÀ½ ¸¸³ª´Â ¸®¾×Æ® ¶ó¿ìÅÍ
06-2 Outlet ÄÄÆ÷³ÍÆ®¿Í Áßø ¶ó¿ìÆÃ
06-3 °ø°³ ¶ó¿ìÆ®¿Í ºñ°ø°³ ¶ó¿ìÆ® ±¸ÇöÇϱâ
===================
07 ¸ù°íDB¿Í API ¼¹ö
===================
07-1 ¸ù°íDB ÀÌÇØÇϱâ
07-2 ÇÁ·Î±×·¡¹ÖÀ¸·Î ¸ù°íDB »ç¿ëÇϱâ
07-3 ÀͽºÇÁ·¹½º ÇÁ·¹ÀÓ¿öÅ©·Î API ¼¹ö ¸¸µé±â
07-4 JSON À¥ ÅäÅ«À¸·Î ȸ¿ø ÀÎÁõ ±â´É ±¸ÇöÇϱâ
ã¾Æº¸±â