GraphQL 시작하기 1

NHN Bugs

Created by Junseok, Choi

주제를 시작하기 1로 정한것은, 서버와 클라이언트 모두 적용해야 하기 때문인데, 금일 발표는 서버를 위주로 발표를 진행하고, 추후 발표에서 Vue에 적용한 클라이언트 위주의 발표를 진행하겠습니다.

순서

  • 1. About GraphQL
  • 2. Example GraphQL
  • 3. Stable GraphQL
  • Q & A

1. About GraphQL

필요한 것만 정확히 물어볼 수있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 개발할 수 있도록...
GraphQL은 단독 버전 관리를 통해 기존 코드 수정없이 보다 깨끗하고 유지보수가 쉽게 사용이 가능...
4/4
이러한 장점이 있는데요, 저희 서비스에 적용한다면 어떤 도움이 될지, 어떤 점을 미리 살펴봐야 할 지 알아보겠습니다.

들어가기에 앞서...

Apollo를 사용합니다.
3/3
그 전에, GraphQL은 Apollo와 함께 사용하겠습니다. 기본적으로 `GraphQL은 API를 위한 쿼리언어` 이므로 서버만 지원을 합니다. 서버에 GraphQL을 적용하고, 클라이언트에서는 데이터만 호출할 수도 있지만 프론트와 서버 사이 GraphQL 데이터를 편리하게 교환할 수 있도록 Apollo가 도와줍니다.

Apollo는 JavaScript 서버 프레임워크들에 대해서 클라이언트와의 더욱 쉬운 연결을 위해 별도의 지원 또한 하고있습니다.

또한, GraphQL에서도 공식적으로 Apollo를 사용하라고 가이드를 제공해줍니다. (물론 서버까지 커버해줍니다.)

Type 정의

MVC 모델에서의 Model과 동일
2/3
MVC 모델에서의 Model과 동일하게 DB의 필드가 아닌,
3/3
가져올 데이터에 대해 사전에 정의를 해놓습니다.

Query & Mutation 정의

데이터를 가져올 수 있는 조합인 Query 및 Mutation을 정의합니다.
1/2
저희가 기존에 만들던 Query와 동일합니다. Mutation은 Get이 아닌 Post, Put, Delete, Options 요청들이며,
2/2
정의에 있어서 Get과 큰 차이는 없습니다.

Interface 정의

interface를 상속하여 타입 구현
1/2
React, Vue에 Flow나 Typescript로 타입에 강제성을 부여는 것과 마찬가지로
2/2
GraphQL에 Interface를 정의 후, type에서 implements 한 값을 정의합니다.

Resolver

정의한 Query와 Mutation에 대한 내용을 구현합니다.
2/3
type으로 정의한 모델에 맞게 기능들을 구현합니다.
3/3
모델들이 구현되어있는 이유는, 해당 모델에서 조인하여 가져오는 값들을 어떻게 가져올지에 대해 정의한 것입니다. `pubDetail` Query를 실행한다고 하였을 때, return 값은 Pub 모델과 같은데 Pub 에는 Feed의 배열인 `_feedList` 값이 있습니다. 이 값을 구현해줍니다. 또한, Feed에서 연결된, 연결된, 연결된.... 값들을 모두 정의해주면 필요할 경우, 원하는 쿼리에 대한 결과를 가져올 수 있습니다.

2. Example GraphQL

< 예제를 보면서 확인해봅시다! >

3. Stable GraphQL

< Apollo 클라이언트 >
< GraphQL 서버 >
서버와 클라이언트 각종 언어 및 라이브러리에 대응
3/3
GraphQL가 만들어진 12년도 이후로 서버는 각종 언어에 대한 지원을 시작했습니다. Apollo는 16년 2월 경 시작하였지만 현재 스타 6,500여개에 contributor가 700명 이상입니다.

사용하면서 발견한 이슈?!

는 아직까지 없습니다.
1/1
아직까지 만들어보면서 발견한 이슈는 없고, Get, Post 등 동작은 확인했지만 파일이나 이미지 업로드에 대한 구현을 해보지 못했습니다.

벅스에 도움이 될만한 부분

클라이언트 & 웹, 지금의 API로 한번에!!
1/1
클라이언트와 웹 모두 API를 사용한다고 하면, 서로 다른 API를 가져오는 이슈가 있는데 이를 GrapghQL로 해결이 가능합니다.

사용 중인 기업

< 더 많은 기업들 >
1/1
많은 기업에서 사용중이지만, 대표적으로 이미지와 같이 페이스북, 깃헙, 핀터레스트, 코세라 등등의 기업들에서 사용 중입니다.

컨퍼런스

< 발표자 - 페이스북, 깃헙, 트위치, oauth, IBM 등등 기업 직원들... >
1/1
2016, 2017년도에 Apollo의 주도로 컨퍼런스가 이루어졌으며 매년 개최될 예정입니다.

Q & A

끝

감사합니다.