22.08.02_TIL

📌 그래프QL은 React를 배우기 시작할 때 한번 들었던 내용이고, 찾아봤던 내용이기 때문에 조금은 아는 상태에서 진행이 될 것이다. 그리고 이것 또한 페이스북에서 만든 것이기 때문에 React를 사용한다면 한 번쯤은 학습해야 하는 내용이다. 같은 회사에서 만들어진 것이기 때문에 같이 사용할 경우가 많을 것 같다!!!! 빠얏!!

📗 오늘 학습한 내용

GraphQL (Graph + Query Language)

• 페이스북에서 만든 오픈 소스로 제공되고 있으며, Server API를 통해 정보를 주고받기 위해 사용하는 쿼리언어이다. (2016년 등장)
• 인지도 및 만족 부분에서 높은 비율을 차지하고 있는 언어이며, GraphQL 관련 기술이 계속해서 상위권을 차지하고 있다.
• 개발자들 사이에서 인식률이 굉장히 높은 언어이며, 배우고 싶은 비율과 다시 사용하겠다는 비율이 굉장히 높은 쿼리 언어이다.

GraphQL을 사용하는 이유

• 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다.
• REST API 방식의 고정된 자원이 아닌 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다.

GraphQL의 특징

• HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다.
• 응답을 받을 시, 데이터 결과를 JSON 형식으로 받는다.
• 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다.
• GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다.

REST API의 한계

• Overfetch: 필요 없는 데이터까지 제공한다.
• Underfetch: endpoint가 필요한 정보를 충분히 제공하지 못한다.
• 클라이언트 구조 변경 시 엔드포인트 변경 또는 데이터 수정이 필요하다.

REST API와 GraphQL의 다른점

• REST API는 Resource에 대한 형태 정의와 데이터 요청 방법이 연결되어 있지만, GraphQL에서는 Resource에 대한 형태 정의와 데이터 요청이 완전히 분리되어 있다.
• REST API 는 Resource의 크기와 형태를 서버에서 결정하지만 GraphQL에서는 Resource에 대한 정보만 정의하고, 필요한 크기와 형태는 클라이언트 단에서 요청 시 결정한다.
• REST API는 URI가 Resource를 나타내고 Method가 작업의 유형을 나타내지만, GraphQL에서는 GraphQL Schema가 Resource를 나타내고  Query, Mutation 타입이 작업의 유형을 나타낸다.
• REST API는 여러 Resource에 접근하고자 할 때 여러 번의 요청이 필요하지만, GraphQL에서는 한번의 요청에서 여러 Resource에 접근할 수 있다.
• REST API에서 각 요청은 해당 엔드포인트에 정의된 핸들링 함수를 호출하여 작업을 처리하지만, GraphQL에서는 요청 받은 각 필드에 대한 resolver를 호출하여 작업을 처리한다. 

GraphQL의 장점

• 하나의 endpoint 요청
• No! under & overfetching
• 강력한 playground
• 클라이언트 구조 변경에도 지장이 없다.

GraphQL의 단점

• REST API에 친숙한 개발자의 경우 GraphQL를 학습하는 데 시간이 필요하다.
• 캐싱이 REST보다 훨씬 복잡하다.
• 고정된 요청과 응답만 필요할 경우에는 Query로 인해 요청의 크기가 RESTful API의 경우보다 더 커진다.

GraphQL 구조

• GraphQL Keywords
  • 서버로부터 데이터를 조회하는 경우, REST API에선 GET 요청이 있었다면 GraphQL에서는 Query를 이용해 원하는 데이터를 요청 할 수있다.
  • Create, Delete와 같이 저장된 데이터를 수정하는 경우 Mutaion을 이용해 이를 수행할 수 있다.
  • Query: 저장된 데이터 가져오기(REST의 GET과 비슷하다)
  • Mutation: 저장된 데이터 수정하기
    • Create: 새로운 데이터 생성
    • Update: 기존의 데이터 수정
    • Delete: 기존의 데이터 삭제
  • Suscription: 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

Query(데이터 조회)

• 전달인자(Arguments)
  • 필드에 인수를 전달하는 부분을 추가하여 쿼리의 필드 및 중첩된 객체들에 전달하여 원하는 데이터만 받아올 수 있다.
• 별명(Aliases)
  • 필드 이름을 중복해서 사용할 수 없으므로, 필드 이름을 중복으로 사용해서 쿼리를 해야 할 때는 별명을 붙여서 쿼리를 한다.
• 오퍼레이션 네임(Operation name)
  • 쿼리와 쿼리 네임을 모두 생략하는 축약형 구문 대신 코드를 모호하지 않게 작성하는 것이다.
• 변수(Variables)
  • 동적으로 인수를 받아 쿼리하는 경우에 사용한다.

Mutation(데이터 수정)

• 서버측 데이터를 수정할 때 사용한다.

Schema/Type

• 가장 기본적인 구성 요소는 서비스에서 가져올 수 있는 객체의 종류, 그리고 포함하는 필드를 나타내는 객체유형이다.

Resolver

• 요청에 대한 응답을 결정해주는 함수, Query, Mutation, Subscription과 같은 타입의 실제 일하는 로직을 작성한다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

• GraphQL이란?
• GraphQL의 특징
• GraphQL 사용법