HTTP 통신과 API

1. HTTP 통신

HTTP는 쉽게 말하면 ‘두 컴퓨터 간에 텍스트 데이터를 주고 받는 길‘이다. 여기서 텍스트는 하이퍼텍스트를 포함한다. HTTP라는 이 길을 통해 컴퓨터1이 컴퓨터2에게 요청하고, 컴퓨터2가 컴퓨터1에게 응답하는 것을 우리는 ‘HTTP 통신’이라 말한다.

---

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

• 웹브라우저에서 홈페이지(프론트엔드)가 실행 중이면, 작성한 게시물 텍스트 데이터를 HTTP를 통해 백엔드 컴퓨터로 보내고, 백엔드 컴퓨터에게 이 데이터를 데이터베이스에 저장해 달라고 하는 것이 요청이다.

• 이러한 요청을 받은 백엔드 컴퓨터가 ‘성공’이나 ‘실패’ 등의 처리 결과를 알려주는 것이 응답이다. (백엔드 컴퓨터가 응답할 때, 응답 상태코드를 함께 보내준다. 자주 접할 수 있는 ‘404 Not Found’ 같은 것들이다. 만약 요청에 성공했으면 응답 상태코드 200을 함께 보내준다.) 상태코드(MDN) 더 보기

---

3. API

평소에 API라는 단어는 자주 들었는데 정확히 알지는 못했다. API는 ‘HTTP 요청을 백엔드 컴퓨터에 보냈을 때 실행되는 백엔드 기능‘이다.

프론트엔드에서 HTTP를 통해 게시물 데이터를 백엔드에 보내 저장했다고 하자. 그런데 게시물 말고 프로필 데이터를 저장하고 싶다면? 그럼 더 많은 HTTP가 존재해야 하고, 각각의 요청마다 담당자가 필요하다. 이 담당자가 바로 API이다. (API가 백엔드 기능이면, 기능은 함수니까 API는 함수인가? 그렇다. API에 요청할 때 보내는 데이터는 API함수로 들어갈 인자이고, 응답으로 받게 되는 데이터는 API함수의 return 데이터이다.)

---

4. API 종류 (rest-API vs. graphQL-API)

API의 종류에는 크게 rest-API와 graphQL-API가 있다. 둘은 몇 가지 차이점이 있다.

4.1. 함수 이름 차이

rest-API는 API이름이 마치 홈페이지 주소처럼 생긴 반면, graphQL-API의 API이름은 일반적인 함수와 같다.

	rest-API	graphQL-API
API 함수 이름	주소처럼 생긴 이름	함수처럼 생긴 이름
네이버에서 1번 게시글 조회	https://naver.com/board/1	board(1)
네이버에서 철수 프로필 조회	https://naver.com/profile/철수	profile(“철수”)

4.2. 응답 결과물 차이

반면 graphql-API는 백엔드 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있다. (그래서 graphql더 효율적이다. 그래도 rest-API를 사용하는 회사들이 있고, 퍼블릭 API가 많은 경우 rest-API로 제공되기 때문에 알아야 한닷!)

각 API에 전송을 요청하는 담당자도 다르다. rest-API에 요청을 담당하는 담당자는 axios이고, graphql-API는 apollo-client이다. 이 요청 담당자들은 프론트엔드에서 설치하는 라이브러리이다.

4.2.1. rest-API의 언더페칭과 오버페칭

rest-API는 매우 유용하지만 두 가지 문제점이 있다. 1)오버페칭과 2)언더페칭이 그것이다. 이 두 가지 문제를 해결하기 위해 페이스북에서 graphQL을 만들었다.

1) 오버 페칭

오버페칭은 필요한 데이터보다 더 많은 데이터를 가져온 경우를 말한다. rest-API는 응답결과로 백엔드 개발자가 만든 함수에서 보내주는 모든 결과를 받아야만 한다.

실제 필요한 정보만 특정하여 요청한다면 DB가 일을 많이 할 필요도, 이동해야 하는 데이터도 줄기 때문에 로딩 시간이 획기적으로 줄어든다. graphQL은 Query Language이기 때문데 정확히 필요한 정보만 요청할 수 있게 해준다.

2) 언더 페칭

언더페칭은 필요한 데이터보다 덜 가져온 경우를 말한다. rest-API는 필요한 데이터마다 각기 다른 URL을 통해 매번 요청을 보내야 한다. 여러 URL을 연속해서 접속해야 하고, 이는 로딩타임의 증가로 이어진다. graphQL에서는 한 개의 쿼리에 여러개의 정보를 한 번에 요청할 수 있다.

📌 참고!: 이 영상을 보고나면 REST API 를 못쓰게 됩니다.

4.3. API와 CRUD

API는 크게 4가지로 구분된다. 개발자가 되려면 기본적으로 CRUD를 할 수 있어야 한다고 들었는데 바로 그 CRUD였다.

• 새로운 것을 생성하는 API => Create
• 기존의 것을 조회하는 API => Read
• 기존의 것을 수정하는 API => Update
• 기존의 것을 삭제하는 API => Delete

실제로는 다음과 같이 사용된다.

지금까지의 내용을 한 장으로 정리하면 다음과 같다.

API 요청 결과를 받아보면, 자바스크립트의 객체처럼 표기된 것처럼 보인다. 그래서 이름이 JSON이다. (JavaScriptObjectNotation)

4.4. API 명세서

프론트엔드 개발자들은 백엔드 개발자들이 만들어놓은 API의 개수와 구성을 확인해야 한다. 그때 필요한 것이 바로 API 사용설명서인 API 명세서이다. (이 API 명세서는 백엔드 개발자에게 받아야 하고, 백엔드 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나 swagger라는 프로그램을 설치해서 만든다.)

rest-API의 API 설명서는 swagger로 확인할 수 있고, Postman이라는 프로그램으로 연습해볼 수 있다. graphQL은 Playground를 통해 설명서도 보고 연습도 해볼 수 있다.