HTTP 통신과 API(Rest API, GraphQl API)

larmong·2023년 8월 29일

Front-end

목록 보기
1/1
post-thumbnail

HTTP 통신

http란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이고, 요청(req), 응답(res)을 주고 받을 수 있다.

요청(Req)과 응답(Res)

HTTP 요청(Req)
웹브라우저에서 홈페이지(front-end)가 실행중이라면, 작성한 게시물(데이터)을 HTTP를 통해 서버(back-end)로 보내고 서버는 이 데이터를 데이터베이스에 저장 해달라고 요청한다.

HTTP 응답(Res)
요청을 받은 서버는 성공, 실패 등의 처리 결과를 응답한다.

  • 이때 서버에서는 응답할 때, 100-599까지의 사이 숫자의 상태코드도 함께 보내준다.
    자주 볼 수 있는 상태코드는 성공(200), front-end 에러(400), back-end 에러(500)등이 있다.
    예) 요청에 성공하였으면 성공메세지+상태코드 200을 같이 응답한다.

API

API란 HTTP 요청을 서버에 보냈을때 실행되는 back-end 기능이다.
즉, API는 back-end 개발자가 만든 함수이다. 요청할때 보내는 데이터는 API 함수로 들어가는 인자이고, 응답을 받게되는 데이터가 API 함수의 return 데이터이다.

API의 종류(Rest API VS GraphQl API)

API의 종류는 크게 Rest API, GraphQl API 두개가 있다.

1. 함수 이름의 차이
Rest API는 API이름이 홈페이지 주소처럼 생겼다.
GraphQl API는 API이름이 일반적인 함수와 같다.

예1) 네이버에서 1번 게시글 조회하는 API
Rest API는 https://naver.com/board/1
GraphQl API는 board(1)

예2) 네이버에서 철수 프로필 조회하는 API는
Rest API는 https://naver.com/profile/철수
GraphQl API는 profile("철수")

2. 응답 결과물의 차이
Rest API는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야 한다.
GraphQl API는 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있다.

  • GraphQl API는 필요한 데이터만 골라 받을 수 있는 장점이 있어서 효율적인 통신을 할 수 있다.

3. 라이브러리
Rest API는 axios
GraphQl API는 apollo-client

API 응답 데이터 JSON

JSON이란?
백엔드에서 응답을 받을 때 객체 자체를 주고 받을 수가 없다. 이때 객체를 문자열로 묶어서 객체를 담은 문자열을 보내주게되는데 이것을 JSON이라고 한다.

  • front-end에서는 JSON 데이터를 문자->객체로 변환 후 사용하게 된다.

JSON의 특징과 Header
응답은 header와 body로 나뉘는데 이때 body부분이 JSON 데이터다.
header에는 body와 관련된 요약정보(응답을 보내는 사이트, body의 형태 등)가 들어가게 된다.

API와 CRUD

API는 크게 4가지 방식으로 구분할 수 있다.
생성 => Create
조회 => Read
수정 => Update
삭제 => Delete

axios(rest-api)
C => POST
R => GET
U => PUT
D => DELETE

Apollo client(graphql-api)
C => MUTATION
R => QUERY
U => MUTATION
D => MUTATION

API 명세서

API명세서란? API를 만든 Back-end 개발자가 만든 API 사용 설명서이다.
Rest-API API 연습은 포스트맨, API 설명서는 스웨거 사용
GraphQl-API API 연습, API 설명서 모두 플레이그라운드 사용

profile
Front-end Developer

0개의 댓글