TIL - 2022.01.12 수요일

오늘 배운 것

오늘은 HTTP의 개념과 API를 배웠다. (+ Json과 CRUD도)

그리고 Rest API vs GraphQL 의 차이를 배우고 기본 방식을 연습했다.

오늘은 단순 개념 정리가 많아서 요약노트같은 TIL이 될 듯.

 

1. HTTP와 API

---

HTTP란?

HTTP는 두 컴퓨터간의 데이터 전송을 담당하는 일종의 길이다.

우리의 경우, 프론트엔드와 백엔드 사이를 연결하는 데이터들의 길이라고 생각하면 쉽다.

 

HTTP의 규칙

1. 요청을 해야 그에 대한 응답을 보내준다. (요청과 응답 / Request & Response)
2. 응답을 줄 때에는 숫자를 같이 보낸다. 이것을 응답 상태코드라고 한다.
3. 이 상태코드에는 일정한 규약이 있다. 자주 볼 수 있는 응답 상태코드에는 성공(200), Front-end 에러(400), Back-end 에러(500) 등이 있다.

더 많은 상태코드는 MDN에서 볼 수 있다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 상태 코드 - HTTP | MDN

API란?

API는 백엔드의 데이터 처리 담당자로, HTTP를 통해 요청을 받고, 수행하고, 응답하는 작업을 한다.

API는 요청의 종류에 따라 다수 존재하며, 각각의 API별로 다른 기능을 한다.

 

2. Rest-API vs GraphQL-API

---

API에는 크게 rest-API, graphql-API 2종류가 있다.

 

	Rest-API	GraphQL-API
API 함수 이름	주소처럼 생긴 이름 http://naver.com/board/1 http://naver.com/profile/철수	일반 함수와 같은 이름 board(1) profile("철수")
응답 결과물	일부 데이터만 필요한 경우에도 전체 데이터를 받아야만 하는 구조	원하는 일부 데이터만 골라 받을 수 있음
요청담당자	axios	apollo-client

GraphQl은 효율적인 데이터 통신을 위해 페이스북 개발팀에서 만들었으며, facebook, airbnb, github 등 많은 사이트에서 사용중인 통신 방법이다. 하지만 국내에서는 아직 GraphQL이 많이 사용되지 않는다. 즉, 내가 취업하는 회사에서 Rest-API를 쓰고 있을 확률이 높다는 뜻. 공공 API도 대부분 Rest-API로 만들어져있기 때문에 Rest-API 방식도 반드시 익혀두어야 한다.

 

내가 그동안 썼던 공공 API들이 다 Rest API였다는 사실을 오늘 처음 알았다.

JSON이란?
Javascript Object Notation / 자바스크립트 객체 표기법
API 응답은 Json 형태로 간다.

 

3. CRUD란?

---

Create / Read / Update / Delete

생성 / 조회 / 수정 / 삭제

 

가장 Basic이 되는 API의 기본구성.

API로 만드는 기능에는 일반적으로 이 네가지가 포함되어 있어야 한다. (물론 예외도 있음)

 

Rest-API 와 GraphQL-API는 CRUD에도 차이가 있다.

 

	Rest API axios	GraphQL API apollo-client
생성 Create	POST	MUTATION (변경하는 작업)
수정 Update	PUT
삭제 Delete	DELETE
조회 Read	GET	QUERY (조회하는 작업)
	▲ 요런 것들을 method라고 부른다.

실제 사용방법에도 차이가 있다.

▼ 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이름입력 )

 

4. API 설명서 & 연습도구

---

API는 백엔드 개발자가 어떻게 코딩하느냐에 따라 무궁무진하게 달라지기 때문에 설명서가 필요하다, 이러한 설명서를 docs라고 하며, API docs와 연습도구 역시 API 종류에 따라 갈린다.

 

	Rest-API	GraphQL-API
API 연습	포스트맨 Postman	플레이그라운드 Playground
API Docs	스웨거 Swagger

 

5. 실습!

---

GraphQL-API 사용 예시 with Playground

 

이렇게 요청하면

이런 식으로 응답이 오고

이렇게 요청하면

이런 식으로 응답이 온다.

 

모든 함수와 인자는 공식이 아니라 백엔드 개발자가 만들고 지정하는 것이다. 사용하는 API의 docs를 참고하여 data를 요청하고, 추가로 필요한 기능이나 옵션이 있을 때에는 백엔드 개발자에게 요청하면 된다.

 

6. 그리고…

---

다른 개발 티스토리들의 코드블럭은 예쁘기만 한데 내 코드블럭은 왜이렇게 못생겼나 싶어 찾아봤다. 코드 문법 강조(Syntax Highlight) 플러그인을 사용하는 거더라.

 

나도 깔았다. 깔끔하다. 만족스럽다.

코드블럭이 못생겨도 너무 못생겨서 velog로 옮길까 고민했는데(진지했음) 그럴 필요 없겠다.