2022년 01-12 GraphQL의 시작

점점더 포스팅 시간이 늦어지는 것 같은데... 

 

이번 시간 Day 3 목표는 RestAPI vs GraphQL이다.

 

• 두 컴퓨터간 데이터 전송을 담당하는 => HTTP
• 백엔드의 데이터 처리 담당자 => API
• 데이터 처리 담당자의 2종류 => GraphQL vs Rest API!!

HTTP를 정리해보면 

HTTP는 하나의 컴퓨터에서 다른 컴퓨터로 request(요청)을하는 작업 중 하나다.

 

Front-end가 입력해놓은 State를 임시 저장해서 백엔드 컴퓨터에 요청한다.

 

데이터 베이스를 설치하면 표형태의 Execle로 DB에 저장하고 DB는 Beck-end에게 응답결과를 Front-End에게 

전해준다. 그런 응답 데이터도 Text 형태의 데이터라고 말할 수 있다.

 

HTTP는 응답(answer) & 요청(request)가 있는데 이 곳에는 규칙이 존재하는데 

 

바로 응답시 응답한 상태코드를 보내주는 것이다. 성공시 메시지를 백엔드가 보여주게된다.

 

API와 GraphQL의 차이점?

api는 게시물 하나만 등록하는데만 해도 하나의 API만 존재하면 되는데 그런데 게시물을 등록하는 api가 아닌 

프로필과 프로필 조회도 필요한 API가 존재한다면 API를 하나하나 다른 API를 통해서 요청하게된다.

 

그러므로 비효율성이 증가함

 

REST API vs GraphQL

 

Rest API로 구성된 이름은 주소형태로 이루어져 있다.

https://naver.com/board/1
https://naver.com/profile/철수

 GRAPHQL은 함수형태 처럼 구성

board(1)
profile("철수")

두개다 선언하는 방식은 다르지만 동작은 똑같다.

 

Rest API와 GraphQL의 차이점

 

RestAPI는 주소형태 GraphQL은 함수 형태로 구성되어 있다.

 

RestAPI는 모듈들을 전부 다 받아와야하는데. 그렇게 된다면 하나의 api를 불러올때에도 모든 api를 가져와서 

 

다시 조건을 따져서 선언해야하는 불편함이 존재한다. 그런 상태인 와중에도 많은 데이터를 불러와서 

 

네트워크 비용이 발생하는 경우가 생긴다.

 

그런데도 불구하고 rest api를 배우는 이유는 ??

 

실무에서는 GraphQL를 사용하는 회사는 아직까지 드물게 존재하기 떄문이다.

 

외부에서 api를 제공하는 기관이 있는데, 예를 들어 Backend를 공공기관에서 날씨에 대한 정보를 가져온다고 할때는 

외부 api를 통해 받아와야 한다. 그래서 벡엔드 개발자가 없다고 해도 api가 만들어져 있어

 

날씨 정보를 받아와 그려줄 수 있다. 이런 api들은 대부분 Restful api로 만들어져 있다.

 

JSON

텍스트들을 객체로 불러오면 조금 더 효율적이다. 그래서 객체로 많이 보여주는데 이것을 JSON이라고 부른다.

 

Javascript Object Notion 즉 자바스크립트 객체 표기법

 

api에는 CRUD 기법이 존재하는데 axios 와 GraphQL은 서로 다른 차이점이 존재한다. 

 

기존의 restAPI에 GET POST PUT DELETE를 사용한 조회 수정 생성 삭제를 GraphQL에서는 

Query 단 하나로 선언할 수 있다는 장점

axios 
POST => 생성
PUT => 수정
DELETE => 삭제
GET => 조회 
조회는 그냥 결과를 꺼내주는 것 

MUTIAOTIN이면 데이터를 변경하는 작업들

QUERY => 절대 변경하지않고 그냥 그 안에 결과물을 꺼내는 것

applo-client 
생성 수정 삭제 => MUTATION
조회 => QUERY

 

axios와 GraphQL의 구성 방식은 다르다 기존의 axios에서 상수로 선언한 결과값을 axios.post에 key값을 넣어서 

보내는 방식이었지만 graphQl에서는 result(결과)값으로 api를 가져올 수 있다.

axios 
import from "axios";

const result = axios.post( API이름)

graphql 
import { useMuation, useQuery } from '@apollo/client';

const result = result(API이름);

• axios && apollo-client 둘다 HTTP를 주고 받음
  요청시 Header Code(헤더 코드) Status Code(상태코드) 같은 응답과 요청이 있다.
  rest는 내가 요청한것을 전부다 받는 형식
• graphql은 내가 가져오고 싶은데이터를 골라서 가져오는 방식

API를 사용할 수 있는 도구들은 

• REST-API = 포스트맨(Postman/ Swagger)
• GraphQL - playground