본문 바로가기

기술블로그

Rest-API vs Graphql-API

HTTP 통신

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

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

HTTP 요청(Request)과 응답(Response)

HTTP 요청 (Request)

웹브라우저에서 홈페이지가 실행중이라면, 작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장 해달라고 요청한다.

 

HTTP 응답 (Response)

요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답한다.

 

Back-end 컴퓨터는 응답할 때, 응답 상태코드 라는 것도 함께 보내준다. 응답 상태코드는 100~ 599까지의 숫자로 구성되어 있다. 자주 볼 수 있는 응답 상태코드는 성공(200), Front-end 에러(400), Back-end 에러(500) 등이 있다. 예를들면, 요청에 성공하였으면 성공 메시지와 응답 상태코드 200을 함께 보내준다.

 

더 많은 상태코드(MDN):

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

 

HTTP 상태 코드 - HTTP | MDN

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고

developer.mozilla.org

 

데이터베이스에 바로 요청하면 안되는 이유:

보안 및 데이터 정제 등의 이유로 Back-end에서 검증 과정을 거쳐야 하기 때문에, 아무나 함부로 데이터베이스에 요청할 수 없다.

 

API

API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능이다.

Front-end에서 HTTP라는 길을 통해서 게시물 데이터를 Back-end에 보내 저장시켰다.

만약, 게시물이 아닌 프로필 데이터를 저장하고 싶으면 어떻게 해야 할까?

그러기 위해선,여러개의 HTTP 라는 길이 존재해야 하고, 각각의 요청마다 담당자가 필요하다.

우리는 이 담당자를 API 라고 부른다.

 

API는 Back-end 개발자가 만든 함수이다. 함수는 인자와 return 데이터가 있다.

API인자 - API에 요청할때 보내는 데이터

return데이터 - 응답으로 받게되는 데이터

 

API 종류(rest-API vs graphql-API)

API의 종류는 크게 rest-API, graphql-API 로 2가지가 있다.

rest-API 와 graphql-API 는 몇가지 차이점이 있다.

 

rest-API와 graphql의 차이점

1. 함수 이름의 차이

rest-API는 API 이름이 마치 홈페이지 주소처럼 생겼다.

graphql-API는 API 이름이 일반적인 함수와 같다.

 

2. 응답 결과물의 차이

rest-API는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야만 한다.

반면에, graphql-API는 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있다.

이러한 이유로, 각 API에 전송을 요청하는 담당자도 다르다.

rest-API에 요청하는 요청담당자는 axios이다.

graphql-API에 요청하는 요청담당자는 apollo-client이다.

요청담당자는 Front-end 에서 설치하는 라이브러리이다.

 

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

graphql은 페이스북에서 발생하는 수많은 데이터를 처리하기 위해 페이스북 개발팀에서 만들었으며,

facebook, airbnb, github 등 유명한 사이트에서 사용중인 통신 방법이다.

 

3. 설치해야 할 프로그램의 차이

rest-API 와 graphql API를 사용하기 위해서는 프로그램을 설치해야 한다.

rest와 graphql은 각자 설치해야 할 프로그램이 다르다.

 

설치해야할 프로그램

rest-API : axios

graphql-API : apollo-client

 

API 응답 데이터 JSON ( JavaScript Object Notation )

JSON이란?

백엔드에서 응답을 받을 때, 객체 자체를 주고 받을 수 없다.

따라서 객체를 문자열로 묶어서 객체를 담은 문자열을 보내게 되는데, 객체를 담은 문자열을 객체 표기법 이라고 한다.

즉, 백엔드에서 응답의 결과물로 넘겨주는 것이 JSON이고, JSON은 객체를 담은 문자열 정도로 생각하시면된다.

받아온 JSON 데이터는 프론트에서 문자열을 벗겨 객체로 사용하게 된다.

 

JSON의 특징과 응답헤더

응답으로 주고받은 JSON은 응답의 body 부분이다.

응답에는 header와 body부분으로 나뉘는데 body에는 JSON이 들어간다고 말했다.

그렇다면 header에는 어떤게 들어갈까?

header에는 body와 관련된 요약정보가 들어가게 된다.

요약정보라 함은 응답을 보내는 사이트가 어디인지, 바디의 형태는 JSON인지 등등을 포함하고 있다.

API와 CRUD

API는 크게 4가지 방식으로 구분할 수 있습니다.

  1. 새로운 것을 생성하는 APICREATE
  2. 기존의 것을 조회하는 APIREAD
  3. 기존의 것을 수정하는 APIUPDATE
  4. 기존의 것을 삭제하는 API ⇒ DELETE

API 명세서

API 명세서는 API 사용 설명서이다.

홈페이지를 만들기 전, Back-end 개발자가 만들어 놓은 API 가 몇 개 있고, 어떻게 구성되어있는지 확인하기 위해 필요하다.

API명세서는 Back-end 개발자에게 받아야 한다. Back-end 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나, swagger 라는 프로그램을 설치해서 만든다.

'기술블로그' 카테고리의 다른 글

Rest API  (0) 2023.01.31
동기통신과 비동기통신  (0) 2023.01.30
git 명령어 및 실행 주의사항  (0) 2023.01.30
[오류해결]error: src refspec master does not match any  (0) 2023.01.30
타입스크립트 기초 실습  (0) 2023.01.28