정보실

웹학교

정보실

javascript GraphQL이란 무엇입니까? 역사, 구성 요소 및 생태계

본문

RESTful 웹 서비스는 수년 동안 간단한 쿼리 구조에 대한 기본 지원을 제공해 왔습니다. 

그러나 이러한 서비스는 데이터에 대한 세부적인 제어 기능을 제공하지 않으므로 개발자가 불필요한 전화를 많이 하지 않고도 유연성을 발휘할 수 있습니다.


원래 Facebook이 구축 한 GraphQL은 개발자가 원하는 요청 유형을 선택하고 단일 요청으로 필요한 정보를 받을 수 있는 API용 쿼리 언어입니다.


https://levelup.gitconnected.com/what-is-graphql-87fc7687b042 


이 기사에서는 GraphQL의 정의, 시작 방법 및 개발자가 API를 빌드 하는 데 필수적인 도구가 된 방법에 대해 설명합니다. 또한 GraphQL의 주요 구성 요소와 GraphQL 에코 시스템의 주요 플레이어를 다룹니다.


GraphQL은 (는) 무엇 이죠? 


가장 간단한 형태의 GraphQL은 클라이언트 측 응용 프로그램에서 데이터베이스를 쿼리 하기 위한 오픈 소스 언어입니다.


“GraphQL은 클라이언트와 서버 간 계약을 전환하여 서버가 '내가 노출한 기능입니다'라고 말하고 고객이 제품 개발자가 궁극적으로 제품 개발자가 빌드 할 수 있는 방식으로 요구 사항을 설명 할 수 있도록 하는 API의 쿼리 언어입니다. 그들이 만들고자 하는 제품.”— Dan Schafer, GraphQL 공동 제작자


뒤에서 검색된 데이터를 클라이언트에 제공하는 방법을 API에 알려줍니다. 이를 통해 개발자는 정확한 데이터 요청을 할 수 있으므로 필요한 것만 더 정확하게 받을 수 있습니다.


GraphQL이 개발자에게 제공하는 주요 이점은 다음과 같습니다.

  • 서버에서 필요한 것을 정확하게 선언하고 예측 가능한 방식으로 요청 된 데이터를 받습니다.
  • 단일 요청으로 서버에서 많은 자원을 검색하십시오.
  • API 유형은 (1) 사용 가능한 데이터와 (2) 존재하는 형식을 알 수 있습니다.

GraphQL 쿼리는 본질적으로 서버로 전송 될 때 JSON을 다시 클라이언트로 반환하는 문자열입니다. 이러한 쿼리는 응답을 반영하여 쿼리 실행에서 반환 되는 데이터의 형태를 쉽게 예측할 수 있습니다. 또한 개발자가 앱에 어떤 종류의 데이터가 필요한지 알고 있으면 쿼리를 쉽게 작성할 수 있습니다.


SQL의 RESTful 서비스 또는 복잡한 조인 문과 달리 GraphQL은 계층 적입니다. 이것은 계층 적 사용자 인터페이스가 사용하는 그래프 구조의 데이터와 잘 작동하는 객체 간의 관계를 따른다는 것을 의미합니다.


GraphQL은 데이터 저장소를 지시하거나 제공하는 대신 기존 코드를 활용합니다. 이는 내성적 인 것으로, GraphQL 서버를 지원하는 유형에 대해 쿼리하여 툴을 이 정보 위에 쉽게 구축 할 수 있습니다.


GraphQL을 사용하면 반환 되는 데이터의 형태는 전적으로 고객의 검색어에 따라 다릅니다. 결과적으로 기존 클라이언트에 영향을 주지 않고 서버에 추가 필드를 쉽게 추가 할 수 있습니다 (예 : 새 제품 기능을 추가 할 때). 이것은 다른 방법으로도 작동합니다. 따라서 이전 기능이 일몰 되면 해당 서버 필드는 더 이상 사용되지 않더라도 계속 작동합니다. 이러한 방식으로 GraphQL은 이전 버전과 호환되는 프로세스를 제공하므로 버전 번호를 증가 시킬 필요가 없습니다.


GraphQL이 무엇인지 더 잘 이해 했으므로 이제 어떻게 시작했는지 빠르게 살펴 보겠습니다.


즉각적인 GraphQL API를 구축하고 이 기술이 어떻게 작동하는지 알아보십시오.


모든 것이 시작된 방법 


그렇다면 GraphQL은 어떻게 시작 되었습니까? GraphQL 이전에 개발자들은 무엇을 사용했으며 어떤 제한이 있었습니까?


모바일로의 전환 


GraphQL의 기원 이야기는 업계가 모바일로 전환 한 것으로 거슬러 올라갑니다. 네트워크 사용량이 많은 문제로 인해 Facebook의 모바일 전략 (예 : 모바일에서 HTML5 채택)이 작동하지 않았던 때였습니다. 결과적으로 Facebook은 기본 기술을 사용하여 iOS 앱을 처음부터 다시 작성하기로 결정했습니다.


모바일 페이스 북 뉴스 피드 구현의 주요 문제. 스토리를 검색하는 사람, 누가 쓴 사람, 말하는 내용, 댓글 목록 및 게시물을 좋아하는 사람만큼 간단하지 않았습니다. 각 스토리는 서로 연결되고 중첩되며 재귀 적입니다. 기존 API는 개발자가 모바일에서 풍부한 뉴스 피드와 같은 경험을 노출 할 수 있도록 설계되지 않았습니다. 계층 적 특성이 없었으며 개발자가 필요한 것을 선택하도록 하거나 이기종 피드 스토리 목록을 표시 할 수 있습니다.


2012 년 Facebook은 Facebook 모바일 앱을 구축하기 위해 새로운 뉴스 피드 API를 구축해야 한다고 결정했습니다. 이 때 GraphQL이 구체화되고 8 월 중순 iOS 5.0 용 Facebook이 새로운 GraphQL 기술로 출시되었습니다. 개발자는 데이터 페치 기능을 활용하여 네트워크 사용량을 줄일 수 있었습니다. 내년 반 동안 GraphQL API의 표면 영역은 뉴스 피드 외에도 Facebook iOS 앱의 대부분을 포함하도록 확장되었습니다. 2015 년에 GraphQL 사양이 JavaScript의 참조 구현과 함께 처음 게시 되었습니다.


기존 REST API의 한계 


기존 REST API의 주요 문제점은 느리고 하드 코딩이 필요하다는 것입니다. 작업 속도를 높이는 한 가지 가능한 솔루션은 여러 끝점을 만드는 것입니다. 그러나 모든 데이터 소스 및 API 클라이언트 애플리케이션이 필요로 하는 것을 추정 할 때 REST API의 한계에 부딪칩니다.


기존 REST API의 한계를 유추하여 설명하려고 합니다.


자판기가 있습니다. 전통적인 REST를 사용하면 자동 판매기에서 하나의 버튼을 누르고 한 가지를 얻습니다. 따라서 필요한 모든 것을 얻으려면 한 번에 많은 버튼을 눌러야 합니다. 이 과정은 느립니다.


그러나 특수 목적 버튼이 있으면 한 번에 여러 가지를 얻을 수 있습니다. 예를 들어, 특수 목적 버튼을 누르고 자동 판매기에서 네 가지를 얻을 수 있습니다.


이 두 가지 접근 방식의 조합은 원하는 버튼을 정확하게 조합하여 필요한 모든 것을 한 번에 얻을 수 있는 자동 판매기를 만드는 것입니다. 이것이 GraphQL이하는 일입니다.


GraphQL은 많은 '멍청한'엔드 포인트가 아닌 단일 '스마트'엔드 포인트를 사용하여 이러한 문제를 해결하는 것을 목표로 합니다. 여기서 중요한 이점은 스마트 엔드 포인트가 복잡한 쿼리를 수행하고 클라이언트가 필요로 하는 모든 것에 데이터 출력을 형성 할 수 있다는 것입니다.


본질적으로 GraphQL 계층은 클라이언트와 데이터 소스 사이에 존재합니다. 클라이언트 요청을 받고 클라이언트의 요구 사항에 따라 필요한 데이터를 가져 오는 것입니다. 간단히 말해서 쿼리에 대한 GraphQL 방식은 광범위한 대규모 앱 개발 문제를 해결합니다.


GraphQL이 인기를 얻은 방법 


아마 상상할 수 있듯이, GraphQL과 같은 솔루션에 대한 업계의 요구가 이미 있었기 때문에 그것이 매우 빨리 잡히는 이유입니다. 처음 6 개월 동안 PHP, JavaScript, Scala, Python 및 Ruby를 포함한 다른 프로그래밍 언어로 GraphQL을 구현했습니다.


새로운 회사와 애호가들이 그것을 만들기 시작했을 때 그것은 빨리 인기를 얻었습니다. 결국이 기술은 2016 년 GitHub부터 시작하여 Twitter, Yelp, The New York Times, Airbnb 등에서 대기업에 의해 채택되었습니다.


GraphQL 주요 컴포넌트 


실제로 GraphQL API는 세 가지 주요 구성 요소를 사용합니다.

  • Queries쿼리는 클라이언트가 요청한 것입니다. 쿼리 필드는 배열을 가리키고 인수를 지원할 수 있습니다.
  • Resolvers. GraphQL 서버는 사용자가 지시하지 않는 한 쿼리로 수행 할 작업을 알지 못합니다. 이것은 리졸버를 사용하여 수행됩니다. 간단히 말하면, 리졸버는 GraphQL에 특정 필드에 해당하는 데이터를 가져 오는 방법 (및 위치)을 알려줍니다. GraphQL을 사용하면 사용하는 API 스키마와 데이터베이스 스키마가 분리됩니다. 이를 통해 데이터베이스의 내용을 수정하기 위해 돌연변이 리졸버로 사용할 수 있습니다.
  • SchemaGraphQL 스키마는 클라이언트가 GraphQL 서버에 연결하면 활용할 수 있는 기능을 설명합니다. 스키마 내의 핵심 빌딩 블록을 유형이라고 합니다.

GraphQL 생태계 


여기서는 GraphQL 생태계의 주요 플레이어를 간략히 살펴 보겠습니다.


GraphQL Servers 


GraphQL은 단순히 사양이므로 시작하려면 GraphQL 서버 구현이 필요합니다.

  • GraphQL-JS는 Express와 함께 사용할 수 있는 GraphQL의 원래 참조 구현입니다.
  • GraphQL-Server는 Apollo의 올인원 GraphQL 서버 구현으로 빠르게 발전하고 있습니다. 모든 GraphQL 클라이언트에서 쿼리 할 수 ​​있습니다.
  • GraphQL-Serverless는 데이터베이스 (MongoDB) 및 클라우드 기능과 완전히 통합 된 Back4App 인스턴트 GraphQL API입니다. 여기서 GraphQL API를 제공하는 서비스로서 백엔드에 액세스 할 수 있습니다.
  • GraphQL Yoga는 Express 및 Apollo 서버에 구축 된 Prisma의 서버 구현입니다.


GraphQL Clients 


GraphQL API를 직접 쿼리 할 수 ​​있지만 전용 클라이언트 라이브러리를 사용하면 작업이 훨씬 쉬워집니다.

  • Relay는 GraphQL을 사용하여 React 애플리케이션을 빌드하기 위한 Facebook의 JavaScript 라이브러리입니다.
  • Apollo Client는 요청을 캐시하고 데이터를 표준화하여 네트워크 트래픽을 절약합니다. 또한 페이지 매김, 프리 페치 데이터 및 데이터 계층과 보기 계층 간의 연결을 지원합니다.

GraphQL Gateways 


아마도 가장 인기 있는 GraphQL 게이트웨이는 Apollo Engine 일 것입니다. 쿼리 실행 추적, 쿼리 캐싱, 오류 추적 및 API 성능 경향 분석 기능이 있습니다.


Open-Source Apps and Tools 


GraphQL을 사용하는 오픈 소스 앱은 다음과 같습니다.

  • GraphQL로 구동되는 Gatsby는 여러 GraphQL API에서 데이터를 가져 와서 정적 클라이언트 전용 React 애플리케이션을 작성하는 데 활용할 수 있습니다.
  • VulcanJS는 GraphQL을 활용하여 사용자가 CRUD 애플리케이션을 신속하게 구축 할 수 있습니다.
  • GraphQL Playground는 GraphQL 쿼리, 돌연변이, 구독, 검증 등을위한 편집기를 포함하는 강력한 IDE입니다. 개발자는 스키마의 구조를 시각화 할 수 있습니다.
  • GraphiQL은 GraphQL API와 상호 작용하고 데이터 쿼리를 가능하게 하고 돌연변이를 수행하며 쿼리를 자동 완성하는 브라우저 내장 IDE입니다.

결론 


GraphQL은 iOS 앱용 Facebook 뉴스 피드 API의 매우 구체적인 문제를 해결하기 위해 만들어졌지만 Facebook에서 더 많은 문제를 해결하기 위해 빠르게 확장되었으며 결국 오픈 소스로 대기업에서 사용하는 커뮤니티 도구가 되었습니다.






  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 53회 ]  작성일19-08-21 18:22

웹학교