컴퓨터 탐험가 찰리

참조 Nomad Coders의 무료 강의 'graphQL로 영화 API 만들기'를 참고하였다. nomadcoders.co/graphql-for-beginners 지난 글 graphQL의 구조, 원리에 대한 설명글을 이해하고 난 뒤에 아래 실습 내용을 살펴보자 5. 영화 API GraphQL : 구조, 원리 파악하기 실습하기 npm start 또는 yarn start를 통해 Server를 실행시키고, localhost:4000 으로 접속하여 graphql playground를 실행한다. 우측 그림과 같이 여러 개의 Tab을 만들어서 Query문을 날릴 수 있다. 첫번째 tab은 "Q" 라고 적혀 있는데, 실제 query문에 query type을 적어놨기 때문이고, 두번째 tab은 "M" 이라 적힌 걸 볼 ..

참조 Nomad Coders의 무료 강의 'graphQL로 영화 API 만들기'를 참고하였다. nomadcoders.co/graphql-for-beginners 원리. Resolver와 Schema에 맞게 query문을 날리면 원하는 데이터를 받는다! 아래 사진에서처럼, 왼쪽 client에서 query 문을 날리면 movies에 해당하는 "data"객체가 우측 결과화면에 표시되는 것을 볼 수 있다. 어떤 원리로 이것이 작동하는지 구조적으로 살펴보자. 1-1. resolver.js resolver는 query 요청이 왔을 때 어떤 데이터를 넘겨줄 것인가를 정의해주는 파일이다. resolver 내부에 Query와 Mutation이 있는데, 이는 REST API에서의 GET, POST와 유사하다고 보면 된다...

목표 기본적인 graphql 서버 작성법과 동작과정을 학습해본다. 구성 아래 그림과 같이 graphql 폴더에 resolver.js와 schema.graphql 파일을 작성하였다. schema.graphql 파일 여기서는 DB를 작성하는 것처럼 데이터의 항목과 종류를 정의한다. type : Query 문으로 모든 query가 집중되고, 각 데이터를 각각의 type에서 뽑아내는 형식으로 이해했다. 아래의 사진에서 보면, type Query 아래에 person : Person! 으로 정의된 것을 볼 수 있다. 이것은 query문으로 person 객체에 대한 요청이 오면, type Person에 대한 내용을 전달해준다는 의미를 갖는다. 데이터 항목의 각 값에 형식이 정해져있고, '!' 표시가 있는 것을 볼 수..

개요 import 와 같은 ES6 이상의 문법으로 서버 코드를 작성하기 위해서 자바스크립트 Transpiler인 babel 을 설치한다. 코드 1. 아래와 같은 명령어를 순차적으로 입력한다. npm i nodemon -D npm i @babel/cli -D npm i @babel/core -D npm i @babel/node -D npm i @babel/preset-env -D i : install의 약어, -D : --save-dev의 약어 2. ".babelrc" 파일을 만들고, 아래 설정값을 넣어준다. { "presets": ["@babel/preset-env"] } 3. 아래와 같이 graphQL 초기 세팅을 해준다. nodejs에 비해서 엄청 간단하다. 4. 만약 Error : No schema..

장점GraphQL은 기존 REST API에 비해 유리한 점이 2가지 있다. 1. 원하는 정보만 받아올 수 있으므로 통신에 드는 비용이 절감된다.2. REST API에서는 클라이언트-서버간 통신이 2번 이상 필요할 수 있는데, GraphQL은 한번에 가능하다. 예를 들어 student의 studentID값만 받아오고 싶은데, REST API에서는 GET 신호로 특정 엔드포인트에 요청을 보내면, studentID 값뿐만 아니라 student에 관련된 모든 정보를 서버에서 클라이언트로 전달하도록 서버코드가 작성되어 있을 수 있다.(이런걸 over-fetching 이라고 한다.)하지만 graphQL 에서는 studentID값만 요청하고, 받아옴으로써 비용 절감이 가능하다. 그리고 종종 서버에 어떤 정보를 요청하..