Exploring the concept of GraphQL and its benefits
์ ํ์ ๋ง๋ค๊ธฐ ์ํด์ ๋ง์ ๊ธฐ๋ฅ์ด ํ์ ํ์๊ณ ๊ทธ์ ๋ฐ๋ผ ๋ง์ API๋ฅผ ์ฐ๋ํ์ฌ ๊ฐ๋ฐํ์๋๋ฐ ์๊ฐ์ด ์ง๋ ์์ฐ์ค๋ฝ๊ฒ API๊ฐ ์ถ๊ฐ๋๊ฑฐ๋ ๋ณ๊ฒฝ๋๋ ์ผ๋ค์ด ๋ง์์ง๊ฒ ๋์์ต๋๋ค.
์ด๊ฒ์ ๊ฒฐ๊ตญ API ์คํ์ด ์ถ๊ฐ๋๊ฑฐ๋ ๋ณ๊ฒฝ๋๋ ์ผ์ด ๋ฐ์ํ๋ ๊ฒ์ ์๋ฏธํ์๊ณ ๊ทธ์ ๋ฐ๋ผ ํด๋ผ์ด์ธํธ๊ฐ ๋ค๋ฃจ์ด์ผ ํ ์๋ ํฌ์ธํธ์ ๋ํ ์ธํฐํ์ด์ค๋ฅผ ์ ์ง๋ณด์ํ๋ ๊ฒ์ ์ฝ์ง ์์์ต๋๋ค.
๋๊ตฐ๋ค๋ API ์คํ์ ๋ฌธ์๋ก ์ ๋ฆฌํ๋ ๊ฒ์ ์ฒ์์ ์ฌ์ธ์ง ๋ชฐ๋ผ๋ ์ง์์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ ์ ๋ ์ฌ์ด ์ผ์ด ์๋์์ต๋๋ค.
์ฌ์ด๋ ํ๋ก์ ํธ์ ์ด๋ฌํ ๋ฌธ์ ๋ค์ GraphQL์ ๋์ ํ๋ฏ๋ก์จ ํด๊ฒฐ ํ ์ ์์ง ์์๊น ์๊ฐํ์ฌ ๋ฌธ์๋ค์ ์ฝ๊ณ ๊ฐ์ฅ ์ธ์ ๊น์๋ ๋ถ๋ถ๋ค์ ์์ฝ ํด๋ณด์์ต๋๋ค.
ํด๋ผ์ด์ธํธ์์ ์ดํด ํ ์ ์๋ ์ธ์ด์
๋๋ค. ๋น์ทํ ์๋ก SQL์ด ์๋๋ฐ ์ง์๋ฅผ ์์ฑํ๋ ์์ ์ ์ ํํ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๋ฐํ ํ๋์ง ์ดํด ํ ์ ์์์ ๋ปํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ GraphQL์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ ์คํ์ ์ ์ํ ๊ฒ์
๋๋ค. ์ ์๋ ์คํ์ ๋ฐ๋ผ ์ธ์ด์ ๋ง๊ฒ ๊ฐ๋ฐ ํ ์ ์์ต๋๋ค.
GraphQL ๋ฐฉ์์ผ๋ก ๊ฐ๋ฐํ๋ ค๋ฉด GraphQL ํด๋ผ์ด์ธํธ์ GraphQL ์๋ฒ๊ฐ ํ์ํฉ๋๋ค.
GraphQL ์๋ฒ๋ ์ธ์ด๋ง๋ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ง์ด ์กด์ฌํ๊ณ ํด๋ผ์ด์ธํธ๋ก์๋ ์ ์ผ ์ ๋ช
ํ ๊ฒ์ Relay์ Apollo๊ฐ ์์ต๋๋ค.
Relay๋ ๋ฉํ์์ ๊ฐ๋ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก GraphQL์ ์ค๊ณํ๊ณ ์๋น์ค์ ์ ๊ทน์ ์ผ๋ก ๋์
ํ ํ์ฌ๋ต๊ฒ ์์ ๋ค์ ์ฒ ํ์ ๋ง๊ฒ ๊ฐ๋ฐ๋์ด ์์ต๋๋ค.
์ ์ผ ์์์ ์ฟผ๋ฆฌ๊ฐ ์กด์ฌํ๊ณ ํด๋น ์ฟผ๋ฆฌ๋ฅผ ํ๋ ๊ทธ๋จผํธ๋ก ์ฌ๋ผ์ด์คํ์ฌ ๊ฐ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ ๋ฐฉ์์
๋๋ค.
์ด๋ฌํ ๊ตฌ์กฐ๋ ์ค์ผ์ผ๋ง์ ์ ํฉํ ๊ตฌ์กฐ์
๋๋ค. ์๋น์ค๊ฐ ์ปค์ง๋๋ผ๋ ์ฌ๋ผ์ด์ค๋ ํ๋ ๊ทธ๋จผํธ๋ฅผ ํตํด ์บ์ ํํธ๋ฅผ ๊ทน๋ํ ์ํต๋๋ค.
๋ค๋ง ์ปดํฌ๋ํธ์ ํ๋์ ํ๋ ๊ทธ๋จผํธ๋ฅผ ๋์ํ์ฌ ์ ์ธํ๋ ๋ฐฉ์์ ์ทจํ๊ธฐ ๋๋ฌธ์ ์ปจ๋ฒค์
์ด ๊น๋ค๋กญ๊ณ Relay๋ง์ ๋๋ ํฐ๋ธ๊ฐ ์กด์ฌํ์ฌ ๋ฌ๋์ปค๋ธ๊ฐ ์ ์ง ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ SSR์ ๊ณต์์ ์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ๋ณ๋์ ๋ผ์ฐํฐ ์์
์ด ํ์ํฉ๋๋ค.
Apollo๋ Relay์ ๋๋ถ๋ถ์ ๊ธฐ๋ฅ์ ๋น์ทํ๊ฒ ์ ๊ณตํ์ง๋ง ํน์ ์ปจ๋ฒค์
์ ๊ณ ์ ๋์ง ์์ ์ ์๋๋ก ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค.
SSR ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ ๋ฒจ์์ ๊ณต์ ์ง์ํ๊ณ ์์ต๋๋ค.
์ด๋ฌํ ๋๋ต์ ์ธ ํน์ง์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ์ด๋ค ๊ฒ์ ์ ํ ํ ์ง๋ ์ ํ์ ์คํ ๋ด์์ SSR์ ํ์์ฑ์ ๋ฐ๋ผ ๊ฒฐ์ ๋๋ฆฌ๋ผ ์๊ฐ๋ฉ๋๋ค.
์๋ํฌ์ธํธ๋ฅผ ํ๋๋ก ํตํฉ ํ ์ ์์ผ๋ฉฐ, ํด๋ผ์ด์ธํธ์์ ์์ฒญํ๋ ์์ ์ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋์ง ์ดํด ํ ์ ์์ต๋๋ค.
Rest API๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ฉด ํํ ๋ง์ฃผํ๋ ์ธ๋ํจ์นญ(๋ฐ์ดํฐ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ฌ๋ฌ API๋ฅผ ํธ์ถ)๊ณผ ์ค๋ฒํจ์นญ(API ์๋ต์ ๋ถํ์ํ ๋ฐ์ดํฐ๊น์ง ํฌํจ)์ ์์จ ์ ์์ต๋๋ค.
๋ํ GraphQL ์๋ฒ์์ ์ ๊ณตํ๋ Playground ์ฌ์ดํธ๋ฅผ ํตํด ๋ณ๋์ ๋ฌธ์ ์์ด๋ ๋ฐ์ดํฐ ์ธํฐํ์ด์ค๋ฅผ ํ์ธ ํ ์ ์์ต๋๋ค. (๋ณ๋์ ์ฝ๋ ์์ฑ์ ํ์ง ์์๋ ๋ฉ๋๋ค)
๊ทธ๋ฆฌ๊ณ GraphQL ์๋ฒ๊ฐ ์ค๊ฐ์์ ๋ฐฑ์๋ API๋ฅผ ํตํฉํ์ฌ ์ ๊ณตํ๋ฏ๋ก ์์คํ
๋ง์ด๊ทธ๋ ์ด์
์ ์ ๋ฆฌํฉ๋๋ค. ์๋ฅผ ๋ค์ด ์ธํฐํ์ด์ค ๋ด์์ ๋ฐ์ดํฐ๊ฐ ์๋ก ๋ค๋ฅธ ์ถ์ฒ๋ฅผ ๊ฐ์ง๋ค๊ณ ํ๋๋ผ๋ ํด๋ผ์ด์ธํธ๋
ํด๋น ๋ถ๋ถ์์ ์ ๊ฒฝ ์ธ ํ์๊ฐ ์์ต๋๋ค.
ํ๋์ GraphQL ๋ฐ์ดํฐ๊ฐ ํ๋์ ๋ด๋ถ API๋ฅผ ํตํด ์ ๊ณตํ๋ค๊ฐ ๋ถ๋ฆฌ๋ ์ฌ๋ฌ๊ฐ์ ๋ด๋ถ API๋ฅผ ์กฐํฉํ์ฌ ์ ๊ณต ํ ์ ์์ผ๋ฉฐ, ์ด ๋ง์ ๋ฐฑ์๋์์ ์์คํ
์ ์ ์ฐ์ฑ์ด ์๊น์ ์๋ฏธํฉ๋๋ค.
๋ณ๋์ ์๋ ํฌ์ธํธ๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ๋ณ๊ฒฝํ์ง ์์๋ ๋๋ฉฐ ํด๋ผ์ด์ธํธ๊ฐ ์์ฒญํ๋ ์ฟผ๋ฆฌ์ ๋ํด์ ๊ฐ๊ฐ์ ์์ฑ ๋ณ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ฉด ๋๊ธฐ ๋๋ฌธ์
๋๋ค.
GraphQL์ ํ๋ฒ ์ธํฐํ์ด์ค๋ฅผ ์ค๊ณํ๋ฉด ๋๋๋ฆฌ๊ธฐ๊ฐ ์ฝ์ง ์์ต๋๋ค. ๊ทธ๋์ ๊ณต์๋ฌธ์์๋ ์์คํ
์ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ํ๋ฒ์ ๋ง์ด๊ทธ๋ ์ด์
ํ๋ ๊ฒ์ ์ถ์ฒํ์ง ์๊ณ ์ ์ง์ ์ธ ๋์
์ ํตํด ์ค์๋ฅผ ์ค์ฌ๋๊ฐ๋ ๊ฒ์ ๊ถ์ฅํ๊ณ ์์ต๋๋ค.
GraphQL ์๋ฒ๊ฐ ๋ฐฑ์๋ ์๋ฒ ์๋จ์ ์กด์ฌํ์ฌ ํด๋ผ์ด์ธํธ์ ์์ฒญ์ ๋ฐ๋ ์ญํ์ ํ๊ฒ ๋๋ฏ๋ก ์ธํ๋ผ๋ฅผ ์ ๊ด๋ฆฌํด์ผํฉ๋๋ค.
์ค์ ๋ก ์ด๋ค ์๋น์ค์์ GraphQL์ ์ฌ์ฉํ๋๋ฐ ๋ง์ ์์ฒญ์ด ํ๋ฒ์ ๋ฐ๋ ค GraphQL ์๋ฒ ์ค๋ฅ๊ฐ ํด๋ผ์ด์ธํธ์ ๊ทธ๋๋ก ๋
ธ์ถ๋ ์ ์ด ์์ต๋๋ค.