34일차 프론트엔드 공부 - 데이터 통신

- 프론트엔드 공부 34일차 -

 

 

두 컴퓨터 간의 데이터 전송

 

파일 FTP

간단한 메일 SMTP

텍스트/하이퍼텍스트(HTML) HTTP

 

HTTP

두 컴퓨터간의 텍스트 데이터를 주고받는 

HTTP 는 요청(Request) 응답(Response) 두 가지 통신을 할 수 있다.

 

Request

 

Response

 

응답 상태코드

Back-end 컴퓨터는 응답할 때 응답 코드를 함께 보내준다.

응답 코드는 100 ~ 599 숫자로 이루어져 있다.

100 개열 : 정보

200 개열 : 성공 의미

300 개열 : 리다이렉션 요청 (요청 완료를 위해 추가 작업 필요)

400 개열 : 클라이언트 에러의미

500 개열 : 서버 에러 의미

 

대표적인 응답상태코드

200 : 성공

400 : Front-end 오류

500 : Back-end 오류

 

API

HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능

 

API

 

API 종류

- rest-API

- graphql-API

 

Rest-Api, Graphql-Api 차이

rest-API : API 이름이 홈페이지 주소처럼 생김

graphql-API : API 이름이 일반적인 함수와 같음

 

ex)

네이버에서 A 게시글 조회

rest-API

https://naver.com/board/A

 

graphql-API

board(A)

 

네이버에서 철수 프로필 조회

rest-API

https://naver.com/profile/철수

 

graphql-API

profile("철수")

 

응답 결과물의 차이

rest-API : 응답 결과로 Back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야 한다.

graphql-API : 응답 결과로 Back-end 개발자가 만든 함수에서 필요한 데이터만 받을 수 있다.

 

설치해야 하는 프로그램

rest-API :  axios

graphql-API :  apollo

 

JSON (JavaScript Object Notation)

자바스크립트의 객체 표기법

백엔드에서 데이터를 주고받을 때 객체 자체를 주고 받을 수 없다.

객체를 문자열로 묶어서 문자열로 보내게 되는데, 객체를 담은 문자열을 객체 표기법이라 한다.

백엔드에서 응답의 결과물로 주는 것은 JSON이고, JSON은 객체를 담은 문자열이다.

 

JSON 특징

응답으로 주고받는 JSON은 응답의 body 부분이다.

header에는 body에 관련된 요약정보가 들어간다. 요약 정보에는 응답을 보내는 사이트가 어디인지, body의 형태는 JSON인지 등을 포함하고 있다.

 

CRUD

Create, Read, Update, Delete

 

	axios(rest-API)	apollo-client(graphql-API)
생성 Create	POST	MUTATION
수정 Update	PUT
삭제 Delete	DELETE
조회 Read	GET	QUERY

 

사용방법

axios(rest-API)

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(graphql-API)

import{ useMutation, useQuery} from '@apollo/client'

const result = useMutation(API이름)
const result = useQuery(API이름)

 

API 명세서

API 사용 설명서

 

rest-API

API 연습 : 포스트맨(Postman)

API 설명서 : 스웨거(Swagger)

 

graphql-API

API 연습 / 설명 : 플레이그라운드(Playground)