GraphQL에 대하여

230126 ver

1. 참고 문서 & 영상

■ 문서

1. https://graphql-kr.github.io/learn/ - 공식문서
2. https://www.howtographql.com/ - 튜토리얼
3. https://relay.dev/docs/tutorial/intro/ - GraphQL과 Relay 튜토리얼

■ 참고 영상 & 강의

1. https://youtu.be/N-81mS2vldI - 이 영상을 보고나면 REST API를 못쓰게 됩니다.
2. https://youtu.be/1imQ1_aOQvU - REST API를 버리고 GraphQL를 선택한 이유
3. https://nomadcoders.co/graphql-for-beginners - GraphQL로 영화 API 만들기
4. https://nomadcoders.co/react-graphql-for-beginners - GraphQL로 영화 웹 앱 만들기

▶ 영상 3과 4는 노마드 코더 무료강의

- GraphQL의 라이브러리로 Apollo로 진행하기에 도중에 중단했다.

- 본인은 다른 라이브러리, Relay를 선택했다.

---

2. GraphQL을 이해하기 위해 알아야 할 것들

■ API

• API - Application Programming Interface
• 서버와 통신하기 위해 만들어진 인터페이스(Interface)
• 인터페이스?
  - 상호작용(interaction)의 얼굴(face)
  - 무언가와 상호작용하는 방식
  - 기본적으로 사용자에게 노출되어 있는 버튼 (ex. 텔레비전 리모컨, 웹사이트의 버튼)

Q. API를 이해해야 하는 이유?

- Graph api와 REST api 보다 더 광범위하기 때문

 

■ REST API

1. 특징

• 여러 API 중, 가장 유명한 API
• 서로 다른 서버간의 통신이나 IOS 어플리케이션이 서버와 통신할 때, URL이 Interface인 API
• 여러 개의 URL을 활용하여 작동한다.
  - 각 URL은 고유하며, 각기 다른 데이터를 제공한다.
• 직관적이라서 유추하기 쉽다.
  - URL을 보면, 무엇을 요청(request)했는지 파악할 수 있다.

▶ 조직화되어 있고, 이해하기 쉬워서 REST API를 선호하는 사람들이 있다.

▶ URL을 요청하고, data를 받아오기만 하면 되기 때문에 REST API를 이용한 작업은 정말 간단하다.

▶ 전세계의 거의 모든 디바이스들이 URL로 요청을 보낼 수 있다. 

▶ URL은 JSON 배열을 준다. 리소스나 리소스 목록을 얻을 때, 이런 URL을 사용한다. 이를 위해서는 웹사이트가 이 URL을 공개적으로 노출시켜줘야 가능하다. 웹사이트에서는 사람들이 이 URL을 요청하는 것을 허용시켜줘야 가능하다.

 

 

2. 문제점

• Over Fetching : 필요한 것보다 더 많은 데이터를 가져오는 경우
• Under Fetching : 필요한 것보다 적은 양의 데이터를 가져온 경우

 

■ REST API 와 GraphQL 비교

1. 공통점

• 클라이언트와 서버간 의사소통을 위해서는 필요하다

 

2. 차이점

• 버튼들이 어떻게 노출되어 있는가
• 해당 API의 데이터에 어떻게 접근하는지
• 서버와 어떻게 소통하는지

▶ REST API는 시간이 오래 걸리고 양도 많다.

▶ GraphQL은 시간도 절약되고 양도 적다. 그에 따라 속도도 빠르고 가독성도 좋다.

---

3. GraphQL

■ 라이브러리

• Apollo
• Relay

cf) Apollo 과 Relay 비교

 

 

■ 설명 & 특징

Q. 깃헙(Github) 같은 기업들은 REST API보다 GraphQL을 선택한 이유는 무엇일까?

 

▶ REST API의 문제에 대한 해결책, GraphQL
- 페이스북에서 만들었다.
- 따라서, 리액트(React)와 호환이 좋을 수밖에 없다.

 

▶ 리액트(React)와 호환이 좋다.
- 기존에는 fetch로 API를 가져와 json, response 등의 작업들을 해야 했다.
- 엔드포인트가 1개이므로 세팅, 설정 등을 하지 않아도 된다.
- fetch 필요 없이 query만 만들면 된다.

 

▶ 리덕스를 완벽하게 대체할 수 있다.
- 어플리케이션의 Local state를 관리할 수 있게 됐다는 의미이다.
- GraphQL 데이터를 로컬로 관리할 수 있다는 의미이다.

 

▶ specification
- 어느 특정 언어에 종속되지 않는다.
- 사용자가 원하는 방식대로 구현하도록 하는 언어

 

▶ query 언어
- query : GraphQL 데이터를 가져오는 기반
- QL : Query + Language
- 정확하게 필요한 정보만 요청할 수 있다.
- 클라이언트는 원하는 특정 정보를 요청하고, 서버는 요청된 정보만으로 응답한다.
- 2개 이상의 각기 다른 요청을 보낼 필요가 없다.
- 서버에서 데이터를 쿼리하고 수정하기 위한 언어

■ 어떻게 REST API의 문제점을 해결했는가?

1) Over Fetching : 내가 데이터를 쓰던 말던 너무 많은 data를 받는 문제

-> 필요한 data를 요청하여 이에 대한 data들만 받는다.

 

2) Under Fetching : 원하는 정보를 보여주기 위해 두 개 이상의 request를 해야 했던 문제

-> 하나의 API에 request를 보내고 필요한 모든 data를 받을 수 있다. 한 번의 request만으로 해결할 수 있게 됐다.

 

-----------세분화 하기 전------

- 고유한 점: 고정된 API 끝점 세트를 보유하는 대신 서버가 클라이언트가 필요할 수 있는 데이터 조합을 요청하는 데 사용할 수 있는 옵션 팔레트를 제공한다.
-> 이를 통해 데이터 요구 사항이 변경됨에 따라 새 끝점을 작성하고 배표할 필요가 없다.
-> 덕분에 프론트 엔드 개발자가 더 빠르게 이동할 수 있다.

- 모든 종류의 백엔드에서 데이터를 쿼리하기 위한 통합 인터페이스를 제공한다.

- GraphQL 서버는 어떤 종류의 노드가 있는지, 어떻게 연결되어 있는지, 각 노드에 어떤 정보가 포함되어 있는지 설명 하는 스키마 를 제공합니다. 그런 다음 이 스키마에서 선택하고 선택하여 원하는 정보를 선택한다.
- 스키마를 지정하기 위한 유형 시스템과 언어가 포함되어 있다.

- GraphQL을 사용하면 서버에 데이터 업데이트를 요청하는 변형 을 보낼 수 있습니다. 쿼리가 HTTP GET 요청과 유사하다면 변형은 POST 요청과 동일합니다. POST와 마찬가지로 서버가 업데이트된 데이터로 응답하도록 합니다. GraphQL에는 실시간 업데이트를 위한 열린 연결을 허용하는 구독 도 있습니다.

- 데이터를 그래프로 모델링하고 서버에서 해당 데이터를 쿼리하고 데이터를 업데이트하기 위한 언어

- GraphQL 목록은 사물 모음을 처리하는 가장 기본적인 방법일 뿐입니다. 페이지 매김과 무한 스크롤링을 수행하기 위해 이 튜토리얼의 뒷부분에서 Connections라는 특수 시스템을 사용하여 구축할 것입니다. 항목 모음이 있는 대부분의 상황에서 연결을 사용하고 싶을 것입니다. 하지만 여전히 GraphQL 목록을 빌딩 블록으로 사용하게 될 것입니다.

- 단순화를 위해 useLazyLoadQuery를 사용하여 쿼리를 도입했지만 미리 로드된 쿼리는 실생활에서 성능을 크게 향상시킬 수 있기 때문에 Relay에서 쿼리를 사용하는 데 항상 선호되는 방법입니다. 서버 및 라우터 시스템과 의 적절한 통합을 통해 클라이언트 코드를 다운로드하거나 실행하기 전에 서버 측에서 웹페이지에 대한 기본 검색어를 미리 로드할 수도 있습니다.

- GraphQL 사양 및 기타 소스에서 유형 세분화를 인라인 조각 이라고 합니다. 이 용어가 더 설명적이고 덜 혼란스럽기 때문에 "유형 세분화"라고 합니다.