[Next] HTTP 통신 & API: rest-api와 graphql-api의 차이점에 집중하여

필자는 그동안 Rest-API만 사용해봤는데 Graphql-API란 존재를 알게된 후 백엔드에서 다르게 생성해줘야 하는지와 Graphql-API의 개념과 사용법에 대해 궁금해 포스팅을 작성한다.

 

1. HTTP 통신

HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이다.

(참고) FTP: 파일, SMTP: 간단한 메일

HTTP 라는 길로 요청 request 와 응답 response 2가지를 서로 주고 받을 수 있다.

- 200: 성공

- 4xx: 프론트엔드 에러

- 5xx: 백엔드 에러응답 상태코드자주 볼 수 있는 응답 상태코드

HTTP 상태 코드 - HTTP | MDN

백엔드는 응답할 때 응답 상태코드를 함께 보내준다. 응답 상태코드는 100~599 까지의 숫자로 구성되어 있다.

 

2. API

API란 HTTP 요청을 백엔드에 보냈을 때 실행되는 백엔드 개발자가 만든 함수가 API이다. 함수는 인자와 return 데이터가 있다. API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고 응답으로 받게될 데이터는 return 값이다.

 

3. API 종류와 차이점 (rest-API vs graphql-API)

: 백엔드에서 만드는 방식에 따라 구분된다, 페이스북에서 대규모 접속자를 처리하기 위해 graphql을 만들었다. (접속자가 많은 경우 graphql 사용)

a. 함수 이름의 차이

rest-API	graphql-API
주소	일반함수
https://naver.com/board/1-	board(1)

b. 응답 결과물의 차이

rest-API

- 요청담당자: axios

- 응답 결과로 백엔드가 만든 함수에서 보내주는 모든 데이터를 받아야 한다

 

graphql-API

- 요청담당자: apollo-client

- 응답 결과로 백엔드가 만든 함수에서 필요한 데이터만 골라받을 수 있다 (필요한 데이터만 골라 받을 수 있는 장점이 있어서, 효율적인 통신을 할 수 있다)

 

4. API 응답 데이터 JSON (Javascript Object Notation)

: 자바스크립트의 객체 표기법

백엔드에서 응답을 받을 때 객체 자체를 주고 받을 수 없다. 따라서 객체를 문자열로 묶어서 객체를 담은 문자열을 보내게 되는데, 객체를 담은 문자열을 JSON이라고 한다. 백엔드에서 받아온 JSON 데이터는 프론트에서 문자열을 벗겨 객체로 사용한다

 

JSON의 특징과 응답헤더

응답은 header 와 body 로 나뉜다.

• header: body와 관련된 요약정보 (응답을 보내는 사이트, 바디의 형태가 JSON인지 등등)
• body: JSON

 

5. API와 CRUD

axios (rest-api) apollo-client (graphql-api)

1. 새로운 것을 생성하는 API	CREATE	POST	MUTATION
2. 기존의 것을 조회하는 API	READ	GET	QUERY
3. 기존의 것을 수정하는 API	UPDATE	PUT	MUTATION
4. 기존의 것을 삭제하는 API	DELETE	DELETE	MUTATION

mutation을 사용하는 생성, 수정, 삭제: 데이터베이스를 변경하는 작업

 

axios

import axios from "axios"

const result = axios.post(API이름입력)
const result = axios.put(API이름입력)
const result = axios.delete(API이름입력)
const result = axios.get(API이름입력)

apollo-client

import { useMutation, useQuery } from "@apollo/client"

const result = useMutation(API이름입력)
const result = useQuery(API이름입력)

 

6. API 명세서

	rest-API	graphql-API
api-연습	포스트맨	플레이그라운드
api-명세서	스웨서	플레이그라운드

 

결론: graphql-api가 효율적이긴 하지만, 오픈 api 등 활용을 위해 rest-api도 알아야한다