๐Ÿ”ฌComputer Science/๋„คํŠธ์›Œํฌ

GraphQL์ด๋ž€, ํŠน์ง•, ์žฅ๋‹จ์ , REST API์™€ ๋น„๊ต

hellohailie 2022. 8. 2. 10:49

โœ”๏ธ GraphQL์ด๋ž€?

Graph + Query Language์˜ ์ค„์ž„๋ง์ด๋‹ค. (API๋ฅผ ์œ„ํ•œ ์ฟผ๋ฆฌ ์–ธ์–ด)

 

GraphQL์€ Facebook์—์„œ ์ฒ˜์Œ์œผ๋กœ ๊ฐœ๋ฐœํ–ˆ๊ณ , ์˜คํ”ˆ ์†Œ์Šค๋กœ ์ œ๊ณต๋œ ์ฟผ๋ฆฌ ์–ธ์–ด์ด๋‹ค. ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ์ฟผ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ›๊ธฐ ์œ„ํ•ด ๊ทธ๋ž˜ํ”„๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ์ฟผ๋ฆฌ ์–ธ์–ด์ด๋‹ค. 

 

โœ”๏ธ GraphQL์˜ ํŠน์ง•

- HTTP๋ฅผ ํ†ตํ•ด API ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‘๋‹ต์„ ๋ฐ›๋Š”๋‹ค. 

- ์‘๋‹ต์„ ๋ฐ›์„ ๋•Œ ๋ฐ์ดํ„ฐ ๊ฒฐ๊ณผ๋ฅผ JSON ํ˜•์‹์œผ๋กœ ๋ฐ›๋Š”๋‹ค. 

- GraphQL์€ ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž‘์„ฑํ•œ ๊ฐ ํ•„๋“œ์— ๋Œ€์‘ํ•˜๋Š” resolver ํ•จ์ˆ˜๋กœ ๊ฐ ํ•„๋“œ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค. 

- GraphQL ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์กฐํšŒ ๋Œ€์ƒ schema๊ฐ€ ์œ ํšจํ•œ์ง€ ๊ฒ€์‚ฌํ•œ๋‹ค. 

 

โœ”๏ธ ๊ทธ๋ž˜ํ”„์—์„œ ํŠธ๋ฆฌ ์ถ”์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•

query {
	์ฑ…(ISBN์ด "9780674430006") {
		์ฑ… ์ด๋ฆ„
		์ €์ž {
			์ด๋ฆ„
		}
	}
}

 

๐Ÿ‘‡ ๊ฒฐ๊ณผ๐Ÿ‘‡

{
	์ฑ… : {
		์ฑ… ์ด๋ฆ„ : "GraphQL์€ ์–ด๋ ต์ง€ ์•Š๋‹ค",
		์ €์ž : [
			{ ์ด๋ฆ„ : "๊น€์ฝ”๋”ฉ"},
			{ ์ด๋ฆ„ : "๋ฐ•ํ•ด์ปค"},
		]
	}
}

 


โœ”๏ธ GraphQL vs REST API

REST API๋„ ์žˆ๋Š”๋ฐ ์™œ GraphQL์ด ๋‚˜์˜จ๊ฑธ๊นŒ??

=> REST API์˜ ํ•œ๊ณ„๊ฐ€ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์ง€!

 

1. overfetch = ํ•„์š”์—†๋Š” ๋ฐ์ดํ„ฐ๊นŒ์ง€ ์ œ๊ณตํ•จ

2. underfetch = ์—”๋“œํฌ์ธํŠธ๊ฐ€ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ถฉ๋ถ„ํžˆ ์ œ๊ณตํ•˜์ง€ ๋ชปํ•จ. / ํ•œ๋ฒˆ์— fetch ํ•ด์˜ค์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ๊ฐ์˜ ์—”๋“œํฌ์ธํŠธ์— ์š”์ฒญ์„ ๋ณด๋‚ด์•ผํ•จ.

3. ํด๋ผ์ด์–ธํŠธ ๊ตฌ์กฐ ๋ณ€๊ฒฝ ์‹œ ์—”๋“œํฌ์ธํŠธ ๋ณ€๊ฒฝ ๋˜๋Š” ๋ฐ์ดํ„ฐ ์ˆ˜์ •์ด ํ•„์š”ํ•จ.

 

REST API

GraphQL

Resource์˜ ํฌ๊ธฐ์™€ ํ˜•ํƒœ๋ฅผ ์„œ๋ฒ„์—์„œ ๊ฒฐ์ • Resource์— ๋Œ€ํ•œ ์ •๋ณด๋งŒ ์ •์˜ํ•˜๊ณ , ํ•„์š”ํ•œ ํฌ๊ธฐ์™€ ํ˜•ํƒœ๋Š” ํด๋ผ์ด์–ธํŠธ ๋‹จ์—์„œ ์š”์ฒญ ์‹œ ๊ฒฐ์ •
URI๊ฐ€ Resource๋ฅผ ๋‚˜ํƒ€๋‚ด๊ณ 
Method๊ฐ€ ์ž‘์—…์˜ ์œ ํ˜•์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. 
GraphQL Schema๊ฐ€ Resource๋ฅผ ๋‚˜ํƒ€๋‚ด๊ณ 
Query, Mutation ํƒ€์ž…์ด ์ž‘์—…์˜ ์œ ํ˜•์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. 
์—ฌ๋Ÿฌ Resource์— ์ ‘๊ทผํ•˜๊ณ ์ž ํ•  ๋•Œ ์—ฌ๋Ÿฌ ๋ฒˆ์˜ ์š”์ฒญ์ด ํ•„์š” ํ•œ๋ฒˆ์˜ ์š”์ฒญ์—์„œ ์—ฌ๋Ÿฌ Resource์— ์ ‘๊ทผ ๊ฐ€๋Šฅ
์š”์ฒญ์€ ํ•ด๋‹น ์—”๋“œํฌ์ธํŠธ์— ์ •์˜๋œ ํ•ธ๋“ค๋ง ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ž‘์—…์„ ์ฒ˜๋ฆฌ ์š”์ฒญ ๋ฐ›์€ ๊ฐ ํ•„๋“œ์— ๋Œ€ํ•œ resolver๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ž‘์—…์„ ์ฒ˜๋ฆฌ

 


โœ”๏ธ GraphQL์˜ ์žฅ์ 

1. ํ•˜๋‚˜์˜ ์—”๋“œํฌ์ธํŠธ endpoint ์š”์ฒญ

  • /graphql์ด๋ผ๋Š” ํ•˜๋‚˜์˜ endpoint ๋กœ ์š”์ฒญ์„ ๋ฐ›๊ณ  ๊ทธ ์š”์ฒญ์— ๋”ฐ๋ผ query , mutation์„ resolver ํ•จ์ˆ˜๋กœ ์ „๋‹ฌํ•ด์„œ ์š”์ฒญ์— ์‘๋‹ตํ•œ๋‹ค. ๋ชจ๋“  ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ์€ POST ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•จ.

2. overfetch, underfetch ์—†์Œ

  • ํ•˜๋‚˜์˜ ์—”๋“œํฌ์ธํŠธ์—์„œ ์ฟผ๋ฆฌ๋ฅผ ์ด์šฉํ•ด์„œ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ •ํ™•ํ•˜๊ฒŒ API์— ์š”์ฒญํ•˜๊ณ  ์‘๋‹ต๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค. 

3. playground GUI ์‚ฌ์šฉํ•ด์„œ resolver, schema ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅ (POSTMAN๊ณผ ๋น„์Šท)

4. ํด๋ผ์ด์–ธํŠธ ๊ตฌ์กฐ ๋ณ€๊ฒฝ์—๋„ ์ง€์žฅ์ด ์—†์Œ

  • ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ์‘๋‹ต๋ฐ›๋Š” ์ฃผ์ฒด๊ฐ€ ํด๋ผ์ด์–ธํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„์— ์ง€์žฅ์ด ์—†๋‹ค. ํด๋ผ์ด์–ธํŠธ์—์„œ๋Š” ๋ฌด์Šจ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•œ์ง€๋งŒ ์ฟผ๋ฆฌ๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋!

โœ”๏ธ GraphQL์˜ ๋‹จ์ 

1. ์บ์‹ฑ์ด REST๋ณด๋‹ค ํ›จ์”ฌ ๋ณต์žกํ•˜๋‹ค. 

=> REST์˜ ๊ฒฝ์šฐ, HTTP์—์„œ๋Š” ๊ฐ ๋ฉ”์†Œ๋“œ์— ๋”ฐ๋ผ ์บ์‹ฑ์ด ๊ตฌํ˜„๋˜์–ด ์žˆ์ง€๋งŒ, GraphQL์—์„œ๋Š” POST ๋ฉ”์†Œ๋“œ๋งŒ์„ ์ด์šฉํ•ด์„œ ์š”์ฒญ์„ ๋ณด๋‚ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ ๋ฉ”์†Œ๋“œ์— ๋”ฐ๋ฅธ ์บ์‹ฑ์„ ์ง€์›๋ฐ›์„ ์ˆ˜ ์—†๋‹ค. 

=> ์ด๋ฅผ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜์˜จ ๊ฒƒ์ด Apollo ์—”์ง„์˜ ์บ์‹ฑ & ์˜์† ์ฟผ๋ฆฌ

 

2. ๊ณ ์ •๋œ ์š”์ฒญ๊ณผ ์‘๋‹ต๋งŒ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” ์ฟผ๋ฆฌ๋กœ ์ธํ•ด ์š”์ฒญ์˜ ํฌ๊ธฐ๊ฐ€ RESTfull API ๋ณด๋‹ค ๋” ์ปค์ง„๋‹ค. =>์ถ”๊ฐ€๊ณต๋ถ€ ํ•„์š”

 

 

๐Ÿ˜ƒ ์ž˜๋ชป๋œ ๊ฐœ๋… ์ „๋‹ฌ์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ €์˜ ์„ฑ์žฅ์— ํฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค๐Ÿค“