도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

2편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - graphcool (GraphQL 서버 만들기)

참고: 이번 튜토리얼을 진행 하기 위해 진행 되는 코드를 깃헙에 업로드 해놨으니, 이 튜토리얼을 진행하고 싶다면 아래에서 소스를 클론 받은 후 아래의 내용을 따라가기를 추천 드립니다. 

이전 편:

0편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 소개

1편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 프로토타입

튜토리얼 소스:

https://github.com/simsim0709/react-apollo-flow-trello-clone/tree/ch-2 

이번 편에서는 먼저 graphcool 서비스를 통해 GraphQL 서버를 구성 하고, 기본 적인 테스트를 진행하도록 하겠다.  그리고 나서 우리가 진행 했던 부분을 되짚어 보면서 GraphQL의 기본적인 개념, 문법을 얘기 하도록 하겠다.

자, graphcool을 통해 우리의 GraphQL  서버를 만들어보자. 

graphcool

먼저, cli에서 graphcool 패키지를 글로벌로 설치한다.

npm install -g graphcool

설치가 완료 되었다면 우리의 프로젝트 폴더로 이동한 후, graphcool-server 폴더를 만든다. (튜토리얼 소스를 체크아웃 받았다면 이 부분은 넘어간다.)

mkdir graphcool-server && cd graphcool-server

graphcool 관련한 소스는 모두 /graphcool-server 폴더에 추가 될 것이다. 

이제 graphcool 서비스를 초기화 한다. (튜토리얼 소스를 체크아웃 받았다면 이 부분은 넘어간다.)

graphcool init 

앱을 초기화 하면 총 5개의 파일이 생성 되는데 각각 아래와 같다. (파일에 대한 설명은 다음편에서 하도록 하겠다.)

  • graphcool.yml
  • package.json
  • types.graphql
  • src/hello.graphql
  • src/hello.js

이 부분에 대한 설명은 미루고, 우선 이 파일들 그대로 graphcool 서버에 디플로이 해보자:

graphcool deploy

그럼, 아래와 같은 화면이 나오는데, 원하는 서버를 선택 한 후 엔터를 누른다.

그 다음으로, 원하는 target name을 작성하는 화면이 나오는데 기본 값은 prod이다. 엔터를 누른다.


서비스 네임을 작성하라고 나오는데, 우리는 "trello"라고 하도록 하겠다.

서비스 이름을 작성하고 엔터를 누르면, 로그인이 안되어 있기 때문에 브라우저에 로그인 하라는 화면이 나올 것이다.

회원가입 또는 로그인을 완료하게 되면 아래의 화면이 나온다.

여기서 OPEN CONSOLE 버튼을 눌러보면, 콘솔 창으로 넘어가는데 우리가 작성한 trello 서비스가 정상적으로 디플로이 된것을 확인 할 수 있다.


cli로 돌아와서 보면 아래와 같은 화면이 나올것이다. 

그리고 총 3개의 endpoint를 제공 해주는데, 우리는 이중에 Simple API를 통해 우리의 클라이언트 앱과 연결 할 것이다.


자 이제 디플로이를 완료했고, api endpoint도 어렵지 않게 얻었다. 

이제 GraphQL을 직접 사용해보자. 

Playground (a.k.a graphiql)

graphql의 가장 큰 장점 중 하나는 graphiql이라는 강력한 도구를 사용 할 수 있다는 것이다. 이 도구를 통해 우리의 graphql server가 잘 작동하는지 테스트 해볼 수 있고, 우리가 사용 할 수 있는 모든 query, mutation에 대해 자동으로 문서화 해주기 때문에 api 문서를 별도로 만들 필요가 없다.

자, 그럼 플레이그라운드를 실행 해보자. 

cli에서 플레이그라운드 실행:

graphcool playground 

graphcool 콘솔에서 실행 하고 싶다면 콘솔 화면 왼쪽 하단에 playground 버튼을 누른다.


플레이그라운드를 실행하면 이런 화면을 볼 수 있다.

왼쪽 화면에 우리는 graphql 문법을 통해 데이터를 요청 한다. 그리고 나서 play 버튼을 누르거나  단축키(mac: cmd + enter, window: ctrl + enter)를 누르면 오른쪽에 데이터가 출력 된다.

그리고 가장 오른쪽에 초록색 "schema" 버튼이 있는데, 이것을 클릭해보면 우리가 사용할 수 있는 모든 operation이 나와 있다.

이중에 아무거나 클릭해서 보면 어떤 파라미터가 필요한지 어떤 필드를 받아올 수 있는지, 데이터 타입은 어떻게 되는지가 명확히 나와있다. 그렇기 때문에, 여기에 맞게 graphql을 작성만 해주면 된다. 

schema를 누르면 이런게 나온다.


우리는 이중에 "QUERIES"에 있는 "hello"를 요청 해볼 것이다(아직 graphql 문법을 다루지 않았으니 아래 소스를 복사 해보자).

 플레이그라운드 왼쪽 창에 아래와 같이 작성 해보자:

query {
hello {
message
}
}

그리고 나서, 플레이 버튼을 누르면 오른쪽에 이렇게 데이터가 출력된다:

{
"data": {
"hello": {
"message": "Hello World"
}
}
}

지금 까지 graphcool 서비스를 통해 graphql 서버를 구성했고, playground(graphiql)을 이용해서 정상적으로 서버가 동작하는 지 확인 했다. 이제 graphql에 대해 가장 기초적인 부분에 대해 얘기해보자.

GraphQL

graphql에 대해 어느정도 지식이 있다면 이 부분은 넘어가도 좋다.

graphql이 무엇인지 왜 써야 하는지 뭐가 좋은지 등등의 이론적인 부분은 여기서 다루지 않겠다. 이 부분에 대해 알고 싶다면 아래의 참고 자료를 활용 하도록 하자.

우리는 튜토리얼에 필요한 최소한의 개념, 용어와 문법만 집고 가도록 하겠다.

GraphQL vs REST API

  • Endpoint graphql의 endpoint는 하나다. 이 한개의 앤드포인트를 통해 crud를 모두 다룬다.
  • GET -  rest api에서 데이터를 받아 오기 위해 사용하는 GET method의 경우 graphql query operation type과 동일하다고 생각하면 된다.
  • POST, PUT, DELETE - rest api에서 데이터 생성, 수정, 삭제를 위해 사용하는 POST, PUT, DELETE method의 경우 graphql mutation operation type과 동일하다고 생각하면 된다.

정리하자면 graphql은 rest api와 다르게 하나의 endpoint를 사용하고, query operation type을 통해 데이터 요청, mutation operation type을 통해 데이터 추가, 수정, 삭제를 한다. 이 부분만 잊어버리지 않는다면, 이 튜토리얼을 진행하는데 무리가 없을 것이다.

참고 - 이 튜토리얼에서는 다루지 않을 것이지만 query, mutation말고 subscription이라는 operation type이 있다. 이것은 실시간 데이터를 graphql로 처리하기 위해 사용하는 operation type이다.

graphql과 REST를 자세하게 비교한 자료는 아래 있으니, 자세히 알고 싶다면 이 자료를 읽어보자.


GraphQL 문법 


  • Operation type - query, mutation, subscription을 사용 할 수 있다.
  • Operation name - 필수로 필요한 부분은 아니지만, 디버깅과 로깅등을 위해 의미있는 이름을 적어주는 것이 좋다.
  • Variable definitions - 여기에 변수를 선언해서 사용 하면된다. 


우리는 fields에 해당하는 부분을 선언하면 여기에 데이터를 받게 되는 것이다. 

Fields에 해당 하는 부분이 우리가 요청하는 실제 데이터 구조이다. 위의 데이터 구조로 데이터를 요청하면 같은 구조로 데이터가 반환 된다.

graphql에서는 내가 요청한 데이터만 받게 되고, 요청한 타입이 맞지 않거나, 구조를 벗어나거나 타입에 없는 필드를 요청하면 에러가 떨어진다.

위에서 예제로 실행 했던 hello query를 message 대신에 name을 요청 하면,

query {
hello {
name
}
}  

이런 에러가 떨어진다:

{
"data": null,
"errors": [
{
"message": "Cannot query field 'name' on type 'HelloPayload'. (line 3, column 5):\n name\n ^",
"locations": [
{
"line": 3,
"column": 5
}
]
}
]
}

 자, 이제 아주 기본적인 graphql에 대해 커버했다. 

이번편은 여기서 마무리 짓도록 하자.

다음편에서는 graphql로 보드(Board) 타입을 생성하고 클라이언트와 연결해서 보드 생성, 리스팅을 해보도록 하겠다.

참고




리뷰