๐Ÿ‘‰ REST API์™€ GRAPHQL ์ค‘ ์–ด๋Š ๊ฒƒ์ด ๋” ์ข‹์Šต๋‹ˆ๊นŒ? ๐Ÿค”

2342 ๋‹จ์–ด webdevrestapigraphqljavascript
๐Ÿ™‹โ€โ™‚๏ธ ์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„, ์ €๋Š” API๊ฐ€ ๋‘˜ ์ด์ƒ์ด๋ผ๋Š” ๋ง์„ ๋“ค์—ˆ์„ ๋•Œ ํ•ญ์ƒ ์•ฝ๊ฐ„์˜ ์˜๋ฌธ์ด ์žˆ์—ˆ๋Š”๋ฐ, GRAPHQL๊ณผ REST์— ๋Œ€ํ•ด ๋“ค์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๊ณ  ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹์€์ง€ ์˜๋ฌธ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ‘‰์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์–ด๋–ค๊ฒŒ ์ข‹์€์ง€ ๋ธŒ๋ฆฌํ•‘์„ ๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” REST API๋งŒ ์•Œ๊ณ  GRAPHQL์€ ๋ชฐ๋ผ์„œ ์ฐธ๊ณ ์ž๋ฃŒ๋ฅผ ๋ช‡๊ฐœ ์ฐธ๊ณ ํ•˜์—ฌ ์ด ํฌ์ŠคํŠธ๋ฅผ ์™„์„ฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ‘‰ REST API ๋Œ€ GRAPHQL

์–ด๋Š ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์€์ง€๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค

โœ๏ธ GraphQL์ด REST๋ณด๋‹ค ๋‚ซ๋‹ค

๐Ÿ‘จโ€๐Ÿ’ป GRAPHQL๊ณผ REST์˜ ์ฃผ์š” ์ฐจ์ด์ 

๐Ÿ‘‰ REST API๋Š” ๋„คํŠธ์›Œํฌ ๊ธฐ๋ฐ˜ ์†Œํ”„ํŠธ์›จ์–ด์˜ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— GraphQL์€ HTTP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ์ผ ๋์ ์—์„œ ์ž‘๋™ํ•˜๋Š” ์ฟผ๋ฆฌ ์–ธ์–ด, ์‚ฌ์–‘ ๋ฐ ๋„๊ตฌ ์ง‘ํ•ฉ์ž…๋‹ˆ๋‹ค.

๐Ÿ‘จโ€๐Ÿ’ป GraphQL์ด REST API๋ณด๋‹ค ๋‚˜์€ ์ 

๐Ÿ‘‰ REST API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ค๋ฉด ํ•ญ์ƒ ์™„์ „ํ•œ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋‘ ๊ฐœ์ฒด์—์„œ ์ •๋ณด๋ฅผ ์š”์ฒญํ•˜๋ ค๋ฉด ๋‘ ๊ฐœ์˜ REST API ์š”์ฒญ์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ดˆ๊ธฐ ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•˜๊ณ  /users/:userID์—์„œ ๊ฐ€์ ธ์™€์•ผ ํ•˜๊ณ  ๋‘ ๋ฒˆ์งธ๋กœ ํ•ด๋‹น ์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ ๊ฒŒ์‹œ๋ฌผ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•˜๋ฏ€๋กœ ๋‹ค๋ฅธ ๋์ ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. /users/:userID/posts .

๊ทธ๋ž˜์„œ ๋์ ์ด REST API์ผ ๋•Œ. ๋‘ ๊ฐœ์˜ HTTP GET ์š”์ฒญ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ (์ด ์˜ˆ์—์„œ๋Š” json ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค)

/users/:userID


{

         โ€œuserโ€:{

             โ€œidโ€:โ€user1โ€,

             โ€œfirstNameโ€:โ€rohanโ€,

              โ€œlastNameโ€:โ€devakiโ€

         }

}


๊ทธ๋ฆฌ๊ณ  ๋์ ์ด userID์ธ /users/:userID/posts์˜ ๊ฒŒ์‹œ๋ฌผ์— ๋Œ€ํ•œ ์š”์ฒญ์ด ํ•˜๋‚˜ ๋” ์žˆ์Šต๋‹ˆ๋‹ค.


 {

     โ€œpostsโ€: [{

         โ€œidโ€ :โ€post1โ€,

         โ€œtitleโ€: โ€œREST_vs_GRAPHQLโ€,

         โ€œcontentโ€:โ€graphql is better than RESTโ€

      }]

}


๋ฐ˜๋ฉด์— GRAPHQL์—์„œ๋Š” ๋ฐ์ดํ„ฐ ์š”๊ตฌ ์‚ฌํ•ญ์„ ํฌํ•จํ•˜๋Š” ์ฟผ๋ฆฌ๋ฅผ GRAPHQL ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ์„œ๋ฒ„๋Š” ์š”๊ตฌ ์‚ฌํ•ญ์ด ์ถฉ์กฑ๋˜๋Š” JSON ๊ฐœ์ฒด๋กœ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค.

Query{

  User(id:โ€user1โ€){

      Name

      Posts{

           Title     

      }

}


๐Ÿ‘‰ ๋”ฐ๋ผ์„œ ์ด๋ฅผ ํ†ตํ•ด GRAPHQL์ด ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•˜๋ฉฐ ํšจ์œจ์ ์ด๋ผ๋Š” ๊ฒƒ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด REST๋Š” ๊ทธ๋‹ค์ง€ ์œ ์—ฐํ•˜๊ณ  ๋น„ํšจ์œจ์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ‘‰ GRAPHQL์€ ์ฟผ๋ฆฌ์— ์‹ค์ œ๋กœ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— REST๋Š” ํ•„์š”ํ•˜์ง€ ์•Š์€ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

 ๐Ÿ‘จโ€๐Ÿ’ป  as in the above example you can see REST fetched, all of the user and the post details, where as GRAPHQL only fetched the userโ€™s name and the postโ€™s title.

๊ทธ๋ƒฅ ์ฝ๊ธฐ๋งŒ ํ•˜์ง€ ๋งˆ์‹œ๊ณ  ์ง€์‹์„ ์–ป์œผ์‹œ๊ณ  ์ข‹์•„์š”์™€ ๊ณต์œ ๋ฅผ ํ•˜์…”์„œ ๋‹ค๋ฅธ ๋ถ„๋“ค๋„ ์ง€์‹์„ ์–ป์œผ์„ธ์š” ๐Ÿ˜ƒ.

๋Œ“๊ธ€ ์„น์…˜ ๐Ÿ˜ƒ์—์„œ ๊ฐœ์„ ํ•ด์•ผ ํ•  ์‚ฌํ•ญ์„ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์—์„œ ์ €๋ฅผ ํŒ”๋กœ์šฐํ•˜์„ธ์š”. ๊ณง ์œ ์ตํ•œ ๊ฒŒ์‹œ๋ฌผ๋กœ ๋Œ์•„์˜ค๊ฒ ์Šต๋‹ˆ๋‹ค ๐Ÿ˜ƒ.

๋‚ด ๋‹ค์Œ ๋ธ”๋กœ๊ทธ๋ฅผ ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•˜์„ธ์š”: best laptops for students under 65K ๐Ÿ˜ƒ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ