[KUIT] 9주차 워크북 보충 - API endpoint, Axios와 Fetch의 차이, GraphQL

아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.

---

API endpoint의 뜻은?

→ 요청을 보내고자하는 URL

---

Axios와 Fetch의 차이

1. 에러 처리

axios와 fetch는 둘 다 Promise를 이용해 비동기 요청을 처리

 

axios: 네트워크 오류가 발생하거나, HTTP 상태코드가 200~299가 아니면 Promise를 reject 시

fetch: 네트워크 오류가 발생했을 때만 Promise를 reject

-> axios처럼 상태 코드가 200~299 사이가 아닐 때도 에러 처리를 하고 싶다면, Response.ok를 활용해야 

 

2. 헤더

axios는 요청 헤더에 ‘Content-Type: application/json을 자동으로 추가(fetch는 직접 추가해야)

 

브라우저 환경에서 Content-Type이 aplication/json이면 대부분의 경우 Preflight 절차를 거침

→ 백엔드에서 Preflight 절차를 처리하는 코드가 없을 때 문제가 될 수 있음

 

(출처: Instagram devy.bee 계정)

 

---

GraphQL

GraphQL은 API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버 사이드 런타임

 

GraphQL은 RESTful API와 달리

 

- GraphQL은 보통 하나의 엔드포인트를 가진다. → 하나의 엔드포인트에 다른 쿼리를 사용해 요청한다.

- GraphQL은 요청할 때 사용하는 쿼리에 따라 다른 응답을 받을 수 있다.

- GraphQL은 원하는 데이터만 받을 수 있다.

 

예시

// GraphQL request
query {
    person(personID: 1) {
        name
        height
        mass
    }
}

// GraphQL response
{
    "data": {
        "person": {
            "name": "Luke Skywalker",
            "height": 172,
            "mass": 77
        }
    }
}

 

장점 - HTTP 요청 횟수와 응답 사이즈를 줄일 수 있다.

단점 - query로 인해 요청의 크기가 Restful보다 커질 수 있다, 캐싱이 REST보다 복잡하다.

 

출처: (https://hahahoho5915.tistory.com/63)