데이터 통신

HTTP

• Hyper Text Transfer Protocol의 약자로 두 컴퓨터 간 텍스트 데이터를 주고 받는 길이다.
  
• 요청(request)와 응답(response) 두가지를 서로 주고 받을 수 있다.
  

  🚨🚨이때 중요한 특징이 있는데 , 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다.서버는 클라이언트의 상태를 저장하지 않는다. 즉, HTTP 프로토콜은 상태가 없는 프로토콜이다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말이고, 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 말이다. 이러한 특징 덕분에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능 상의 이점이 생긴다.

HTTP의 요청과 응답

• HTTP 요청 (request)
  웹브라우저에서 홈페이지가 실행중일 때(Front-end), 작성한 게시물 텍스트 데이터를 HTTP로 Back-end 컴퓨터로 보낸 후 이 데이터를 DB에 저장하라고 요청 한다.
• HTTP 응답 (response)
  요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답한다.
  
  --> 메시지 안에는 시작 라인, 헤더, 공백 라인, 바디가 있다.

1. HTTP 요청 메시지

• 시작 라인
  • HTTP 메서드 (GET, POST 등)
  • 요청 엔드포인트 ('/board')
  • HTTP 버전
• 헤더
  • Host : 요청을 보내는 브라우저의 주소
  • Content-Type : 응답하는 메시지의 내용이 어떤 종류인지

2. HTTP 응답 메시지

• 시작 라인
  • HTTP 버전
  • HTTP 상태 코드 (200, 400, 500 등)
• 헤더
  • Content-Type : 응답하는 메시지의 내용이 어떤 종류인지

요청과 응답 모두 Body가 들어갈 수 있으며, 실제 전송하려는 데이터를 이곳 Body 객체에 담을 수 있다.

🚨 HTTP 상태 코드 : 상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공된다. 첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보이다.

• 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행한다.
• 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용한다.
• 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요하다.
• 4xx(클라이언트 오류) : 요청 문법이 잘못되었거나 요청을 처리할 수 없다.
• 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 시키지 못한다.

API

• API란 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능 이다. Front-end에서 HTTP라는 길을 통해서 게시물 데이터를 Back-end에 보내 저장시키는데, 각각의 요청마다의 담당자를 API라고 생각해도 된다. ➡️ API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게 되는 데이터가 API 함수의 return 데이터 입니다.
  

Rest-API vs GraphQL-API

• Rest-API는 API 이름이 홈페이지 주소의 형태 이지만 GraphQL-API는 일반적인 함수의 형태이다.
  

• 응답 결과물의 차이도 있는데 Rest-API는 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야 하지만 GraphQL-API는 필요한 데이터만 골라 받을 수 있다.
  ➡️ 이러한 이유로 각 API에 전송을 요청하는 담당자도 다른데 Rest-API는 axios이고 GraphQL-API는 apollo-client 이다. (요청 담당자는 Front-end에서 설치하는 라이브러리를 뜻한다.)

• API와 CRUD
  API는 4가지 방식으로 구분할 수 있다.

  1. 새로운 것을 생성하는 API ⇒ CREATE
  2. 기존의 것을 조회하는 API ⇒ READ
     (상세 내용을 조회하는 API가 하나 더 필요함)
  3. 기존의 것을 수정하는 API ⇒ UPDATE
  4. 기존의 것을 삭제하는 API ⇒ DELETE

그런데 이는 Rest 방식인지 GraphQL 방식인지에 따라 다르게 사용 된다.
➡️ Rest-API는 CRUD마다 사용하는 메서드가 존재하지만 GraphQL-API는 데이터를 조작하지 않고 조회만 할 때는 QUERY 그 외의 데이터를 조작할 때는 MUTATION을 사용한다.

• 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 이름)