HTTP 통신

HTTP란? 두 컴퓨터간에 텍스트 데이터를 주고 받는 길입니다.
HTTP 라는 길로 요청(request)과 응답(response) 2가지를 서로 주고 받을 수 있습니다.

HTTP요청 (Request)과 응답(Response)

HTTP라는 길로 요청(request)와 응답(response) 2가지를 서로 주고 받을 수 있습니다.

HTTP 응답(Response)
요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답합니다.

<<Back-end 컴퓨터는 응답할 때, 응답상태코드라는 것도 힘께 보내줍니다.
응답 상태코드는 100~599의 숫자로 이루어져 있으며 자주 볼 수 있는 응답 상태코드는 성공(200), Front-end에러(400), Back-end에러(500) 등이 있습니다.>>

• 응답 상태코드 2xx: 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다.

• 응답 상태코드 4xx: 클라이언트에 오류가 있음을 나타낸다.
  클라이언트란? 사용자(user)가 이용하는 웹브라우저를 통해서 서버측에 요청하는 것이라 생각하면 쉽다! 즉 '서버에 알맞은 형태로 요청을 하고 그 결과를 사용자에게 알맞게 전달하는 것' 이라고 이해했습니다.

• 응답 상태코드 500: 서버가 유효한 요청을 명백하게 수행하지 못했음을 나타낸다.

API

API란? HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능!
Front-end에서 HTTP라는 길을 통해서 게시물 데이터를 Back-end에 보내 저장시켰습니다.
만약, 게시물이 아닌 프로필 데이터를 저장하고 싶다면?
그러기 위해선, 여러개의 HTTP 라는 길이 존재해야 하고, 각각의 요청마다 담당자가 필요합니다. 우리는 이 담당자를 API 라고 부릅니다.

API 종류(. -API vs graphql-API)

API의 종류는 크게 rest-API, graphql-API 로 2가지가 있습니다.
rest-API 와 graphql-API 는 몇가지 차이점이 있습니다.

함수 이름의 차이

rest-API는 API 이름이 마치 홈페이지 주소처럼 생겼습니다. (http://naver.com/board/1)
graphql-API는 API 이름이 일반적인 함수와 같습니다. board(1), profile("철수")

응답 결과물의 차이

rest-API 는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야만 합니다.
반면에, graphql-API는 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있습니다.
이러한 이유로, 각 API에 전송을 요청하는 담당자도 다릅니다.
rest-API 에 요청하는 요청담당자는 axios
graphql-API 에 요청하는 요청담당자는 apollo-client


모든 데이터를 받아야만 하는 rest-api보다는 필요한 데이터만 받는 graphql이 더욱 효율적인 통신이 가능합니다.

API와 CRUD

API는 크게 4가지 방식으로 구분할 수 있습니다.

1. 새로운 것을 생성하는 API ⇒ CREATE

2. 기존의 것을 조회하는 API ⇒ READ

3. 기존의 것을 수정하는 API ⇒ UPDATE

4. 기존의 것을 삭제하는 API ⇒ DELETE

API 명세서

API 명세서는 API 사용 설명서 입니다. 홈페이지를 만들기 전 API가 몇 개 인지, 어떻게 구성되어 있는 지를 확인 가능합니다. (API명세서는 Back-end 개발자에게 받아야 합니다.)

Back-end 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나, swagger 라는 프로그램을 설치해서 만듭니다.

API 요청 결과 타입(JSON)

- json 이란?

{
classmate: "철수",
age: 13
}

위의 API요청 결과를 보면 자바스크립트의 객체처럼 표기된 것으로 보입니다.
따라서 자바스크립트(Javascript)의 객체(Object)처럼 표기(Notation)
단지 앞글자를 따러 JSON이라고 부를 뿐입니다!

<<앞에 있는 중괄효에 let student = 라고 추가하여 적는다면 자바스크립트와 똑같아 보입니다. 괜스레 낯설어 겁을 먹었는데 쉽게 생각하면 쉽게 느껴지는 것 같기두! 어려운 것이 아닌 익숙하지 않은 것이기에 계속 반복하면 충분히 할 수 있다고! 자기세뇌를 하고 있습니다.>>

GRAPHQL _ playGround 실습

1-1 . ! 는 무조건 보내줘야하는 필수값입니다.

1-2 . [!]는 있다면 무조건 보내줘야하는 조건필수값 입니다.

<<실제로 playground에서 실습해보면 다음과 같습니다.>>

createProduct, 즉 상품을 생성해보겠습니다.

create(생성)을 해야하니 mutation(생성, 수정, 삭제가 가능하다!)에서 createProduct를 입력하고 필수로 보내줘야하는 값을 임의로 적어줍니다.

Doks를 꺼내서 보면 필수로 보내줘야 하는 값과 받아올 수 있는 값을 알 수 있습니다.
실행 버튼을 누르면 받아올 수 있는 값(data)들이 오른쪽에 나타납니다.