์ด์ ๋ ๊ฐ๊ฒฉ์ ์ด์ ๋ ๋ฌด์ ์ ํค๋ณด๋๋ฉด ๊ฐํ์๋ฐ?
VPN์ ๋ ๋ด๊ณ ์ฌ์ฉํ์ ๋ค๊ณ ์?
์๋ฐ์คํฌ๋ฆฝํธ์์ ๋์์ฑ์ด๋? ๊ทธ๋ฆฌ๊ณ React Concurrent ๋ชจ๋๋?
GraphQL๊ณผ Apollo๋ฅผ `react-router 4`์ ํจ๊ป ์ฌ์ฉํ์ฌ ํ์ด์ง ์ด๋์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค. ๊ฐ ๋ผ์ฐํ ์ `Link`๋ก ํํ๋ฉ๋๋ค.
Apollo ํด๋ผ์ด์ธํธ๋ฅผ ์ฌ์ฉํ์ฌ GraphQL ๋ฎคํ ์ด์ ์ ๋ค๋ฃจ์ด๋ด ๋๋ค. Apollo์ `<Mutation />` ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฎคํ ์ด์ ์ ์ ์ํ๊ณ ์ ์กํฉ๋๋ค.
์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๊ณ ๋ฐ์ดํฐ๋ฅผ React ์ปดํฌ๋ํธ์ ํ์ํ๋ ๋ฐฉ๋ฒ์ ์ตํ๋๋ค. Apollo ํด๋ผ์ด์ธํธ๋ฅผ ์ฌ์ฉํ์ฌ GraphQL ์ฟผ๋ฆฌ๋ฅผ ๋ค๋ฃน๋๋ค.
Hackernews ํด๋ก ํ๋ก์ ํธ๋ฅผ ์์ํฉ๋๋ค. `create-react-app`์ ์ฌ์ฉํ์ฌ ํ๋ก ํธ์๋๋ฅผ ์ ์ํ๊ณ , Prisma๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ์๋๋ฅผ ์ ์ํฉ๋๋ค.
Apollo Client๋ ํ๋ก ํธ์๋์์ GraphQL์ ์์ฃผ ๊ฐ๋จํ๊ฒ ์์ํ ์ ์๋๋ก ๋์์ฃผ๋ ์ ์ฐํ๋ฉด์๋ ๊ฐ๋ ฅํ๊ณ ์ง๊ด์ ์ธ API๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ด์ ์ฌ๋ฌ๋ถ์ Node.js๋ฅผ ์ฌ์ฉํ์ฌ GraphQL ์๋ฒ๋ฅผ ๋ง๋๋ ๋ฒ, ํํฐ๋ง๊ณผ ์ธ์ฆ, ํ์ด์ง๋ค์ด์ ๊ณผ ๊ตฌ๋ ์ ๊ตฌํํ๋ ๋ฒ ์คํธ ํ๋ํฐ์ค๋ฅผ ๋ชจ๋ ๋ฐฐ์ ์ต๋๋ค.
Node.js, Express, Prisma๋ฅผ ์ฌ์ฉํ์ฌ GraphQL API์ ํํฐ๋ง ๋ฐ ํ์ด์ง๋ค์ด์ ๊ธฐ๋ฅ์ ์ถ๊ฐํด๋ด ๋๋ค.
Node.js, Express, ๊ทธ๋ฆฌ๊ณ Prisma๋ฅผ ์ฌ์ฉํ์ฌ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ค์๊ฐ ๊ธฐ๋ฅ์ ๋ํ๋ ค๋ฉด GraphQL ๊ตฌ๋ ์ ์ด๋ป๊ฒ ๊ตฌํํด์ผ ํ๋์ง ๋ฐฐ์๋๋ค.
Node.js, Express, ๊ทธ๋ฆฌ๊ณ Prisma๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ฆ๊ณผ ๊ถํ ๋ถ์ฌ๋ฅผ ๊ตฌํํ๋ ์ฐ์ ์ฌ๋ก๋ฅผ ๋ฐฐ์๋๋ค.
GraphQL ์๋ฒ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ถ๊ฐํ๋ ๋ฒ์ ๋ฐฐ์๋๋ค. ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ Prisma๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ์ ์ฐ๊ฒฐ๋ฉ๋๋ค.
GraphQL ์๋ฒ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ถ๊ฐํ๋ ๋ฒ์ ๋ฐฐ์๋๋ค. ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ Prisma๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ์ ์ฐ๊ฒฐ๋ฉ๋๋ค.
GraphQL์ 'Object' ํ์ ๊ณผ 'input' ํ์ ์ ์ฐจ์ด
graphql-js, Node.js, Prisma๋ฅผ ์ฌ์ฉํ์ฌ GraphQL ๋ฎคํ ์ด์ ์ ๊ตฌํํ๋ ์ฐ์ ์ฌ๋ก๋ฅผ ๋ฐฐ์๋๋ค. ๊ตฌํํ ๋ด์ฉ์ GraphQL Playground์์ ํ ์คํธํด๋ด ๋๋ค.
GraphQL ์คํค๋ง ์ ์, Node.js๋ฅผ ์ฌ์ฉํ๋ ์ฟผ๋ฆฌ ๋ฆฌ์กธ๋ฒ ๊ตฌํ, GraphQL Playground๋ฅผ ์ฌ์ฉํ ์ฟผ๋ฆฌ ํ ์คํธ์ ๋ํ์ฌ ๋ฐฐ์๋๋ค.
Node.js์ Express๋ฅผ ์ฌ์ฉํ์ฌ GraphQL ์๋ฒ๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ด ๋๋ค. ๋ํ, GraphQL ์คํค๋ง๋ฅผ ์ ์ํ๋ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์์๋ด ๋๋ค.
Tutorials that will start from scratch and teach you how to build a fully-fledged Hackernews clone
GraphQL์ ์๋ฒ ์ฌ์ด๋ ์บ์ฑ, ์ธ์ฆ, ๊ถํ, ์ค๋ฅ ์ฒ๋ฆฌ, ์คํ๋ผ์ธ ์ฌ์ฉ ๋ฑ์ ๋ํ ๊ณตํต ์ง๋ฌธ์ ๋ํ ํด๋ต์ ์์๋ด ๋๋ค.