패스트캠퍼스 챌린지 19일차 (GraphQL 소개)

22.2.11 (금) +19days

GraphQL 소개

https://www.facebook.com/groups/react.ko

Facebook이 만든 쿼리 언어

A query language for your API

https://graphql.org/

GraphQL | A query language for your API

https://graphql-kr.github.io/

필요한 것을 구체적으로 요청하세요(필요한 것만 정확히 얻어)

단일 요청으로 많은 데이터를 얻으세요(모든 데이터를 한 번에)

타입 시스템으로 가능한 것을 살펴보세요(엔드포인트x, 타입과 필드)

강력한 개발자 도구 제공(https://github.com/graphql/graphiql)

 

 

쿼리 언어??

SQL(Structured Query Language): 구조화된 질의어

RDBMS(관계형 데이터베이스 관리 시스템)의 데이터 관리를 위해 설계된 언어

DB로부터 데이터를 효율적으로 가져오기 위해

GraphQL(Graph Query Language)

서버로부터 데이터를 효율적으로 가져오기 위해

요청하는 주체: 웹 클라이언트(프론트엔드)

 

GraphQL과 REST의 차이점

https://hwasurr.io/api/rest-graphql-differences/

 

리소스

리소스 모양과 크기는 서버에 의해 결정된다.(REST API)

vs

클라이언트가 필요한 리소스를 요청한다.(GraphQL)

 

엔드포인트

다중 엔드포인트, URL과 Method에 따라 접근할 수 있는 데이터가 다르다

vs

보통 단일 엔드포인트. GraphQL 스키아에 따라 데이터가 다르다.

 

라우트 핸들러와 리졸버

각 요청은 정확히 하나의 경로 처리 함수를 호출

vs

하나의 쿼리가 여러 리졸버를 호출하여 여러 리소스가 포함된 중첩 응답 구성

 

그래서 REST API 보다 GraphQL이 어떤 부분에서 더 나은가?

https://howtographql.com/basics/1-graphql-is-the-better-rest

 

REST API를 사용하면 일반적으로 여러 엔드포인트에 엑세스 해서 데이터를 수집해야 한다.

사용자 / 게시물 / 팔로워 데이터를 받아오려면,

/user/<id>

/user/<id>/posts

/user/<id>/followers

 

GraphQL은 구체적인 데이터 요구 사항이 포함된 단일 쿼리로 요청이 가능

사용자 / 게시물 / 팔로워 데이터를 받아오려면,

query {

    User(’id: ‘2132wddsa’) {

        name

        posts { title }

        followers { name }

    }

}

 

REST API는 overfetching과 underfetching을 유발 시킨다.

사용자 이름만 알고 싶은데,

/user/<id> 호출하면 서버가 정해둔 모든 데이터를 받아오게 된다.

 

사용자 정보랑 팔로워 알고 싶은데,

/user/<id>호출하고

/user/<id>/followers 호출해야 한다.

 

GraphQL은 overfetching X, under fetching X

필요한 데이터만 요청할 수 있다.

원하는 중첩 데이터 요청을 할 수 있다.

 

프론트엔드에서 신속한 제품 이터레이션을 돌릴 수 있다.

(서버에 매번 API 요청을 하지 않아도 됨)

 

백엔드 분석이 가능하다.

(프론트엔드에서 어떤 데이터를 가져다 쓰는지 알 수 있게 되므로)

 

스키마 및 타입 시스템의 이점이 있다.

(프론트엔드와 백엔드가 사용하는 데이터 구조를 맞출 수 있음)

Facebook에서 GraphQL을 만든 이유는?

프론트엔드 개발자가 이것저것 하게 해주고 싶어서?

백엔드 개발자가 없어서?

 

같은 DB로 다양한 UI를 구상할 필요가 있었음

Facebook의 같은 홈 화면이어도,

모바일 웹 , 모바일 앱(iOS, Android), PC 웹

경우 각각 다른 UI로 화면을 구성할 필요가 있었음

 

게시글에 대해서도 보여주는 데이터가 제각각

이런 상황을 해소하기 위해 기존의 REST API 방식과 다른 접근을 한 듯

 

GraphQL 정리

vs SQL ⇒ Server와 Web Client 간의 질의어

vs REST API ⇒ 다중 엔드포인트 → 단일 엔드포인트

Overfetching 문제 ⇒ 필요한 데이터만 요청

Underfetching 문제 ⇒ 한 번의 요청으로

 

SWAPI

https://github.com/graphql/swapi-graphql

GitHub - graphql/swapi-graphql: A GraphQL schema and server wrapping SWAPI.

npm install

npm start

run : localhost:port/graphiql

SWAPI 예제 실습

 

스키마에 대해 아예 모르는 상황에 어떻게 할 수 있을까?

Introspection

https://graphql.org/learn/introspection

(번역)https://graphql-kr.github.io/learn/best-practices/

VSCode graphql 익스텐션 설치

프로젝트 루트 폴더에 schema.graphql 파일이 존재한다

환경설정 및 프로젝트 생성 정리

GraphQL은? ⇒ 라이브러리가 아닌 명세다

다뤄보려면 ⇒ 구현체가 필요하다

start wars api ⇒ clone 해서 로컬에서 테스트 해본다

다양한 도구들 ⇒ graphql, graphapi, express... 등

 

 

 

22.2.11 +19days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다