📔 학습목표
- 데이터 전송방법 >> HTTP / API / Graphql / Rest
- 데이터 전송실습 >> Postman / PlayGround
지난 시간 포트폴리오 리뷰
- input 각각의 state
- error를 담는 state
- input창의 변경하는 변경함수들
- 등록하기 버튼 함수
🤔 이벤트 핸들러 함수?
: 이벤트가 발생했을 때 처리를 담당하는 실행함수
onClick,onChange,onKeypress 등등
HTML의 요소의 속성으로 등록
이벤트 타겟하면 input태그가 나오고 이벤트타겟 value하면 그 input 태그의 값을 가져와서 setState에 저장해준다.
value 값이 차게 되면 onChange 함수를 통해 에러메세지를 지워줘라 (상태를 바꿔줘라)
HTTP
두 컴퓨터 간의 텍스트 데이터를 주고받는 길 (인터넷이 연결되어있어야 함)
어떤 데이터를 주고받는지?
로그인, 회원가입 등 프론트와 백엔드가 정보를 주고받음
🤔 프로토콜?
프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계
파일 - ftp
간단한 메일 - smtp
텍스트/html - http
HTTP 요청(Request)
웹브라우저에서 홈페이지(Front-end)가 실행중이라면, 작성한 게시물 텍스트 데이터 를 HTTP를 통해 Back-end 컴퓨터로 보내고 Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장 해달라고 요청 한다.
HTTP 응답(Response)
요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답 한다.
🤔 상태코드
Back-end 컴퓨터는 응답할 때, 응답 상태코드 라는 것도 함께 보내준다.
응답 상태코드는 100~ 599까지의 숫자로 구성되어 있다.
성공(200), Front-end 에러(400), Back-end 에러(500) 등이 있다.
[참고] https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C
API
: 요청을 처리해주는 담당자(함수)
API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게되는 데이터가 API 함수의 return 데이터
API의 종류
API의 종류는 크게 rest-API, graphql-API 로 2가지가 있다.
초기에는 rest API만 있었는데, 비효율적인 방법을 해결하기 위해 facebook에서 만든게 grapgql 이다.
함수 이름의 차이
rest-API는 API 이름이 마치 홈페이지 주소처럼 생겼다.
graphql-API는 API 이름이 일반적인 함수 와 같다.
응답 결과물의 차이
rest-API 는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터 를 받아야만 한다. 반면에, graphql-API 는 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있다. (네트워크 비용 절감)
요청담당자는 Front-end 에서 설치하는 라이브러리로 rest-API 요청담당자는 axios , graphql-API 요청담당자는 apollo-client 이다.
다른 도구를 써도 되지만 가장 많이 쓰는 게 apollo-client이다.
🤔 그러면, rest-API는 몰라도 되지 않을까?
- 우리가 취업하는 회사에서 rest-api를 사용할 수 있다.
- 오픈api(=public api)등 에서 rest -api를 주로 제공
예를들면, 카카오로 로그인하기 기능은, 카카오에서 제공해주는 API를 사용해야하는데, 이러한 기능들은 대부분 rest-API로 제공되고 있다.
🤓 JSON
- 자바스크립트 객체 표기법(JavaScript Object Notation)으로 데이터를 저장하거나 전송할 때 많이 사용되는
경량의 DATA 교환 형식- JSON 표현식은 사람과 기계 모두 이해하기 쉬우며
용량이 작아서, 최근에는 JSON이XML을 대체해서 데이터 전송 등에 많이 사용한다.- JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히
데이터를 표시하는 표현 방법일 뿐이다
CRUD
기능,API를 만든다고 할 때 최소한의 CRUD는 구현되야 한다. (4+1)
🤔 왜 +1?
Read가 두개이기 때문에!! ( 게시글 상세보기, 게시글 목록 보기 )
사용방법
💻 axios 설치
yarn add axios
API 명세서
API 명세서는 API 사용 설명서 이다.
API명세서는 Back-end 개발자에게 받아야 한다. Back-end 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나, swagger 라는 프로그램을 설치해서 만든다.
