ÄÁÅÙÃ÷»ó¼¼º¸±â

React.js, ½ºÇÁ¸µ ºÎÆ®, AWS·Î ¹è¿ì´Â À¥ °³¹ß 101 : SPA, REST API ±â¹Ý À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
React.js, ½ºÇÁ¸µ ºÎÆ®, AWS·Î ¹è¿ì´Â À¥ °³¹ß 101 : SPA, REST API ±â¹Ý À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß
  • ÆòÁ¡ÆòÁ¡Á¡Æò°¡¾øÀ½
  • ÀúÀÚ<±è´ÙÁ¤> Àú
  • ÃâÆǻ翡ÀÌÄÜÃâÆÇ»ç
  • ÃâÆÇÀÏ2021-12-10
  • µî·ÏÀÏ2022-05-31
º¸À¯ 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 ¸ÞÀΠ¸Þ¼­µå¿Í @SpringBootApplication
2.1.7 ºôµå ÀÚµ¿È­ Åø: Gradle°ú ¶óÀ̺귯¸®
2.1.8 µðÆæ´ø½Ã ¶óÀ̺귯¸® Ãß°¡
2.1.9 ·Òº¹
2.1.10 Æ÷½ºÆ®¸Ç API Å×½ºÆ®
2.1.11 Á¤¸®
2.2 ¹é¿£µå ¼­ºñ½º ¾ÆÅ°ÅØó
2.2.1 ·¹À̾îµå ¾ÆÅ°ÅØó
2.2.2 ¸ðµ¨, ¿£Æ¼Æ¼, DTO
2.2.3 REST API
2.2.4 ÄÁÆ®·Ñ·¯ ·¹À̾î : ½ºÇÁ¸µ REST API ÄÁÆ®·Ñ·¯
2.2.5 ¼­ºñ½º ·¹À̾î : ºñÁî´Ï½º ·ÎÁ÷
2.2.6 Æ۽ýºÅϽº ·¹À̾î : ½ºÇÁ¸µ µ¥ÀÌÅÍ JPA
2.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 Node
3.1.2 ºñÁ־󠽺Ʃµð¿À Äڵ堼³Ä¡
3.1.3 ÇÁ·ÐÆ®¿£µå ¾ÖÇø®ÄÉÀ̼Ǡ»ý¼º
3.1.4 material-ui ÆÐÅ°Áö ¼³Ä¡
3.1.5 ºê¶ó¿ìÀúÀÇ ÀÛµ¿ ¿ø¸®
3.1.6 React
3.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 componentDidMount
3.3.2 CORS
3.3.3 fetch
3.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 UserEntity
4.2.2 UserRepository
4.2.3 UserService
4.2.4 UserController
4.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-dom
5.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 EC2
6.1.2 ¶ó¿ìÆ® 53 - DNS
6.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 Á¤¸®
¸ÎÀ½¸»

ÇÑÁÙ ¼­Æò