[GraphQL #1] GraphQL로 API 서버 만들기
GraphQL
GraphQL은 API 쿼리 언어이며, 데이터 유형을 정의하여 쿼리하기 위한 서버 런타임 시스템이다.
RESTful API와 비교하면, RESTful API는 Request마다 각각의 Endpoint를 사용하지만, GraphQL은 단일 Endpoint를 사용한다. 그리고 일반적인 Restful API 서버에서는 데이터를 주고받을 때 Over-Fetching, Under-Fetching 이 발생한다. 하지만 GraphQL은 RESTful API에서 발생할 수 있는 Over-Fetching, Under-Fetching 문제를 해결하였다.
Over-Fetching이란?
필요한 정보 영역보다 더 많은 정보를 서버로부터 받는 것을 말한다. 사용자 이름 정보만 필요한데 서버는 그 외에 정보도 같이 준다. 그럼 우리는 많은 정보 중에서 필요한 정보만 골라서 사용해야 한다.
Under-Fetching이란?
필요한 정보가 여러개일때 서버에 여러번 요청해야한다. 하지만 GraphQL은 한번의 요청으로 서버로 부터 필요한 모든 정보를 받을 수 있다.
이 글은 니꼴라스님의 동영상 강의 "GraphQL으로 영화API 만들기" 를 학습하고 정리한 내용입니다.
필요한 npm 모듈 설치하기
우선 graphql API 서버를 구현하는데 필요한 npm 모듈을 설치한다.
graphql-yoga 설치
graphql-yoga
사용하면 GraphQL 서버를 쉽게 설정할 수 있다.
yarn add graphql-yoga
바벨(babel) 설치
Babel
은 ES6/ES7 코드를 ES5 코드로 변환해주는 도구이다. ES6/ES7으로 개발하기 위해서 babel-cli
를 설치한다.
$ yarn global add babel-cli
[설치 오류 해결 방법]
EACCES: permission denied 오류가 발생하여 아래 링크를 보고 해결하였다.
또 다음 오류가 발생하여
--ignore-engines
옵션을 사용하여 설치하였다.
babel-cli
를--ignore-engines
옵션을 사용하여 설치하는 방법.
$ yarn global add babel-cli --ignore-engines
그리고 바벨에 필요한 추가 모듈을 설치한다.
$ yarn add babel-preset-env babel-preset-stage-3 --dev
.babelrc
파일을 생성한다.
{
"presets": ["env", "stage-3"]
}
nodemon 설치
nodemon
은 js가 수정되면 서버를 자동으로 재시작해준다.
$ yarn global add nodemon
package.json
에 다음을 추가한다.
"scripts": {
"start": "nodemon --exec babel-node index.js"
}
다음은 package.json
파일의 전체 내용이다.
index.js
파일 생성하고 실행하기
index.js
파일을 생성한다.
import { GraphQLServer } from 'graphql-yoga'
const server = new GraphQLServer({})
server.start(() => console.log('Server is running on localhost:4000'))
npm start
으로 서버를 실행하면, 아직은 에러 메세지가 출력 될 것이다.
$ npm start
scheme 생성하기
scheme에는 쿼리에 사용할 데이터 유형을 정의한다.graphql
폴더를 생성하고 scheme.graphql
파일을 생성한다.
graphql
└─ scheme.graphql
scheme.graphql
파일을 생성하고 Marketplace에서 확장 프로그램을 설치한다.
scheme.graphql
파일에는 type
을 추가한다.
type Query {
name: String!
}
name
은 요청값이고 응답값 유형은 String
이다. 그리고 !
은 필수값(required)이라는 의미이다.
resolvers 생성하기
resolvers.js
파일을 생성한다.
graphql
├─ scheme.graphql
└─ resolvers.js
resolvers.js
파일에는 Query를 위한 resolvers를 작성한다. name
으로 요청이 들어오면 응답값으로 anpigon
을 리턴한다.
const resolvers = {
Query: {
name: () => `anpigon`,
},
}
index.js
파일에 typeDefs
와 resolvers
를 추가한다.
import { GraphQLServer } from 'graphql-yoga'
import resolvers from './graphql/resolvers' // 추가된 코드
const server = new GraphQLServer({
typeDefs: "graphql/scheme.graphql", // 추가된 코드
resolvers // 추가된 코드
})
server.start(() => console.log('Server is running on localhost:4000'))
서버를 실행하고 브라우저에서 localhost:4000를 접속하면 아래 화면을 볼 수 있다. graphql-yoga
모듈에서 제공하는 GraphQL Playground 화면이다. (자세한 내용은 여기를 참조한다.)
서버에 요청을 보내보자. 그럼 서버에서 아래와 같이 응답이 내려온다.
scheme.graphql
파일을 다음과 같이 수정한다. person
을 요청하면 응답값으로 Anpigon
객체를 리턴한다.
type Anpigon {
name: String!,
age: Int!,
gender: String!,
}
type Query {
person: Anpigon!
}
resolvers.js
파일을 다음과 같이 수정한다.
const Anpigon = {
name: 'anpigon',
age: 17,
gender: 'men',
}
const resolvers = {
Query: {
person: () => Anpigon,
},
}
export default resolvers
브러우저에 접속해서 SCHEMA 패널을 열어보자. 그러면 요청할 수 있는 쿼리 유형과 응답 유형을 확일 할 수 있다.
person
값 중에서 age
값만 받고 싶으면 아래와 같이 요청할 수 있다. 그럼 우리가 요청한 age
값만 받을 수 있다.
끝.
Sponsored ( Powered by dclick )
[매매일지]/#2-1/현상태
네오는 4% 먹고(매도) 다시 매수했습니다^^ 지지만 잘해주면 굳 스텔라 61.8% 되돌림때 ...
joceo00님의 미국 서부 여행 다녀왔습니다
개발자시군요!?
API서버 개발 같은건 안해봐서 그런가보다 하고 보고 있습니다.
이런 걸 보면 해봐야 발전하는 개발자가 될텐데요.
전 아직 부족한가봅니다.
잘 봤습니다.
보클하고 갑니다.^^
네 저는 개발자입니다. 저는 IT트렌드에 뒤쳐지지 않으려고 많이 사용되는 기술들을 공부합니다. 요즘은 JS가 대세인것 같습니다. 보클 감사합니다.
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨은 저자응원 프로그램입니다. 더 많은 저자 분들에게 더 큰 혜택을 드리고자 스파임대 스폰서를 받고 있습니다. 스폰서 참여방법과 짱짱맨 프로그램에 관해서는 이 글을 읽어 주세요. 기업형 예비증인 북이오(@bukio)가 짱짱맨 프로그램을 운영하고 있습니다. 여러분의 증인 보팅은 큰 힘이 됩니다. Vote for @bukio
오랜만에 올라온 포스팅인데.. 저에게는 어렵네요....ㅋㅋㅋ
그나저나 안피곤님 질문하나요!!!
웹사이트나 블로그 만들려고 공부 진짜 시작해보려고 하는데 파이썬으로도 가능한건가요??
무지한 저는 html 과 cs(?) 둘을 알아야 하는걸로 알고 있었는데...
파이썬 만으로도 이쁘게 꾸밀수 있는건가요 진짜?ㅋ
HTML과 CSS를 모른 상태에서, 파이썬 만으로는 이쁜 웹사이트나 블로그를 구현하기 어렵습니다.
저도 CSS는 잘 모릅니다. 그래서 부트스트랩(bootstrap)로 구현된 무료 테마를 많이 활용합니다.
무료 디자인은 대표적으로 https://themes.getbootstrap.com/ 사이트에서 쉽게 구할 수 있어요. 구글 검색하면 다른 무료 테마도 쉽게 찾을 수 있어요.
최근에는 사이트나 블로그를 node.js(또는 javascript)로 많이 구현하는 추세입니다. 그 이유는 여러가지가 있지만, 저의 경우에는 서버 유지 비용 때문에 사이트를 node.js로 구현합니다.ㅋ
이건 안해봤는데 라즈베리파이에 설치해서 한번 테스트 해봐야 겠군요.
graphql를 사용하니 back-end와 front-end의 코드 라인수가 확실이 줄어듭니다.
그 만큼 개발 시간도 절약 될것 같습니다. 저는 앞으로 실무에서 사용하려고 공부 중입니다.
사실 까막눈이라 봐도 잘 모르지만 제 동물적인 감각이 안피곤님 내공을 감지하게됩니다 ㅎ
코딩 내공을 열심히 수련해서 빨리 코딩 고수가 되고싶습니다. ㅋ
감사합니다.
Hi @anpigon!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 2.485 which ranks you at #16573 across all Steem accounts.
Your rank has improved 149 places in the last three days (old rank 16722).
In our last Algorithmic Curation Round, consisting of 231 contributions, your post is ranked at #96.
Evaluation of your UA score:
Feel free to join our @steem-ua Discord server
@anpigon님 곰돌이 보팅 따라하기 이벤트 기념 보팅왔어요~ @gomdory 곰도뤼~