03일차) REST-API, GRAPHQL-API, CRUD

badassong·2022년 11월 2일
0

JS

목록 보기
5/31

컴퓨터끼리 통신하자! HTTP/API

HTTP통신

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

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

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

HTTP 요청(Request)

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

HTTP 응답(Response)

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

많이 보이는 http 상태코드

  • 200 => 성공을 의미! (2xx는 요청을 성공적으로 받았다는 의미이다!)
  • 4xx => 클라이언트, 브라우저 오류
  • 5xx => 서버오류

API

웹 서비스에서의 통신이란 데이터 요청과 응답을 의미하는데, 백엔드 컴퓨터에 데이터의 생성/조회/수정/삭제 등을 요청했을 때 각각의 요청마다 담당하는 담당자를 API라고 부른다!
API는 데이터의 처리를 요청하는 하나의 기능, 함수라고 생각하면 된다.
API는 백엔드 개발자가 만든 함수이다!

REST-API VS GRAPHQL-API

API의 종류는 크게 rest-API, graphql-API로 두가지가 있다!
둘의 차이점을 알아보자.

rest-API와 graph-API의 차이점

1. 함수 이름의 차이

rest-API는 API 이름이 홈페이지 주소처럼 생겼다.
graphql-API는 API 이름이 일반적인 함수와 같다.

2. 응답 결과물의 차이

rest-API는 응답결과로 백엔드 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야만 한다! 반면 graphql-API는 백엔드 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있다.

이러한 이유로 각 API에 전송을 요청하는 담당자도 다르다.
rest-API에 요청하는 요청담당자는 axios이다.
graphql-API에 요청하는 요청담당자는 apollo-client이다.
요청담당자는 프론트엔드에서 설치하는 라이브러리다.

graphql은 페이스북에서 발생하는 수많은 데이터를 처리하기 위해 페이스북 개발팀에서 만들었으며, facebook, airbnb, github 등 유명한 사이트에서 사용중인 통신 방법이다.
필요한 데이터만 골라 받을 수 있는 장점이 있어서 효율적인 통신이 가능하다!

JSON

JSON은 Javascript Object Notation을 줄인 말로, 자바스크립트 객체 표기법이다.
객체 양 옆에 문자열을 붙인 것인데, 객체를 주고받고 싶은데 그렇게 할 수 없으니 문자열로 변환해서 주고받는 것이다!!

CRUD

API는 크게 4가지 방식으로 구분할 수 있는데,
1. 새로운 것을 생성하는 API => Create
2. 기존의 것을 조회하는 API => Read
3. 기존의 것을 수정하는 API => Update
4. 기존의 것을 삭제하는 API => Delete


실제 사용 방법은,

정리해보면,

API 명세서

API명세서는 API사용설명서인데 홈페이지를 만들기 전 백엔드 개발자가 만들어놓은 API가 몇 개 있는지, 어떻게 구성되어 있는지 확인하기 위해 필요하다!
API명세서는 백엔드 개발자에게 받아야 하는데, 백엔드 개발자가 직접 문서형태로 작성하거나 Swagger라는 프로그램을 설치해서 만든다.

API요청에서!!
Query 요청은 데이터를 조회하기 위해!
Mutation 요청은 새로운 data를 만들 때!

profile
프론트엔드 대장이 되어보쟈

0개의 댓글