데이터 전송방법
HTTP
HTTP는 클라이언트의 웹 브라우저가 서버에 웹 서비스를 요청하면 서버가 적절한 응답을 하여 클라이언트 사용자에게 웹 페이지를 제공하는 서비스
- 4xx : 프론트엔드 오류
- 5xx : 백엔드 오류
API
API는 벡엔드에서 만든, 요청을 처리할 수 있는 함수!
객체형태로 주고 받음
(HTTP 는 문자열만 가능, 객체를 문자열로)
API 종류는 크게 rest-API와 graphql-API로 구분할 수 있다.
Rest - API
기존에는 REST - API를 사용했다
rest 는 주소처럼 생긴 이름 (ex https://naver.com/profile/철수)
응답 결과로 백엔드에서 세팅한 내용을 다 받아와야해서 비용 증가, 무거움, 느림
rest-API 에 요청하는 요청담당자는 axios
큰 회사에서 많이 사용한다.
Graphql - API
페이스북에서 제작했다.
최근에 많이 사용된다. (airbnb, git hub 등등)
graphql-API 의 모양 : ex profile("철수")
Graphql 장점
REST-API는 Over-fetching 문제점이 있다.
(모두 가져와야함)
또한 API 마다 따로따로 요청해야 한다.
이를 해결하기 위한 것이 Graphql!
- 골라받기 가능
- API 묶음 요청 가능
-> Rest-API의 Under-fatching 문제점 해결
프론트엔드에서 선택적으로 요청해서 보여지게 할수 있음. 따라서 가볍고 빠르고 비용이 적게 든다구!
요청 담당자는 apollo-client
CRUD
Creat / Read / Update / Delete
만들기, 조회하기(상세 목록), 수정하기, 삭제하기
axios(rest-API) : 주는대로 다받기
- 생성 POST / 수정 PUT / 삭제 DELETE / 조회 GET
apollo-client(graphql-API) : 골라서 받기
- 생성,수정,삭제 : MUTATION / 조회 : QUERY
import {useMutation, useQuery} from '@apollo/client'
const result = useMutation(API이름)
const result = useQuery(API이름)
API 명세서란?
벡엔드 개발자가 만든 API 설명서.
rest-API : 스웨거(Swagger)
graphql-API : 플레이그라운드(Playground)
JSON이란?
Javascript Object Notation
API 요청 결과가 자바스크립트의 객체 처럼 표기된다.
API보내는 형태 / 자바스크립트의 객체처럼 표현함 : "객체"
실제는 문자열
위쪽에 헤더(내용의 요약 정보들, 응답헤더, 보내는이 확인, 요청 헤더)
데이터는 바디,
요청: request / 응답 : response
