통신 전송
- 파일 : FTP
- 간단한 메일 : SMTP
- 텍스트/하이퍼텍스트(HTML) : HTTP
HTTP
두 컴퓨터 간 텍스트 데이터를 주고받기 위한 통신규약이다.
http 통신을 위한 프로그램 설치가 필요하다.
request(요청)과 response(응답)이 있다.
- request : 웹브라우저에서 홈페이지(Front-end)가 실행중일 경우, 작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고, Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장 해달라고 요청한다.
- response : 요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답한다.
📌 응답 상태코드
Back-end 컴퓨터는 응답할 때, 응답 상태코드를 함께 보내준다다.
응답 상태코드는 100 ~ 599까지의 숫자로 구성되어 있다.
자주 볼 수 있는 응답 상태코드는 성공(200), Front-end 에러(400), Back-end 에러(500) 등이 있다.
상태코드 참고 (MDN): https://developer.mozilla.org/ko/docs/Web/HTTP/Status
JSON (Javascript Object Notation)
자바스크립트 객체 표기법
http는 객체를 주고받지 못한다.
Json은 http 객체를 문자열로 변환하여 전송할 수 있도록 해준다.
따라서 http 통신을 할때 Json 형태로 주고 받는다.
API
API란, HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능이다.
Front-end에서 HTTP라는 길을 통해서 게시물 데이터를 Back-end에 보내 저장시킨다.
만약, 게시물이 아닌 프로필 데이터를 저장하고 싶으면 어떻게 해야 할까?
그러기 위해선, 여러개의 HTTP 라는 길이 존재 해야 하고, 각각의 요청마다 담당자가 필요하다. 여기서 담당자를 API 라고 부른다.
한마디로, API는 백엔드에서 여러 기능을 위해 만든 함수이다.
1) Rest API
많은 회사가 rest api를 사용한다.
open-api에서 일반적으로 rest를 제공한다.
2) GraphQl API
페이스북 제작
대규모에서 rest api 사용시 비효율적
대기업, 기술 트렌드에 민감한 스타트업에서 사용
rest, graphql의 차이점
1) 함수 이름의 차이
2) 응답 결과물 차이
- rest-API 요청담당 : axios 설치 필요
내용을 모두 가져와서 용량이 커지고 상대적으로 속도가 느리다. - graphql-API 요청담당 : apollo-client 설치 필요
필요한 내용만 가져올 수 있어서 속도가 빨라진다.
CRUD
create, read, update, delete의 약자
CRUD + 목록조회 기능
-> 하나의 기능을 위해 최소 5개의 API가 필요하다.
1) axios 메서드
post, put, delete, get
2)apollo-client 메서드
mutation, query -> 더 효율적이다.
mutation: db를 변경한다. (post, put, delete)query: db를 변경하지 않고 참고하기만 한다. (get)
API 명세서 (API Docs)
API 명세서는 API 사용 설명서 이다.
홈페이지를 만들기 전, Back-end 개발자가 만들어 놓은 API 가 몇 개 있고, 어떻게 구성되어있는지 확인하기 위해 필요하다.
API명세서는 Back-end 개발자에게 받아야 한다. Back-end 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나, swagger 라는 프로그램을 설치해서 만든다.
1) Postman
rest-API를 사용하는 프로그램
API 명세서는 스웨거 (Swagger)에서 확인할 수 있다.
2) Playground
graphql-API를 사용하는 프로그램
명세서를 같이 확인할 수 있다.
📌 graphql docs의 필수값
-
! 는 무조건 보내줘야하는 필수값이다.
-
[!]는 있다면 무조건 보내줘야하는 조건필수값 이다.
