ÀÌ Ã¥À» ½ÅûÇÑ ÀÌÀ¯
ȸ»ç¿¡¼ Vue.js + Spring Boot ÇÁ·ÎÁ§Æ®¸¦ ¸¹ÀÌ ÁøÇàÇß¾ú´Ù. ÇÁ·ÐÆ®¿¡¼´Â ¹é¿£µå¿¡ HTTP API ¿äûÇϰí ÀÀ´äÀ» ¹Þ¾Æ µ¥ÀÌÅ͸¦ ȸ鿡 º¸¿©ÁÖ´Â ±¸Á¶¿´´Ù. REST API ´Â ¿äûÇÏ´Â ÇÔ¼ö GET, POST, PATCH, PUT, DELETE µî Method¿Í URLÀ» Á¶ÇÕÇÏ¿© ¿©·¯ °³ÀÇ ¿£µåÆ÷ÀÎÆ®°¡ ÀÖ¾î ±× ¿£µåÆ÷ÀÎÆ® ¸¶´Ù DB SQLÄõ¸®°¡ ´Þ¶óÁø´Ù.
ÀÌ¿Í ´Þ¸®, À¥ Ŭ¶óÀÌ¾ðÆ®°¡ µ¥ÀÌÅ͸¦ ¼¹ö·Î ºÎÅÍ È¿À²ÀûÀ¸·Î °¡Á®¿À´Â °ÍÀÌ ¸ñÀûÀ̶ó´Â GraphQL Àº ºÒ·¯¿À°íÀÚ ÇÏ´Â µ¥ÀÌÅÍÀÇ Á¾·ù¸¦ Äõ¸® Á¶ÇÕÀ» ÅëÇØ °áÁ¤ÇÑ´Ù°í ÇÑ´Ù. ÇÁ·ÐÆ®¿£µå¸¦ 40% °çµéÀÎ ¹é¿£µå °³¹ßÀڷνá ÇÁ·ÐÆ®°¡ µ¥ÀÌÅ͸¦ È¿À²ÀûÀ¸·Î °¡Á®¿À´Â ºÎºÐ¿¡ °ü½ÉÀÌ ÀÖ¾ú°í ´õ ¾Ë°í ½Í¾î "GraphQL in Action" Ã¥À» ÀÐ¾î º¸°íÀÚ Çß´Ù.
¸ñÂ÷ ¹× ±¸¼º
ÃÑ ¼¼ ÆÄÆ®·Î ³ª´²Á® ÀÖ´Ù
1. GraphQL ÀÌ ¾î¶² ¹®Á¦¸¦ ÇØ°áÇØ ÁÖ´ÂÁö, ¼³°è ÄÁ¼Á, °£´ÜÇÑ ¿äû Å×½ºÆ®¿Í ±âº» ³»Àå ±â´É¿¡ ´ëÇÑ ¼Ò°³
2. È¿À²ÀûÀÎ GraphQL API ¼ºñ½º¸¦ ¸¸µé±â À§ÇÑ ±â¼úÀ» ±í°Ô ´Ù·é´Ù
- GraphQL ½ºÅ°¸¶ ¼³°è
- API Äõ¸®¸¦ ±¸ÇöÇϱâ À§Çؼ µ¥ÀÌÅͺ£À̽º ÇÊµå ¿¬µ¿ÇÏ´Â ¹æ¹ý
- GraphQL Äõ¸® ÃÖÀûÈ ¹æ¹ý
- DB °³Ã¼ »ý¼º, ¸é°æ, »èÁ¦Çϱâ À§ÇÑ API º¯°æ ó¸®
3. GraphQL API¸¦ ÇÁ·ÐÆ® ¿£µå À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡ Àû¿ëÇÏ´Â ¹æ¹ý
»ó¼¼ ¸ñÂ÷ ´ÙÀ½°ú °°´Ù
1ºÎ ±×·¡ÇÁQL °æÇèÇØº¸±â
1Àå ±×·¡ÇÁQL ¼Ò°³
1.1 ±×·¡ÇÁQLÀ̶õ?
1.2 ¿Ö ±×·¡ÇÁQLÀΰ¡?
1.3 ±×·¡ÇÁQLÀÇ ¹®Á¦Á¡
2Àå ±×·¡ÇÁQL API
2.1 ±×·¡ÇÇÄà ÆíÁý±â
2.2 ±âÃÊ ±×·¡ÇÁQL ¾ð¾î
2.3 ±êÇãºê API ¿¹Á¦
3Àå ±×·¡ÇÁQL ÀÛ¾÷ ¼öÁ¤ ¹× ±¸¼º
3.1 Àμö¸¦ »ç¿ëÇØ¼ ÇÊµå º¯°æÇϱâ
3.2 º°ÄªÀ» »ç¿ëÇØ¼ Çʵå À̸§ º¯°æÇϱâ
3.3 Áö½Ã¹®À» »ç¿ëÇÑ ÀÀ´ä º¯°æ
3.4 ±×·¡ÇÁQL Á¶°¢
2ºÎ ±×·¡ÇÁQL API ÀÛ¼º¹ý
4Àå ±×·¡ÇÁQL ½ºÅ°¸¶ ¼³°è
4.1 AZdev°¡ ÇÊ¿äÇÑ ÀÌÀ¯
4.2 AZdev¿ë API ¿ä°Ç
4.3 Äõ¸®
4.4 º¯°æ
4.5 ±¸µ¶
4.6 Àüü ½ºÅ°¸¶ ÅØ½ºÆ®
4.7 µ¥ÀÌÅͺ£À̽º ¸ðµ¨ ¼³°èÇϱâ
5Àå ½ºÅ°¸¶ ¸®Á¹¹ö ±¸Çö
5.1 °³¹ß ȯ°æ ½ÇÇàÇϱâ
5.2 ±×·¡ÇÁQL ·±Å¸ÀÓ ¼³Á¤Çϱâ
5.3 http Åë½Å
5.4 »ý¼ºÀÚ °´Ã¼¸¦ »ç¿ëÇÑ ½ºÅ°¸¶ »ý¼º
5.5 °´Ã¼ ±â¹Ý ½ºÅ°¸¶·ÎºÎÅÍ SDL ÅØ½ºÆ® »ý¼ºÇϱâ
5.6 ºñµ¿±â½Ä ÇÔ¼ö »ç¿ëÇϱâ
6Àå µ¥ÀÌÅͺ£À̽º ¸ðµ¨°ú °ü°è »ç¿ë
6.1 µ¥ÀÌÅͺ£À̽º ½ÇÇà ¹× ¿¬°áÇϱâ
6.2 taskMainList Äõ¸®
6.3 ¿À·ù º¸°í
6.4 °ü°è ¸®Á¹ºêÇϱâ
7Àå µ¥ÀÌÅÍ ÃßÃâ ÀÛ¾÷ ÃÖÀûÈ
7.1 ij½Ã ¹× Àϰý ó¸®
7.2 ´ÜÀÏ ¸®¼Ò½º Çʵå
7.3 ±×·¡ÇÁQL ŸÀÔÀÇ ¼øÈ¯ ÀÇÁ¸¼º
7.4 µ¥ÀÌÅͷδõ¿Í »ç¿ëÀÚ ÁöÁ¤ ID ij½Ã »ç¿ëÇϱâ
7.5 µ¥ÀÌÅͷδõ¿Í ¸ù°íDB »ç¿ëÇϱâ
8Àå º¯°æ ÀÛ¾÷ÀÇ ±¸Çö
8.1 º¯°æ ÄÁÅØ½ºÆ® °´Ã¼
8.2 º¯°æ ŸÀÔ
8.3 »ç¿ëÀÚ º¯°æ ÀÛ¾÷
8.4 API »ç¿ëÀÚ ÀÎÁõÇϱâ
8.5 ŽºÅ© ¸ðµ¨¿ë º¯°æ ÀÛ¾÷
8.6 Á¢±Ù¹ý ¸ðµ¨¿ë º¯°æ ÀÛ¾÷
8.7 userDelete º¯°æ ÀÛ¾÷
3ºÎ ±×·¡ÇÁQL API »ç¿ë¹ý
9Àå ¶óÀ̺귯¸®¸¦ ¾²Áö ¾Ê´Â ±×·¡ÇÁQL API »ç¿ë¹ý
9.1 À¥ UI ¶óÀ̺귯¸® »ç¿ëÇϱâ
9.2 À¥ ¼¹ö ½ÇÇàÇϱâ
9.3 Ajax ¿äû ¸¸µé±â
9.4 ±×·¡ÇÁQL Äõ¸® ¿äû ¸¸µé±â
9.5 ±×·¡ÇÁQL º¯°æ ¿äû ¸¸µé±â
9.6 ƯÁ¤ »ç¿ëÀÚ¿¡°Ô ¼ÓÇÑ Äõ¸® ¿äû ¸¸µé±â
9.7 ³²Àº °úÁ¦
10Àå ¾ÆÆú·Î Ŭ¶óÀÌ¾ðÆ®¸¦ ÅëÇÑ ±×·¡ÇÁQL API »ç¿ë¹ý
10.1 ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ ¾ÆÆú·Î Ŭ¶óÀÌ¾ðÆ® »ç¿ëÇϱâ
10.2 ¸®¾×Æ®¿¡¼ ¾ÆÆú·Î Ŭ¶óÀÌ¾ðÆ® »ç¿ëÇϱâ
10.3 ·ÎÄà ¾Û »óÅ °ü¸®Çϱâ
10.4 ±×·¡ÇÁQL ±¸µ¶ ±¸Çö ¹× »ç¿ë
³»¿ë
GraphQL À̶õ
GraphQLÀ» ¼±ÅÃÇÏ´Â °¡Àå Áß¿äÇÑ ±â¼úÀû ÀÌÀ¯´Â È¿À²¼ºÀÌ´Ù. ¾Æ·¡ ±×¸²°ú °°ÀÌ API Ŭ¶óÀÌ¾ðÆ®´Â Á¾Á¾ ¼¹ö¿¡°Ô ¿©·¯ ¸®¼Ò½º¸¦ ¿äÃ»ÇØ¾ß ÇÏÁö¸¸ API¼¹ö´Â º¸Åë ÇϳªÀÇ ¸®¼Ò½º¸¸ ÀÀ´äÇÏ´Â ¹æ¹ýÀ» ¾È´Ù. °á°úÀûÀ¸·Î ÇÊ¿äÇÑ ¸ðµç µ¥ÀÌÅ͸¦ ¾ò±â À§Çؼ± Ŭ¶óÀÌ¾ðÆ®°¡ ¼¹ö¿¡°Ô ¿©·¯ ¹ø ¿äûÇÏ°Ô µÈ´Ù.
±×·¡ÇÁQLÀº ÀÌ·± ´ÙÁß ¿äûÀÇ º¹À⼺À» ¹é¿£µå¿¡ ºÎ´ã½ÃÄѼ ±×·¡ÇÁQL ·±Å¸ÀÓÀÌ Ã³¸®Çϵµ·Ï ¸¸µç´Ù. Ŭ¶óÀÌ¾ðÆ®°¡ ±×·¡ÇÁ QL¼ºñ½º·Î ÇϳªÀÇ Áú¹®À» ´øÁö¸é, ¼ºñ½º´Â ÇÊ¿äÇÑ Á¤º¸¸¦ Á¤È®ÇÏ°Ô ÇϳªÀÇ µî´ä¿¡ ´ã¾Æ¼ ¹ÝȯÇÑ´Ù.

¿¹½Ã
- ´Ü¼øÈÇÑ Äõ¸® ÅØ½ºÆ® ¿¹Á¦
query{ employee(id: 42){ name email } }
- GraphQL ÀÀ´ä °´Ã¼ÀÇ ¿¹
{ data:{ employee:{ name: 'Jane Doe' email: 'jane@doe.name' } } }
REST API¿Í ºñ±³
REST API °¡ °¡Áø °¡Àå Å« ¹®Á¦Á¡Àº Ŭ¶óÀÌ¾ðÆ®°¡ ¿©·¯ °³ÀÇ µ¥ÀÌÅÍ API ¿£µåÆ÷ÀÎÆ®¿Í Ä¿¹Â´ÏÄÉÀÌ¼Ç ÇÑ´Ù´Â °ÍÀÌ´Ù. REST API´Â Ŭ¶óÀÌ¾ðÆ®°¡ µ¥ÀÌÅ͸¦ ¹Þ±â À§Çؼ ³×Æ®¿öÅ©¸¦ ¿©·¯ ¹ø ¿Õº¹ÇØ¾ß ÇÑ´Ù.
REST API¿¡´Â Ŭ¶óÀÌ¾ðÆ®¿ë ¿äû ¾ð¾î°¡ ¾ø´Ù. Ŭ¶óÀÌ¾ðÆ®°¡ ¼¹ö¿¡ ¹«¾ùÀ» ¿øÇÏ´ÂÁö Á¤È®ÇÏ°Ô ¾Ë¸± ¼ö ÀÖ´Â ¾ð¾î°¡ ¾øÀ¸¹Ç·Î ¼¹ö°¡ ¹ÝȯÇÏ´Â µ¥ÀÌÅ͸¦ Á¦¾îÇÒ ¼ö°¡ ¾ø´Ù. Á¤È®ÇÏ°Ô ¸»Çϸé ÀÖ±ä ÇÏÁö¸¸ ¸Å¿ì Á¦ÇÑµÈ ¾ð¾î¸¸ »ç¿ëÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¸é, REST API ¿¡¼ µ¥ÀÌÅ͸¦ ÀÐÀ¸·Á¸é GET /ResourceName Çü½ÄÀ¸·Î ¸®¼Ò½ºÀÇ Àüü µ¥ÀÌÅ͸¦ ÀÐ¾î µéÀ̰ųª, GET /ResourceName/RecourceID Çü½ÄÀ¸·Î ÁöÁ¤ÇÑ IDÀÇ ´ÜÀÏ µ¥ÀÌÅ͸¸ Àоî¾ß ÇÑ´Ù.
ÀÌ·¸°Ô °øºÎÇϸé ÁÁÀ» °Í °°´Ù
Ã¥ÀÇ ¼ø¼°¡ 1Àå¿¡ °³³ä ¹× ±âÃʸ¦ ´Ù·ç°í 2, 3ÀåºÎÅÍ ±â¼úÀ» »ó¼¼ÇÏ°Ô ´Ù·ç¸ç ½ÇÁ¦ Àû¿ëÀ» ÇØ º¼ ¼ö ÀÖ´Ù. ¾Õ¿¡¼ ºÎÅÍ Á¤µ¶ÇÏ¸é µÉ °Í °°´Ù. µµÄ¿ ÆÄÀϰú ±êÇé¿¡ Äڵ嵵 Á¦°øÇÑ´Ù.
´ë»ó µ¶ÀÚ
- API¸¦ »ç¿ëÇØ °á°ú¹°À» ¸¸´Ù´Â ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ
- API¸¦ »ç¿ëÇÏ´Â ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ¿Í È¿À²ÀûÀÎ µ¥ÀÌÅÍ API¸¦ ¸¸µé¾î¾ß ÇÏ´Â ¹é¿£µå °³¹ßÀÚ
- ¾î´À Á¤µµ ÇÁ·Î±×·¡¹Ö¿¡ ´ëÇÑ ±âº»ÀûÀÎ Áö½Ä°ú ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇÑ ±âÃÊ Áö½ÄÀÌ ÀÖ´Â ºÐ
- PostgreSQL, MongoDB °æÇèÀÌ ÀÖ´Ù¸é µµ¿òÀÌ µÊ
ÀÌ Ã¥À» Àаí
½Ç¹«¿¡¼ API ¸¦ ¸¸µé ¶§ ÇϳªÀÇ GET ÇÔ¼ö¿¡¼ field¸¦ Ŭ¶óÀÌ¾ðÆ®¿¡¼ Á¤ÀÇÇÏ¿© ¿äûÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀº ¾ø´Â°¡ °í¹ÎÇÑ ÀûÀÌ ÀÖ¾ú´Ù. ¿¹¸¦ µé¾î, getUser ÇÔ¼ö¿¡¼ UserÀÇ username°ú address ¸¸ °¡Á®¿À°í ½ÍÀ» ¶§°¡ ÀÖ°í, address ¸¸ °¡Á®¿À°í ½ÍÀ» ¶§°¡ ÀÖ¾ú´Âµ¥ ÀÌ·² ¶§ ¸¶´Ù ¿äû¿¡ ´ëÇÑ ÇÔ¼ö¸¦ ÀÏÀÏÈ÷ ¸¸µé¾î¾ß Çß´Ù. ÀÌ Ã¥À» Àаí graphQLÀÌ ÀÌ·¯ÇÑ ¹®Á¦¸¦ ÇØ°áÇØ ÁÙ ¼ö ÀÖ¾ú´Ù. »õ·Î¿î °³³äÀ» ¾Ë°Ô µÇ¾ú°í ½ÇÁ¦ Àû¿ëÇÒ ¼ö ÀÖ´Â °úÁ¤±îÁö źźÈ÷ ¾Ë ¼ö ÀÖ°Ô µÇ¾ú´Ù.
ÀÌ Ã¥ÀÇ ÀåÁ¡Àº ÃæºÐÇÑ ¿¹Á¦ ¿Í Âß Àбâ ÁÁÀº ±¸¼º ÀÎ °Í °°´Ù. ±×¸®°í graphQL ¿¡ ´ëÇØ ±íÀÌÀÖ°í ¾ËÂù ³»¿ë À» ¸ðµÎ ´Ù·ç°í ÀÖ¾î API ¸¦ »ç¿ëÇÏ´Â ¹é¿£µå ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ´Â ²À Àо±æ ÃßõÇÑ´Ù.
"ÇѺû¹Ìµð¾î <³ª´Â ¸®ºä¾î´Ù> Ȱµ¿À» À§Çؼ Ã¥À» Á¦°ø¹Þ¾Æ ÀÛ¼ºµÈ ¼ÆòÀÔ´Ï´Ù."
|