Rest-API vs GraphQL-API

박태진·2022년 3월 16일

1. API의 종류

1) rest-API

  • 함수 이름이 홈페이지 주소의 형식이다.
  • 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 필수적으로 받아야 한다.
  • 요청담당자는 axios이다.

2) graphql-API

  • 함수 이름이 일반적인 함수의 형식이다.
  • 응답 결과로 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있다.
  • 요청담당자는 apollo-client이다.

2. API의 방식

Create

  • rest-API : Post
  • graphql-API : Mutation

Read

  • rest-API : Get
  • graphql-API : Query

Update

  • rest-API : put
  • graphql-API : Mutation

Delete

  • rest-API : Delete
  • graphql-API : Mutation

3. 실제 사용 방법

1) rest-API

	import axios from 'axios'

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

2) graphql-API

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

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

4. API 명세서

  • API 사용 설명서로 홈페이지를 만들기 전에 Back-end 개발자가 만들어놓은 API의 개수, 구성 등을 확인하기 위해 필요합니다.

  • API 명세서는 Back-end 개발자에게 받아야 하는데 직접 문서 형태로 작성하거나 rest-API의 경우 Swagger, graphql-API의 경우 Playground를 사용한다.

5. API 요청 결과 타입(JSON)

  • JSON(JavaScript Object Notation) : 문자 그대로 JavaScript의 객체처럼 표기된 것을 의미한다.

  • 예시)

{ 
  classmate: "철수",
  age: 13

5. rest-API 오버페칭과 언더페칭

오버페칭

  • 데이터베이스의 항목이 클라이언트가 요청하는 데이터보다 많을 때를 의미 한다.

언더페칭

  • 데이터베이스의 항목이 클라이언트가 요청하는 데이터보다 적거나 존재하지 않아 추가로 데이터를 요청해야하는 것이다.

0개의 댓글