25 가지 최고의 JavaScript API

지금 당장 최고의 JavaScript API를 선택하고이를 사용하기위한 가이드를 제공합니다. 사이트와 앱에 새롭고 흥미로운 기능을 추가하는 데 도움이됩니다. 경고 : 이러한 API 중 상당수가 아직 개발 중이므로 사용을 시작하기 전에 브라우저 지원을 확인하고 필요한 경우 대체 기능을 제공하세요.

sega는 새로운 콘솔을 만들 것입니다

더 멋진 플러그인을 탐색하려면 최고의 가이드를 확인하세요. HTML APIGoogle API . 또는 코드없이 처음부터 사이트를 구축하려면 웹 사이트 빌더 . 또한 귀하의 선택을 고려하는 것이 중요합니다. 웹 호스팅 사이트가 원하는대로 실행되는지 확인합니다.



01. 브라우저 설정 수정

브라우저는 일반적으로 실행중인 코드의 '위'에 있지만 Mozilla에서 파생 된 API는 브라우저 설정에 대한 JavaScript의 제한된 액세스를 허용합니다. 사용자의 홈페이지 읽기, 북마크 처리 방법, 새 탭이 표시되는 위치와 같은 측면을 생각해보십시오.



02. 파일 API

많은 양의 영구 데이터를 처리하는 것은 웹 앱에서 항상 약간의 문제였습니다. W3C 파일 API는 다양한 공급 업체에서 사용하는 몇 가지 개념을 결합합니다. 대부분 보안상의 이유로 전체 파일 시스템 액세스가 허용되지 않는다는 점에 유의하십시오.

03. Microsoft Cognitive 서비스

JavaScript API : Microsoft Cognitive 서비스



(이미지 출처 : Microsoft)

인공 지능에는 엄청난 양의 교육 데이터가 필요합니다. 논리적으로 공급 업체는 이러한 모델을 고객에게 제공 할 동기가 없습니다. 대신 개발자는 서버에 페이로드를 전송 한 다음 온라인으로 분석 할 수 있습니다.

모든 대규모 클라우드 공급 업체는 다소 정교한 인공 지능 서비스를 제공하지만 Microsoft는 AI 기능에 중점을두고 있습니다. API 제안은인지 서비스라는 용어로 포함됩니다. 고급 이미지 인식 서비스와 같은 기능에 액세스 할 수 있습니다. 예를 들어,이 상자와 함께 제공되는 스냅 샷은 언론 사진에서 Microsoft CEO를 인식하는 데 사용되는 AI를 보여줍니다. 다른 기능은 비디오, 손글씨, 음성 인식 및 전사와 관련이 있습니다.

일반적으로 출력의 품질은 매우 높지만, 계속 사용하는 것은 비용이 거의 들지 않습니다. 시간이 지남에 따라 사용 요금이 합산 될 수 있습니다. (백업 할 미디어 파일이있는 경우 최고의 클라우드 스토리지 .)



04. 공개 정부 API

민주적으로 선출 된 대표들은 일반적으로 돈을 바꾸는 데 뛰어난 기술을 보여줍니다. 개방형 정부의 개념은 이러한 작업의 결과가 (일반적으로 개방 된) API를 통해 제공되므로 타사 개발자가 모든 종류의 데이터 수집 마법을 수행 할 수 있음을 의미합니다.

특히 흥미로운 영역 중 하나는 교통에 관한 것입니다. 대중 교통 서비스는 차량의 실제 위치와 경로 네트워크에서 보이는 주파수를 API에 제공하는 경향이 있습니다.

이것은 순수한 이타주의로 인한 것이 아닙니다. 올바르게 수행되면 특정 도시 또는 마을의 '지역 교통'애플리케이션이 지역 앱 스토어의 순위를 빠르게 올릴 수 있습니다. 정부는 서비스를 만드는 데 자원을 투자 할 필요가 없지만 개발자는 (일반적으로) 지역적으로 제한된 청중으로 인해 광고 공간을 깔끔하게 판매합니다.

이러한 API 외에도 개발자는 일반적으로 다른 것에도 느슨해집니다. 예를 들어, 프랑스 정부는 주소 검색을위한 비교적 상세한 기능을 제공 할 것입니다.

05. 여기 매핑 API

JavaScript API : 여기

(이미지 출처 : HERE)

경쟁은 정의상 좋습니다. 다음은 Nokia의 이전 매핑 부서이며 개발자에게 빅 3의 매핑 서비스에 대한 '제 3 자'대안을 제공합니다. 한 가지 흥미로운 점은 타일 다운로드를 쉽게 만들어주는 매우 간단한 API입니다.

06. OpenStreetMap API

OpenStreetMap은 즉시 표시 가능한지도를 제공하지 않습니다. 대신 CartoType과 같은 렌더링 서비스가 필요합니다. 웹 사이트에서 작업 할 때 전용 렌더링 시스템을 만드는 것은 약간의 작업입니다. MapBox는 편리한 종량제 대안을 제공합니다.

07. 언어학 석사

사용자 생성 콘텐츠를 다루는 프로그램은 통합 번역 서비스를 제공하여 브라우니 포인트를 획득 할 수 있습니다. 예를 들어 Twitter 또는 Gab의 고객은 영어 텍스트를 러시아어로 번역하여 해당 청중이 쉽게 처리 할 수 ​​있도록 할 수 있습니다.

'기계 기반 번역 시스템'은 IT 분야에서 가장 오래된 연구 분야 중 하나이지만 실행 가능한 기계 번역기를 직접 개발하는 것은 어렵습니다. 마이크로 소프트의 번역 API는 최근 3.0 버전으로 업데이트되었으며 바벨 레즈 범위의 모든 문제에 대한 원 스톱 상점입니다. 언어 쌍 간의 번역을 수행하는 것 외에도 서비스를 사용하여 특정 텍스트가 어떤 언어로되어 있는지 알아낼 수도 있습니다. 그런 다음이 데이터를 사용하여 맞춤법 검사기와 같은 더 적은 API를 구성 할 수 있습니다.

마지막으로 관용구와 개별 단어를 사전 쿼리로 보낼 수도 있습니다. 반환 된 정보는 상황에 따라 다릅니다. 경우에 따라 Microsoft는 이해를 돕기 위해 수십 개의 관용구를 반환 할 수도 있습니다.

08. 오프 스크린 캔버스 API

개발자들은 한때 이중 버퍼링이라는 기술을 사용하여 깜박임없이 그래픽을 렌더링했습니다. 구글은 비슷한 것을 도입했습니다. 그래픽을 고성능으로 '스테이징'할 수있는 오프 스크린 창을 만듭니다.

09. NASA

JavaScript API : NASA

(이미지 출처 : Microsoft)

Windows Phone 7 사용자에게 가끔 큐레이팅 된 배경 화면을 제공하기로 한 Microsoft의 결정은 업계 전체에 파급 효과를 가져 왔습니다. 우주의 사진이 항상 인기가 있다는 점을 감안할 때 소스로 바로 가서 NASA의 끝없는 상점에서 몇 장을 가져가는 것은 어떻습니까?

10. Slack 데이터 가져 오기

Slack은 '현대적인 프로젝트 관리'를위한 도구로 자리 매김했습니다. 그러한 프로젝트에 포함 된 데이터를 사용하고 싶다면 API 토큰을 받고 해킹하세요. 올바르게 완료되면 웹 애플리케이션이 Slack GUI에 통합 될 수도 있습니다.

11. YouTube API

JavaScript API : YouTube

(이미지 출처 : Microsoft)

YouTube 채널은 그 뒤에 서있는 분석만큼이나 좋습니다. Google의 YouTube Data API는 특별히 멋지지 않을 수 있지만 무엇보다도 잠재 고객의 행동에 대한 귀중한 통찰력을 제공합니다.

12. 결제 요청 API

JavaScript API : 결제 요청 API

우리가보고있는 첫 번째 JavaScript API는 지불 요청 API입니다. 만들 때 전자 상거래 웹 사이트 , 가능한 한 원활하고 고통스럽지 않은 경험을 보장하기 위해 결제 흐름을 개선하는 데 많은 생각이 듭니다. 지불 세부 정보를 입력하는 것은 반복적 인 프로세스로 남아 있습니다. 필드가 약간 잘못되면 전체 프로세스가 중단되고 다시 시작해야합니다. 개발자 측에서는 각 결제 수단에 대해 올바른 유효성 검사가 이루어 졌는지 확인하는 데 시간이 많이 걸립니다.

결제 요청 API는 체크 아웃 경험의이 부분을 제거합니다. 페이지는 필요한 정보를 요청할 수 있으며 브라우저는 사용자에게 입력 할 필드를 제공합니다.

사용자는 세부 정보를 한 번만 입력하면되고 다양한 웹 사이트와 거래에서 사용할 수 있습니다. 기기에 따라 Google 및 Apple Pay와 같이 사용자 계정에 연결된 결제 수단을 사용할 수도 있습니다.

const request = new PaymentRequest( [{ supportedMethods: 'basic-card' }], { total: { label: 'Total', amount: { currency: 'GBP', value: 6.5 } } } );

개체는 발생해야하는 지불을 설명하는 몇 가지 매개 변수를 사용합니다. 첫 번째는 허용되는 지불 방법을 자세히 설명합니다. 이는 다양한 유형의 결제 카드 일 수 있으며 다른 타사 결제 솔루션과 통합하기위한 세부 정보 일 수 있습니다. Payment Handler API를 사용하여 다른 웹 애플리케이션을 결제 수단으로 포함 할 수있는 범위도 있습니다.

두 번째는 구매 대상에 대한 분석입니다. 이는 거래에 적합한 모든 형식 일 수 있습니다. 여기에는 배송지 주소와 같은 다른 요소를 기반으로 계산할 수있는 배송비 옵션도 포함됩니다. 이메일 주소 또는 연락처와 같이 수집해야하는 추가 정보를 지정하는 세 번째 선택적 인수도 있습니다.

13. CSS 레이아웃 API

JavaScript API : CSS 레이아웃 API

일반적으로 귀하의 웹 사이트 레이아웃 CSS에 맡겨야합니다. JavaScript를 사용하면 레이아웃 변경을 처리하면 성능이 저하되고 수동 유지가 많이 발생하기 쉽습니다. 그러나 사이트에 비표준 레이아웃이 필요한 경우 어떻게됩니까? CSS가 제공하는 전통적인 격자 형 배치는 더 창의적인 디자인 아이디어에는 작동하지 않을 수 있습니다.

Layout API를 통해 개발자는 현재 사용중인 기존 그리드 또는 플렉스 모듈과 매우 유사한 자체 레이아웃 모듈을 만들 수 있습니다. 작동해야하는 규칙을 정의함으로써 API는 포함 된 요소 내의 모든 위치에 항목을 배치 할 수 있습니다. 브라우저에 적용되는 두 번째 Houdini API입니다.

Houdini는 웹 작업자와 유사하게 작동하지만 하나의 활동에 고도로 전문화 된 'worklet'개념을 도입했습니다. Layout API는 특정 레이아웃 worklet을 통해 작동합니다. 이들은 브라우저에 등록되어 CSS에서 선택할 수 있습니다.

그래픽 디자이너를위한 무료 종이 샘플
class MasonryWorklet { *layout(children, edges, constraints, styleMap) {} } registerLayout('masonry', MasonryWorklet);

레이아웃 워크 릿에는 형세 , 요소의 위치를 ​​다룹니다. 생성기 기능으로 실행되어 페이지의 나머지 부분과 병렬로 실행되어 모든 것이 원활하게 실행되도록합니다.

첫 번째 매개 변수는 레이아웃이 적용된 요소의 직계 하위 요소에 대한 참조입니다. 크기 데이터는 두 번째 및 세 번째 매개 변수에서 사용할 수 있습니다. 하나는 스타일이 지정되는 요소에 대한 위치 및 치수 정보를 제공하고 다른 하나는 요소가 작동해야하는 제약 조건을 정의합니다. 마지막 매개 변수는 관심이있을 수있는 사용자 정의 속성을 포함하여 요소의 나머지 스타일을 설명합니다.

.el { display: layout(masonry); }

사용자 정의 모듈은 일반적인 디스플레이 요소의 속성. 그것은 형세 worklet의 이름과 함께 함수.

14. 자격 증명 관리 API

JavaScript API : 자격 증명 관리 API

개별 로그인 세부 정보를 많이 기억할 필요없이 사용자는 브라우저에 저장된 자격 증명으로 로그인 할 수 있습니다. 이렇게하면 여러 장치의 사용자가 매번 로그인 할 필요없이 세부 정보를 확인할 수 있습니다.

브라우저의 자동 완성 기능은 비밀번호 자체 입력과의 마찰을 줄일 수 있지만 Credential Management API는 사용자가 페이지를 방문하자마자 자동으로 로그인 할 수 있습니다. 공개 키와 같은 다른 인증 형식을 사용하거나 OpenID와 같은 인증 공급자를 통해 로그인 할 수도 있습니다.

15. CSS Paint API

JavaScript API : CSS Paint API

CSS와 JavaScript는 종종 웹 사이트의 개별 부분으로 간주되며 클래스 이름을 추가하는 것과 같이 작은 방법으로 만 결합됩니다. 개발자는 DOM을 직접 업데이트하는 것 외에 브라우저가 페이지를 렌더링하기로 결정하는 방법을 변경할 기회가 거의 없습니다.

새로운 사양 세트가 브라우저에 적용되기 시작하면서 내년에 모든 것이 변경 될 예정입니다. JavaScript를 통해 브라우저의 렌더링 파이프 라인에 대한 액세스를 제공하여 개발자가 필요에 따라 브라우저의 작업을 미세 조정할 수 있도록합니다.

Houdini 태스크 포스는 브라우저 및 기술 회사의 사람들로 구성됩니다. 그들은 개발자가 쉽게 접근 할 수 있도록 브라우저에서 모든 것이 렌더링되는 방식을 개방하는 것을 목표로합니다. 여기에는 레이아웃, 글꼴 및 애니메이션이 포함됩니다.

아이 패드 미니 딜 블랙 프라이데이 2017

이미 브라우저를 강타하는 첫 번째 사양은 CSS Paint API (CSS Custom Paint라고도 함)입니다. 이 API를 사용하면 CSS 속성이 이미지를 예상 할 때마다 프로그래밍 방식으로 이미지를 생성 할 수 있습니다. JavaScript를 사용하여 동적 배경, 테두리 및 이미지 마스크를 생성하고 성능 저하없이 CSS에 적용합니다. Chrome Stable에서 기본적으로 활성화됩니다.

class MyPaintWorklet { static get inputProperties() { return []; } paint(ctx, size, properties) { } } registerPaint('my-paint', MyPaintWorklet);

Paint API는 paint worklet을 사용하여 화면을 업데이트해야 할 때마다 브라우저가 수행해야하는 작업을 정의합니다. 각 페인트는 새로운 버전의 worklet을 사용할 수 있습니다. 즉, 영구 데이터는 다른 곳에 저장되어야합니다.

그만큼 페인트 콜백 메서드는 세 가지 값을 전달받습니다. 첫 번째는 캔버스 컨텍스트와 매우 유사하게 작동하는 컨텍스트입니다. 동일한 방식으로 그릴 수 있고 대부분의 동일한 기능을 갖지만 1 초에 여러 번 호출 할 수 있으므로 단순하게 유지해야합니다.

두 번째 값은 높이 및 너비와 같이 칠할 요소에 대한 정보를 제공합니다. 이것은 최종 결과가 사용될 때마다 완벽하게 맞는지 확인하는 데 사용할 수 있습니다.

최종 값에는 객체의 모든 스타일 속성이 포함됩니다. 여기에는 getter 내에 정의 된 모든 입력 사용자 정의 속성이 포함됩니다. 이들은 CSS 값을 JavaScript에서보다 쉽게 ​​소화 할 수 있도록하는 또 다른 새로운 Houdini 기능인 Typed Object Model을 사용합니다.

마지막 호출은 브라우저에 worklet을 등록하고 CSS 측으로 엽니 다.

.el { background-image: paint(my-paint); }

CSS 내에서 사용하려면 한 줄 함수가 필요합니다. 전달 된 값은 worklet을 등록 할 때 제공되는 효과의 이름입니다. API 및 관련 worklet은 Chrome 및 Opera에서 사용할 수 있지만 Safari, Firefox 및 Samsung 인터넷 브라우저의 주요 초점으로 남아 있습니다. 사양이 거의 완성 되긴하지만 곧 해당 브라우저에 적용될 것으로 예상됩니다.

사양에 대한 이후 반복은 현재 그래디언트가 정의 된 방식과 유사하게 CSS 함수에 대한 인수를 제공하는 메커니즘을 제공합니다. 이를 통해 사용자 지정 속성을 적용하지 않고도보다 쉽게 ​​사용자 지정할 수 있습니다. 레이어링을위한 알파 채널 정의와 같은 다른 옵션도 고려 중입니다.

16. 웹 애니메이션 API

JavaScript API : 웹 애니메이션 API

JavaScript를 사용한 애니메이션은 역사적으로 나쁜 평가를 받았습니다. 위치 값을 변경하여 요소를 이동하면 많은 다시 그리기가 발생하고 성능이 저하됩니다. CSS 애니메이션 더 나은 선택이지만 즉석에서 조작하기가 어렵습니다.

Web Animations API는 CSS 측을 구동하는 동일한 애니메이션 엔진에 대한 액세스를 제공합니다.

Const animation = el.animate( [ { transform: 'rotate(0)' }, { transform: 'rotate(360deg)' } ], 1000 );

모든 요소에는 생기 있는 일련의 키 프레임과 설정 개체 또는 기간을 사용하는 메서드입니다. 그러면 애니메이션 개체가 반환되며,이를 업데이트하여 재생, 일시 중지 및 재생 속도를 조정할 수 있습니다.

애니메이션 워크 릿을 사용하여 Houdini에서 얻을 수있는 추가 이점이 있습니다. 이는 API와 유사한 구문에서 작동하지만 더 세밀한 제어가 가능합니다. 스크롤 또는 터치 위치와 같은 시간 이외의 입력으로 제어 할 수 있습니다. 아직 개발 중입니다. 자세한 내용을 알아 보려면 Chrome 개발자 블로그 .

Web Animations API 자체에 대한 지원은 작지만 빠르게 증가하고 있습니다. 기능 감지를 사용하면이를 지원하는 사람들은 바로 이점을 느낄 수 있습니다.

17. 쓰기 가능한 파일 API

JavaScript API : 쓰기 가능한 파일 API

웹 응용 프로그램의 장기적인 목표는 기본 응용 프로그램과 동일한 수준에 있도록하는 것입니다. 그러나 일부 기능은 여전히 ​​부족합니다. 특히 로컬 파일 관리와 관련된 것입니다.

현재 파일 쓰기에는 다운로드를 생성하고 특정 디렉토리에 저장하는 작업이 포함됩니다. 특정 파일에 대한 반복을 저장하면 여러 개의 복사본이 생성되므로 항상 좋은 경험은 아닙니다.

Writable Files API는 개발자에게 더 많은 유연성을 제공하고 사용자가 파일을 저장할 위치를 결정할 수 있도록합니다. 이를 통해 온라인 코드 편집기 또는 복잡한 그래픽 응용 프로그램과 같이 웹에서보다 완전한 기능을 갖춘 프로젝트에 대한 문을 열 수 있습니다.

이 API는 현재 Google의 역량 프로젝트 . 현재 오리진 평가판에서 브라우저에 적용되기 전에 잠재적 기능에 대한 피드백을 수집하는 중입니다. 보안과 관련된 문제와 어떤 종류의 파일을 어디에 쓸 수 있는지는 API가 공식화되기 전에 해결되어야합니다.

18. 일반 센서 API

우리가 매일 가지고 다니는 장치의 센서는 애플리케이션에 추가적인 이점을 제공하는 좋은 방법입니다. 가속도계와 같은 물리적 환경을 사용하면 창의적인 경험에 몰입감을 더할 수 있습니다.

이러한 종류의 이벤트가 이미있는 경우 새 API가있는 이유는 무엇입니까? 장치는 끊임없이 변화하고 새롭고 다양한 센서를 추가합니다. 새로운 센서가 나올 때마다 새로운 API를 생성하지 않아도되기 위해 Generic Sensor API는 이들 모두에 대해 단순화 된 인터페이스를 생성합니다.

API는 아직 개발 중이지만 Chrome과 Firefox는 모두 사용할 수있는 플래그 뒤에 API를 포함합니다. 다른 브라우저에서는 향후 고려 중입니다.

19. 페인트 타이밍 API

JavaScript API : Paint Timing API

올해는 성능이 큰 관심사입니다. 파일 크기를 줄이면 도움이 될 수 있지만 브라우저에 다운로드되는 것보다 성능에 더 많은 것이 있습니다. 브라우저는 무언가 변경 될 때마다 화면에 내용을 '그립니다'. 첫 번째 페인트가 발생할 때까지 사용자는 빈 화면을 응시하게됩니다. 자산 다운로드 또는 JavaScript 처리와 같은 다른 세부 사항에 얽매이면 첫 번째 페인트에 걸리는 시간이 더 오래 걸릴 수 있습니다.

Paint Timing API는 두 가지 이벤트 (첫 번째 페인트와 첫 번째 '콘텐츠가있는'페인트)에 대한 자세한 정보를 유지합니다. 첫 번째 페인트는 텍스트 나 이미지와 같은 스타일링 이상의 것을 나타냅니다.

그만큼 PerformanceObserver 인터페이스는 이러한 이벤트가 발생할 때 수행 할 작업을 설명합니다. 그런 다음 나중에 분석을 위해 데이터를 서버로 보내는 데 사용할 수 있습니다.

현재 이것은 Chrome과 Opera에서만 사용할 수 있지만 Edge 및 Safari와 같은 다른 브라우저는 모두 관심을 보였으며 향후 포함 할 것입니다.

20. 웹 음성 API

이 API는 합성과 인식의 두 부분으로 구성됩니다. 음성 합성은 제공된 텍스트를 가져와 사용자가 선택한 음성으로 읽습니다. 그만큼 SpeechSynthesis 객체는 말해야하는 내용을 포함하여 모든 다른 옵션에 대한 액세스를 제공합니다. 인식에는 마이크 입력을 받고 말하는 단어를 이해하는 것이 포함됩니다. 그만큼 음성 인식 객체는 음성을 감지하는 데 사용되며, 사용자가 말한 내용과 자신감이있는 '결과'를 표시합니다.

API의 합성 측면은 모든 주요 브라우저에서 지원됩니다. 음성 인식 지원은 현재 접두사가있는 Chrome 또는 플래그가 활성화 된 Firefox로 제한됩니다.

모든 예술가가 가져야 할 미술 용품

화상 회의의 실시간 기록을 제공하는 WebRTC를 포함하여 다른 입력을 포함하도록 인식 측면을 확장하기위한 논의가 있습니다. 아직 초기 단계에 있지만 웹 세미나 및 온라인 프레젠테이션을보다 쉽게 ​​액세스하고 참조하기 쉽게 만들 수 있습니다.

21. 교차로 관찰자

이 JavaScript API는 포함하는 요소 ( '루트')와 관련된 DOM 요소 ( '대상'이라고 함)의 가시성과 위치를 이해하는 데 사용할 수 있습니다. 요소가 특정 영역에 들어오고 나갈 때마다 콜백을 실행하는 데 사용합니다. 이 API는 지연로드 또는 무한 스크롤 효과에 가장 적합합니다.

22.보고 관찰자

보고 API의 일부인보고 관찰자는 JavaScript에서 일부 유형의 보고서를 관찰합니다. 브라우저가 개입해야 할 때 (예 : 느리게로드되는 글꼴에 대한 대체를 제공해야하는 경우)이를 사용하여 알림을받습니다.

23. OffscreenCanvas

그리기 브라우저에게는 값 비싼 작업입니다. 이 새로운 API를 사용하면 DOM을 사용하지 않고도 메인 스레드에서 그래픽을 렌더링 할 수 있습니다.

24. API 국제화

네임 스페이스에 의해 알려진 국제 , ECMAScript 국제화 API는 언어 구분 문자열 비교, 숫자 형식, 날짜 및 시간 형식을 제공합니다. 무거운 라이브러리를 보내는 것을 방지하고 날짜, 숫자 및 문자열을 사용자 위치에 맞는 형식으로 표시하는 데 사용합니다.

25. GraphQL

엄격한 의미에서 API는 아니지만 GraphQL은 API를 논의 할 때 항상 언급 할 가치가있는 것입니다.

광기에 대한 방법은 객체 저장소를 포함하는 서버에 대해 실행되는 쿼리와 관련이 있습니다. 개발자가 각각의 모든 요소에 대한 액세스 API를 만들도록하는 대신 '일반적인'쿼리 언어가 설정됩니다. 그런 다음 API 개발자는 다음에 포함 된 개체에 대한 표준화 된 설명을 제공해야합니다.

type Query { me: User } type User { id: ID name: String }

다음 단계에서는 이러한 형식화 된 설명에 대해 하나 이상의 쿼리를 실행합니다. (가상) 인간 데이터베이스에 대한 예는 다음과 같습니다.

{ human(id: '1000') { name height } }

GraphQL 가능 서버는 원하는 필드를 포함하는 JSON 객체를 반환하여 반응합니다. 공간 제약으로 인해이 주제를 더 자세히 설명 할 수 없습니다. 이 튜토리얼 그러나 흥미로운 개요를 제공합니다.

이것은 원래에 등장한 기사의 편집 된 버전입니다. 웹 디자이너 매거진.

더 읽어보기 :