HTTP 통신
HTTP란 두 컴퓨터 간 텍스트 데이터를 주고받는 길이다.
HTTP라는 길로 요청(Request)와 응답(Response)를 서로 주고받도록 한다.
HTTP 요청(Request)과 응답(Response)
HTTP 요청(Request)
웹 브라우저에서 홈페이지(Front-end)가 실행중이라면, 작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장해 달라고 요청한다.
HTTP 응답(Response)
요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답한다.
💡💡 HTTP 상태코드
Back-end는 Response로 응답 상태코드를 보낸다.
응답 상태코드는 100~599로 구성되어 있으며, 자주 사용하는 200(성공), 400(도메인 에러), 500(서버 내부 오류)를 포함한다.
API
API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능.
여러 데이터를 관리하기 위해선 여러개의 HTTP가 존재해야 하며, 각각의 요청마다 API가 필요하다.
💡 API 함수
API는 Back-end 개발자가 만든 함수이다. API에 요청할 때 보내지는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게 되는 데이터는 API 함수의 return 데이터이다.
API 종류 (REST API vs Graphql API)
🚀 REST API
- (응답결과) REST API는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받는다.
- (전송요청방식) REST API의 요청방식은 axios
🚀 Graphql API
- (응답결과) Graphql API는 back-end 개발자가 만든 함수에서 필요한 데이터만 선택해 받는다.
- (전송요청방식) Graphql API의 요청방식은 apollo-client
💡graphql은 필요한 데이터만 골라 받을 수 있는 장점이 있어, 효율적인 통신가능Graphql은 페이스북에서 발생하는 수많은 데이터를 처리하기 위해 페이스북 개발팀에서 제작됐으며 facebook, airbnb, github에서 사용중인 통신방식
API 응답 데이터 JSON (JavaScript Object Notation)
🔥🔥 JSON이란?
JSON은 자바스크립트의 객체 표기법이다.
Back-end에서 응답을 받을 때, 객체 자체를 주고받을 수 없기 때문에 객체를 문자열로 묶어 객체를 담은 문자열을 전송하게 되는데 이를 객체를 담은 문자열을 객체 표기법 이라고 한다.
즉, 백엔드에서 응답의 결과물로 넘겨주는 것이 JSON이며, JSON은 객체를 담은 문자열이다.
받아온 JSON 데이터는 Front에서 문자열을 벗겨 객체로 사용한다.
🔥JSON의 특징과 응답헤더
응답에는 header과 body 부분이 존재한다.
응답으로 주고받은 JSON은 응답의 body부분에 해당한다.
header에는 body와 관련된 요약정보인 응답을 보내는 사이트 정보, 바디의 형태를 포함하고 있다.
API와 CRUD
- 생성 API -> CREATE
- 조회 API -> READ
- 수정 API -> UPDATE
- 삭제 API -> DELETE
⚙️axios
import axios from 'axios'
const result = axios.post (API이름)
const result = axios.put (API이름)
const result = axios.delete (API이름)
const result = axios.get (API이름)⚙️apollo-client
import {useMutation, useQuery} from '@apollo/client'
const result = useMutation(API이름)
const result = useQuery(API이름)API 명세서
API 명세서는 API 사용 설명서로 홈페이지를 제작하기 전, Back-end 개발자가 제작해놓은 API의 개수와 구성방법을 확인하기 위해 필요하다.
API 명세서는 Back-end 개발자에게 받아야 하며, Back-end 개발자는 자신이 제작한 API를 직접 문서형태로 작성하거나 Swagger 프로그램을 통해 제작한다.
