코드 캠프 03일차) API? REST? 그게 대체 뭔데?

오늘은 회의룸에 프론트 엔드 9기 전체가 모여서 친해지기 위한 I'am Ground를 실시했다. 오늘 하는 건 멘토님이 미리 알려주셨었는데 동기분들이 다 모여서 그냥 우리 서로 간단하게 소개합시다..ㅎㅎ 라고 서로 해놓고 다들 수준급의 발표를 보여주셨다.. 자기소개를 보는 내내 감탄했던 것 같다.

난 준비한 것도 없는데.. 마지막 차례...

진짜 너무한거 아니냐구요들!!!!!!!!!!

아 그리고 매일 벨로그 챙겨봐주시고 후기 직접 들려주시는 BE_09기 동기분 감사합니다ㅎㅎ

오늘의 목차

1. HTTP 통신
2. API
3. Postman과 Swagger
4. Hoisting(번외)

HTTP 통신

데이터 통신 규약 프로토콜 종류

• 파일 : FTP (File Transfer Protocol)
• 간단한 메일 : SMTP (Simple Mail Transfer Protocol)
• 텍스트/하이퍼 텍스트 : HTTP (Hyper Text Transfer Protocol)

요청 전송 흐름
사용자 -> 백엔드(검증) -> 데이터베이스(최소 2 대 이상의 컴퓨터)

일반적인 경우에는 보안 및 데이터 정제 등의 이유로 백엔드를 거치지 않고 데이터베이스에 바로 요청할 수 없음.

1. FE ---- Request ----> BE
2. FE <--- Respond ---- BE

BE 에서 응답할 때 응답(정확히는 Response의 Header)에 HTTP 상태 코드가 포함된다. 상태 코드는 크게 5개로 구분되며, 첫 번째 자리로 구분할 수 있다.

상태코드	설명
1XX	정보 - 요청을 받았고 프로세스 계속함.
2XX	성공 - 요청을 성공적으로 받았고 인식하고 수용함.
3XX	리다이렉션 - 요청 완료를 위한 추가 조치 필요함.
4XX	클라이언트 오류 - 요청의 문법이 잘못되었거나 요청을 처리할 수 없음.
5XX	서버 오류 - 서버가 유효한 요청에 충족을 실패함.

보통 주소를 잘못 입력하면 나오는 404 Not Found.

API

API란 프론트 단에서 백 단으로 HTTP 요청을 보내면 실행되는 백엔드 기능이다.

API의 종류는 크게 REST와 GraphQL 두 가지로 나뉜다.

REST vs GRAPHQL

REST-API 특징

• API 함수 이름이 홈페이지 주소처럼 생긴 이름이다.
  https://naver.com `/board/news```
• 데이터 요청 시, 해당 데이터가 담겨있는 주소(API 함수)에 대한 데이터를 모두 받아온다.

GraphQL-API 특징

• API 함수 이름이 정해져있지 않다.
• 데이터 요청 시, 필요한 해당 데이터만을 받아온다.

데이터 요청 시, 해당 데이터 위치까지의 계층을 전부 불러오는 REST 보다는 해당 데이터만을 불러오는 GraphQL이 더 효율적인 통신이 가능하다. 이러한 이유로 크고 유명한 서비스(facebook, airbnb, github etc)에서 사용 중인 통신 방법이기도 하다.

하지만 아직 많은 회사들이 REST API를 사용하고 있으며, GraphQL을 사용하는 회사에서 개발을 하게 되더라도 다른 회사에서 제공하는 REST API를 사용하려면 꼭 알고있는 것이 좋다.

JSON

MDN 정의를 찾아보면 아래와 같이 나온다,

JavaScript Object Notaion은 JavaScript 객체 문법을 따르는 문자 기반의 데이터 포맷이다.
JSON은 문자열 형태로 존재하기 때문에 네트워크를 통해 전송할 때 아주 유용하다. 데이터에 접근하기 위해서는 네이티브 객체로의 변환이 필요하다.

음... 한 마디로 JS의 객체 "생김새"를 가지고 문법 또한 거의 비슷한 문자열이라는 것 같다. 객체와 비슷하게 생겼지만 문자열이기 때문에 HTTP 통신에 유용할 것 같고.. 문자열을 다시 객체로 파싱하거나 객체를 다시 문자열로 변환만 자유자재로 되면 으ㅡ아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ주 편해보인다.

JSON객체의 메서드를 찾아보자.

API의 대표적인 역할 4가지 (+1)

• Create
• Read (+1)
• Update
• Delete

Read는 목록 조회용 Read가 따로 있다.

	axios(rest-api)	apollo-client(graphql-api)
Create	Post
Update	Put	Mutation
Delete	Delete
Read	Get	Query

Postman & Swagger

REST

API 실습 도구 Postman
API Docs Swagger

GraphQL

API 실습 도구와 Docs 합쳐진 plyaground

graph-ql의 Query와 Mutation 메서드는 Product > Board > Profile 순으로 실무에서 많이 다룬다.
Product는 메서드의 파라미터가 조건인지, 수정할 내용인지 구분이 잘 된다.