React.js, ½ºÇÁ¸µ ºÎÆ®, AWS·Î ¹è¿ì´Â À¥ °³¹ß 101
- ÀúÀÚ<±è´ÙÁ¤> Àú
- ÃâÆǻ翡ÀÌÄÜÃâÆÇ»ç
- ÃâÆÇÀÏ2021-12-10
- µî·ÏÀÏ2022-06-21
º¸À¯ 1, ´ëÃâ 0,
¿¹¾à 0, ´©Àû´ëÃâ 0, ´©Àû¿¹¾à 0
Ã¥¼Ò°³
´Ù¼öÀÇ »ç¿ëÀÚ¸¦ Áö¿øÇÏ´Â Todo À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ°í ¹èÆ÷ÇÑ´Ù. ¶ÇÇÑ ÇöÀå¿¡¼ ¸¹ÀÌ »ç¿ëÇÏ´Â ÇÁ·ÐÆ®¿£µå¿Í ¹é¿£µå ¼¹ö°¡ ºÐ¸®µÈ ¾ÆÅ°ÅØó(Decoupled Architecture)±¸ÇöÇÑ´Ù. ¶ÇÇÑ ¹èÆ÷ ½Ã ´Ü¼øÈ÷ ·ÎÄÃȯ°æÀ̳ª ÀÓ½ÃÀÇ HTTP ¼¹ö·Î ¹èÆ÷ÇÏ´Â µ¥ ±×Ä¡Áö ¾Ê°í, HTTPS ÀÎÁõ¼ ¼³Á¤, ·Îµå¹ß¶õ¼, ¿ÀÅ佺ÄÉÀϸµ ±×·ì µî AWS Ŭ¶ó¿ìµå ¼ºñ½º¸¦ »ç¿ëÇØ ½ÇÁ¦ ¼ºñ½º ¿î¿µ¿¡ ÇÊ¿äÇÑ ¹èÆ÷, ½ºÄÉÀϸµ ±â¼úÀ» Àü´ÞÇÑ´Ù. ÀÌ Ã¥À» ÅëÇØ ½ºÇÁ¸µºÎÆ®¿Í ¸®¾×Æ®¸¦ ÀÌ¿ëÇØ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ¸é¼ È®Àå °¡´ÉÇÑ ¾ÆÅ°ÅØó¸¦ ±¸ÃàÇÏ°í ¿î¿µÇØ º¼ ¼ö ÀÖ´Ù.
ÀúÀÚ¼Ò°³
°Ç±¹´ëÇб³ ÄÄÇ»ÅÍ °øÇкθ¦ Á¹¾÷ÇÑ ÈÄ ¹Ì±¹ LA¿¡¼ À¥ °³¹ßÀ» ½ÃÀÛÇß´Ù. ÇöÀç´Â ¾Æ¸¶Á¸ À¥ ¼ºñ½º¿¡¼ ¼¹ö¸®½º ¼ºñ½º¸¦ ±¸ÇöÇÏ´Â ºÐ»ê ½Ã½ºÅÛÀ» °³¹ßÇÏ°í ÀÖ´Ù. ¿©°¡ ½Ã°£¿¡´Â ºí·Î±× »ß¸á ¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾î¸µ(http://cselabnotes.com/kr/)À» ÅëÇØ °³¹ß¿¡ °ü·ÃµÈ ¿©·¯ °¡Áö ¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾î¸µ °ü·Ã ±â¼ú°ú Áö½ÄÀ» ³ª´©°í ÀÖ´Ù.
¸ñÂ÷
1Àå. °³¹ßÀ» ½ÃÀÛÇϱâ Àü¿¡1.1 Todo À¥ ¾ÖÇø®ÄÉÀÌ¼Ç 1.1.1 Todo À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ±â´É1.1.2 Todo À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ¾ÆÅ°ÅØó1.1.3 ±â¼ú°ú ±¸Çö »çÀÌ1.1.4 Á¤¸®1.2 ¹è°æ Áö½Ä1.2.1 ÇÏÀÌÆÛÅؽºÆ® Æ®·£½ºÆÛ ÇÁ·ÎÅäÄÝ1.2.2 ÀÚ¹Ù½ºÅ©¸³Æ® ¿ÀºêÁ§Æ® ³ëÅ×À̼Ç1.2.3 ¼¹ö¶õ?1.2.4 Á¤Àû À¥ ¼¹ö1.2.5 µ¿Àû À¥ ¼¹ö1.2.6 ÀÚ¹Ù ¼ºí¸´ ÄÁÅ×À̳Ê/¿£Áø1.2.7 Á¤¸®
2Àå. ¹é¿£µå °³¹ß2.1 ¹é¿£µå °³¹ß ȯ°æ ¼³Á¤2.1.1 ÀÚ¹Ù 8 ¼³Ä¡2.1.2 ÀÌŬ¸³½º ¼³Ä¡2.1.3 ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©¿Í ÀÇÁ¸¼º ÁÖÀÔ2.1.4 ½ºÇÁ¸µ ÇÁ·¹ÀÓ¿öÅ©¿Í µð½ºÆÐó ¼ºí¸´(ÁßÁ¦¸ñ)2.1.5 ½ºÇÁ¸µ ºÎÆ® ÇÁ·ÎÁ§Æ® ¼³Á¤2.1.6 ¸ÞÀÎ ¸Þ¼µå¿Í @SpringBootApplication2.1.7 ºôµå ÀÚµ¿È Åø: Gradle°ú ¶óÀ̺귯¸®2.1.8 µðÆæ´ø½Ã ¶óÀ̺귯¸® Ãß°¡2.1.9 ·Òº¹2.1.10 Æ÷½ºÆ®¸Ç API Å×½ºÆ®2.1.11 Á¤¸®2.2 ¹é¿£µå ¼ºñ½º ¾ÆÅ°ÅØó2.2.1 ·¹À̾îµå ¾ÆÅ°ÅØó2.2.2 ¸ðµ¨, ¿£Æ¼Æ¼, DTO2.2.3 REST API2.2.4 ÄÁÆ®·Ñ·¯ ·¹À̾î : ½ºÇÁ¸µ REST API ÄÁÆ®·Ñ·¯2.2.5 ¼ºñ½º ·¹À̾î : ºñÁî´Ï½º ·ÎÁ÷2.2.6 Æ۽ýºÅϽº ·¹À̾î : ½ºÇÁ¸µ µ¥ÀÌÅÍ JPA2.2.7 Á¤¸®2.3 ¼ºñ½º °³¹ß ¹× ½Ç½À2.3.1 Create Todo ±¸Çö2.3.2 Retrieve Todo ±¸Çö2.3.3 Update Todo ±¸Çö2.3.4 Delete Todo ±¸Çö2.3.5 Á¤¸®
3Àå. ÇÁ·ÐÆ®¿£µå °³¹ß3.1 ÇÁ·ÐÆ®¿£µå °³¹ß ȯ°æ ¼³Á¤3.1.1 Node3.1.2 ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡3.1.3 ÇÁ·ÐÆ®¿£µå ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º3.1.4 material-ui ÆÐÅ°Áö ¼³Ä¡3.1.5 ºê¶ó¿ìÀúÀÇ ÀÛµ¿ ¿ø¸®3.1.6 React3.1.7 Á¤¸®3.2 ÇÁ·ÐÆ®¿£µå ¼ºñ½º °³¹ß3.2.1 Todo ¸®½ºÆ®3.2.2 Todo Ãß°¡3.2.3 Todo »èÁ¦3.2.4 Todo ¼öÁ¤3.2.5 Á¤¸®3.3 ¼ºñ½º ÅëÇÕ3.3.1 componentDidMount3.3.2 CORS3.3.3 fetch3.3.4 Á¤¸®
4Àå. ÀÎÁõ ¹é¿£µå ÅëÇÕ4.1 REST API ÀÎÁõ ±â¹ý4.1.1 Basic ÀÎÁõ4.1.2 ÅäÅ« ±â¹Ý ÀÎÁõ4.1.3 JSON À¥ ÅäÅ«4.1.4 Á¤¸®4.2 User ·¹ÀÌ¾î ±¸Çö4.2.1 UserEntity4.2.2 UserRepository4.2.3 UserService4.2.4 UserController4.2.5 Á¤¸®4.3 ½ºÇÁ¸µ ½ÃÅ¥¸®Æ¼ ÅëÇÕ4.3.1 JWT »ý¼º ¹× ¹Ýȯ ±¸Çö4.3.2 ½ºÇÁ¸µ ½ÃÅ¥¸®Æ¼¿Í ¼ºí¸´ ÇÊÅÍ4.3.3 JWT¸¦ ÀÌ¿ëÇÑ ÀÎÁõ ±¸Çö4.3.4 ½ºÇÁ¸µ ½ÃÅ¥¸®Æ¼ ¼³Á¤4.3.5 TodoController¿¡¼ ÀÎÁõµÈ À¯Àú »ç¿ëÇϱâ4.3.6 Æнº¿öµå ¾ÏÈ£È4.3.7 Á¤¸®
5Àå. ÀÎÁõ ÇÁ·ÐÆ®¿£µå ÅëÇÕ5.1 ¶ó¿ìÆÃ5.1.1 react-router-dom5.1.2 react-router-dom ¶óÀ̺귯¸®°¡ ÇÊ¿äÇÑ ÀÌÀ¯5.1.3 ·Î±×ÀÎ ÄÄÆ÷³ÍÆ®5.1.4 Á¢±Ù °ÅºÎ ½Ã ·Î±×ÀÎ ÆäÀÌÁö·Î ¶ó¿ìÆÃÇϱâ5.1.5 Á¤¸®5.2 ·Î±×ÀÎ ÆäÀÌÁö5.2.1 ·Î±×ÀÎÀ» À§ÇÑ API ¼ºñ½º ¸Þ¼µå ÀÛ¼º5.2.2 ·Î±×Àο¡ ¼º°ø5.2.3 Á¤¸®5.3 ·ÎÄà ½ºÅ丮Áö¸¦ ÀÌ¿ëÇÑ ¾×¼¼½º ÅäÅ« °ü¸®5.3.1 ·ÎÄà ½ºÅ丮Áö5.3.2 ¾×¼¼½º ÅäÅ« ÀúÀå5.3.3 Á¤¸®5.4 ·Î±×¾Æ¿ô°ú ±Û¸®Ä¡ ÇØ°á5.4.1 ·Î±×¾Æ¿ô ¼ºñ½º5.4.2 ³×ºñ°ÔÀÌ¼Ç ¹Ù¿Í ·Î±×¾Æ¿ô5.4.3 UI ±Û¸®Ä¡ ÇØ°á5.4.4 Á¤¸®5.5 °èÁ¤ »ý¼º ÆäÀÌÁö5.5.1 °èÁ¤ »ý¼º ·ÎÁ÷5.5.2 Á¤¸®
6Àå. ÇÁ·Î´ö¼Ç ¹èÆ÷6.1 ¼ºñ½º ¾ÆÅ°ÅØó6.1.1 EC26.1.2 ¶ó¿ìÆ® 53 - DNS6.1.3 ¾ÖÇø®ÄÉÀÌ¼Ç ·Îµå¹ë·±¼6.1.4 ¿ÀÅä ½ºÄÉÀϸµ ±×·ì6.1.5 VPC¿Í ¼ºê³Ý6.1.6 À϶ó½ºÆ½ ºó½ºÅå6.1.7 Á¤¸®6.2 AWS CLI¿Í EB CLI ¼³Ä¡6.2.1 AWS °èÁ¤ »ý¼º6.2.2 ÆÄÀ̽㠼³Ä¡6.2.3 AWS CLI ¼³Ä¡6.2.4 AWS CLI ¼³Á¤6.2.5 pipÀ» ÀÌ¿ëÇØ EB CLI ¼³Ä¡6.2.6 À©µµ¿ì »ç¿ëÀÚ¸¦ À§ÇÑ È¯°æ º¯¼ö ¼³Á¤6.2.7 Á¤¸®6.3 AWS À϶ó½ºÆ½ ºó½ºÅåÀ» ÀÌ¿ëÇÑ ¹é¿£µå ¹èÆ÷6.3.1 À϶ó½ºÆ½ ºó½ºÅåÀ̶õ?6.3.2 eb initÀ» ÀÌ¿ëÇØ ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º6.3.3 ¹é¿£µå ¾ÖÇø®ÄÉÀÌ¼Ç ¼³Á¤6.3.4 eb create¸¦ ÀÌ¿ëÇØ AWS¿¡ ȯ°æ »ý¼º6.3.5 ¾ÖÇø®ÄÉÀÌ¼Ç ¹èÆ÷6.3.6 ȯ°æ ±¸¼º6.3.7 ¿£µåÆ÷ÀÎÆ® Å×½ºÆÃ6.3.8 ÇÁ·ÐÆ®¿£µå ÅëÇÕ Å×½ºÆÃ6.3.9 Á¤¸®6.4 AWS À϶ó½ºÆ½ ºó½ºÅåÀ» ÀÌ¿ëÇÑ ÇÁ·ÐÆ®¿£µå ¹èÆ÷6.4.1 eb initÀ» ÀÌ¿ëÇØ ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼º6.4.2 eb create¸¦ ÀÌ¿ëÇÑ ¾ÖÇø®ÄÉÀÌ¼Ç ¹èÆ÷6.4.3 Å©·Î½º-¿À¸®Áø ¹®Á¦6.4.4 Á¤¸®6.5 Route53 µµ¸ÞÀÎ ¼³Á¤6.5.1 µµ¸ÞÀÎ ±¸¸Å6.5.2 È£½ºÆà ¿µ¿ª »ý¼º6.5.3 ¹é¿£µå Àç¹èÆ÷6.5.4 ÇÁ·ÐÆ®¿£µå Àç¹èÆ÷6.5.5 Á¤¸®6.6 ¹é¿£µå/ÇÁ·ÐÆ®¿£µå AWS Certificate Manager¸¦ ÀÌ¿ëÇÑ https ¼³Á¤6.6.1 ÀÎÁõ¼ ¿äû6.6.2 ¹é¿£µå ¾ÖÇø®ÄÉÀÌ¼Ç HTTPS¼³Á¤6.6.3 ÇÁ·ÐÆ®¿£µå ¾ÖÇø®ÄÉÀÌ¼Ç HTTPS ¼³Á¤6.6.4 Á¤¸®¸ÎÀ½¸»
ÇÑÁÙ ¼Æò