GraphQL: 프런트엔드 초강대국

2013년으로 돌아가면 페이스북 Graph API로 앱을 구축하기 시작했다.API 인터페이스에 대한 놀라움과 사용 편의성에 대해 다루는 글과 평론을 읽은 기억이 있습니다.
심지어 API 문서를 보지 않아도 autocomplete 기능을 통해 필요한 정확한 데이터를 쉽게 찾을 수 있다. 필요한 정보를 어떻게 설명하는지 찾기만 하면 된다.💣 , 우리 시작합시다. 자동 완성 기능은 사람을 흥분시킨다.
더 중요한 것은 사용할 수 없는 데이터를 요청하려고 하면 API가 유용한 오류 메시지에 응답할 수 있습니다.
그 후, 사람들은 이것이 어떻게 가능한지, 그리고 그들이 어떻게 자신의 미래 응용 프로그램에서 이러한 위대한 체험을 실현할 수 있는지 알고 싶어지기 시작했다.
2015년에 페이스북announced a new data query language이 GraphQL에 전화를 했는데 어떻게 된 것 같아요?개발자가 2년 전 지금부터 페이스북 API를 이용할 때 가졌던 거대한 체험 이면의 비밀이다.

This article is not a GraphQL tutorial. Instead, I want to highlight the benefits of using GraphQL and why you need to give it a try in your next project.

This article only focuses on the positive sides of using GraphQL and that's not mean GraphQL is the best choice for all use cases and doesn't have any concerns.


GraphQL이란?


official website에서 말한 바와 같이GraphQL은 API와 실행할 때의 조회 언어로 기존 데이터를 사용하여 이 조회를 완성하는 데 사용된다.간단히 말하면GraphQL은 데이터를 어떻게 요청하는지를 설명하는 문법이나 규범이다.GraphQL 조회는 서버에 보내서 설명하고 실현한 다음에 서버가 클라이언트에게 JSON 응답을 되돌려주는 간단한 문자열입니다.
우선 GraphQL은 페이스북이 과도/부족 캡처 문제를 해결하는 해결 방안이다.게시 블로그 글에서 설명한 바와 같이 문제는 페이스북이 웹 플랫폼에 이미 사용된 같은 API를 사용하여 모바일 앱을 구축하기 시작했을 때 모바일 측이 필요로 하는 데이터와 이미 존재하는 서버 API 간의 차이에 대해 곤혹스러워하는 것이다.같은 방법을 사용하면 필요하지 않은 데이터를 더 많이 불러오는 것을 의미한다.그 밖에 모바일 플랫폼은 대량의 API 요청에도 자신만의 문제가 있기 때문에 이론적으로 해결 방안은 매우 간단하다. 여러 개의 REST 노드가 있는 것보다 왜 우리는 클라이언트(web 또는 이동)의 조회를 이해하고 정확한 데이터를 되돌릴 수 없는 간단한 노드가 있는가.불필요한 데이터가 없고 API 호출이 추가되지 않았습니다.
GraphQL은 내가 본 것 중 가장 먼저 사용된 기술 중 하나라고 생각한다. 겨우 4년 만에 Github, Shopify, 트위터 등 대기업들이 그것을 사용하기 시작한 것을 보았다.API는 제품 개발과 마이그레이션에서 가장 어려운 부분 중 하나이기 때문에 다음 예는 매우 큰 위험이 있습니다.그러나 모든 회사들이 자신의 선택에 기뻐하며 심지어는 그것을 사용하도록 격려한다.

왜 프런트엔드 개발자가 GraphQL을 즐겨 사용합니까


이것은 사실이다. 내가 최근에 만난 대부분의 GraphQL을 사용한 전방 개발자들은 나에게 다음 프로젝트에서GraphQL을 사용할 것이라고 보증했다.더 중요한 것은 그 중 한 사람이 나에게 만약 팀이 그것을 사용하지 않는다면 그가 그것을 위해 분투할 것이라고 말한 것을 기억한다😁.
이 배후의 비밀은 여러 가지 요소에서 나온다.

우수한 개발 경험


GraphQL 생태계는 전방 엔지니어에게 좋은 사용자 체험을 제공합니다. 응용 프로그램이 아무리 크든 작든 서버에서 데이터를 얻는 문제를 처리해야 하기 때문입니다. 만약에 REST API를 사용하고 상태 관리 라이브러리(예를 들어 Redux)와 결합시키려면 Redux saga를 추가해서 데이터 획득을 처리해야 합니다.데이터를 캐시하려면 데이터를 규범화하기 위한 변환이 필요할 수 있고, 낙관적인 UI 정책을 사용하려면 많은 작업이 필요합니다.그러나 Apollo 클라이언트 (가장 유행하는GraphQL 클라이언트 라이브러리 중 하나) 를 시도할 때, 이 모든 기능을 무료로 얻을 수 있습니다. 이로써 응용 프로그램의 논리에 더욱 관심을 가지고 코드 템플릿을 줄일 수 있습니다.Apollo client는 TypeScript, Chrome 개발 도구와 VS 코드에도 유용한 도구를 제공합니다.

API 문서


페이스북 API의 이야기를 기억하십니까? 이것은 프런트 개발자가 백엔드에서 진정으로 원하는 디버깅과 API 문서를 읽는 스마트 도구입니다. GraphQL은 통합된 문서 시스템을 덧붙여서 조회할 수 있는 모델을 설명하고 있으며, 거의 모든 GraphQL이 실행하는 데 무료로 도구를 제공합니다. 이것은GraphiQl이라고 부릅니다.
GraphiQl은 쿼리를 실행하고 디버깅하며 대화식으로 패턴 문서를 조회할 수 있는 쿼리 플랫폼이기 때문에 백엔드 팀에 속성 유형을 묻거나 일부 내용을 추가하거나 수정할 필요가 없다.
GraphiQl 놀이터

표현


우리가 이미 설명한 바와 같이 QraphQl은 페이스북이 데이터 획득 부족/과도한 문제에 대한 해결 방안이다.만약 당신이 빠른 사이트를 만들고 싶다면, 데이터를 얻는 것은 당신이 개선해야 할 가장 중요한 행렬 중 하나입니다.GraphQL 규범은 당신이 필요로 하는 내용만 검색하고, 요청에서 많은 자원을 검색할 수 있도록 도와줄 것입니다. 이것은 성능에 큰 영향을 미칠 것입니다.
예를 들어, 우리는 게시물 요약 페이지를 구축하고 있으며, 사용자와 평론을 표시해야 한다.REST API를 사용하면 최소한 세 개의 API 호출이 필요할 수 있습니다. /posts, /user?postId=X 사용자 데이터를 검색하고 /comments?postId=X.
GraphQL을 사용하면 간단한 조회를 사용하여 모든 데이터를 한 번에 검색할 수 있습니다.
{
  allPosts {
    content
    user {
      id
      name
    }
    comments {
      edges {
        id
        content
      }
    }
  }
}

최전방 초강대국


현재는 GraphQL이 강력한 도구 생태계를 통해 개발자의 체험을 개선하고 과도/부족한 데이터 획득을 해결함으로써 웹과 모바일 성능을 향상시키는 데 동의하지만, 이 특정 부분에서 GraphQL이 팀의 다른 부분을 어떻게 앞장서게 하는지 제 관점에서 강조하고 싶습니다.
이 생각은GraphQL이 무서버 체계 구조에 매우 적합하기 때문이다. 내가 오래 전에 생각한 바와 같이 나는 무서버 체계 구조가 시장에 나타난 것은 백엔드나 DevOps 개발자에게 의존하지 않고 자신의 제품을 개발하는 것을 돕기 위해서라고 거의 믿지 않는다.
프런트엔드 엔지니어로서 저는 서버가 없는 구조로 자신의 엔드 프로젝트를 구축하려고 했습니다. 데이터 처리는 어려운 부분이지만GraphQL을 사용하면 제 모델과 그들 간의 관계를 설명하고 서비스(예를 들어 Prisma, Hasura 또는 Faunadb와 간단한GraphQL 모델을 사용합니다.이런 경험은 사람을 흥분시킨다.

비뚤어지다


마지막으로GraphQL은 데이터 집합기와 추상층으로 개발 속도와 성능을 향상시키고 개발자를 더욱 즐겁게 할 수 있으며 특히 전단 개발자를 더욱 즐겁게 할 수 있다.이 블로그에서 GraphQL이 어떻게 당신의 일상적인 업무를 도와주고 개선하는지 여러분에게 알려주려고 합니다. 저는 당신이 시도할 때만 그것을 느낄 수 있다고 믿습니다.그게 왜 지금 니가 빨리 해볼 차례야?
나는 네가 이것이 매우 재미있고 정보가 풍부하며 매우 재미있다고 느끼기를 바란다.나는 너의 평론과 생각을 듣고 매우 기뻤다.
만약 다른 사람들이 이 글을 읽어야 한다고 생각한다면.트위터, 공유, 다음 글 공유.
기사 더 보기👉 http://elazizi.com/

좋은 웹페이지 즐겨찾기