본문 바로가기
Next.js

쿼리 쉽게 하자 Graph QL [Server API]

by maestro_shane 2021. 2. 5.

탄생 배경: 

 

서버를 운영 하다보면 여러가지 문제점을 만나게 됩니다. 

특히 API의 많은 요청으로 서버의 성능이 저하되고나, 개발 로직을 위해서 리소스를 추가해야 한다는 점입니다. 

이를 극복하기 위해서 나온 기술이 GraphQL입니다. 특히 Next.js는 Server Side Rendering(SSR)의 많이 사용되는 언어 입니다.  모르시면 Next.js 별거 아니야를 클릭해주세요 deveopler.tistory.com/5?category=876248

 

Next.js 별거 아니야

Next.js 이란 ??? 도대체 넌 무엇이냐? 탄생 배경: React, Vue, Angular 의 SPA(Single Page Application)의 등장으로 한페이지에서 모든것을 처리하는것에 초점이 마쳐있는 웹페이지 였습니다. 이것을 CSR(clien..

deveopler.tistory.com

 

주로 실시간으로 데이터를 받아와야하는 경우에 많이 사용되죠 

EX) 환율, 주식, 시세, 뉴스, 가상화폐  

 

특히 Facebook에서 더욱더 쉽고 빠른 Query language(query로 정보를 얻는 언어)를 개발하게된 언어 입니다.

 

SQL VS QQL 차이점 

 

SQL : DB에 저장된 데이터를 효율적으로 가져오는것이 목적입니다. (End에서 주로 사용됩니다) 

QQL: SSR에서 데이터를 서버로 부터 효

울적으로 가져오는 것이 목적입니다. (Front에서 주로 사용됩니다)

 

 

특징:

1. GraphQl API는 하나의 Endpoin를 사용합니다.

2. GraphQL API을 요청시 Query문에 따라 response의 구조가 달라집니다. 

3. Over-Fetching, Under-Fetching 데이터를 막을수 있습니다. 

 

 

<Express + GraphQL 서버 생성> 

 

1.  express-graphql 설치 하기 

npm i express-graphql

 

2. GraphQL 설치 하기 

 

npm i graphql

 

3. 스키마 설정 하기 ~ 

 

   1) Type : 객체라고 생각하시면 이해하기 편하실 것입니다. 

   2) start : 객체의 타입 

   3) intro: 다시 intro 라는 객체를 선업해 주었습니다. 

 

 

 

4.  root에서 위에 start와 intro에서 썻전 값들을 정의 해줍니다. 

 

 

5. 서버를 키면 local:4000/graphql를 가서 query {start } 쓰면 root에 선언했던 값이 나옵니다. !!

 

 

6. 이번에는 intro에 있는 값들을 찾고 싶으면 intro{ 있는 lanuages, DB를 값을 넣어주시면 } 이렇게 값이 나옵니다 ~~~

 

'Next.js' 카테고리의 다른 글

Nextjs depoly 꽁자로 deploy하는 법!!  (0) 2021.02.16
HTML을 NextJS 만들어 보자~~!!!  (0) 2021.02.12
Next.js 별거 아니야  (0) 2021.02.03

댓글