HTTP, API, 동기 / 비동기 개념

onebbu·2023년 2월 8일

API http 동기 비동기

Study

목록 보기

1/1

HTTP

두 컴퓨터 간에 텍스트 데이터를 주고 받는 길

요청: 작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장해달라고 요청한다.

응답: 요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답한다. Back-end 컴퓨터는 응답할 때, 응답 상태코드 라는 것도 보낸다.

응답 상태코드
▪︎ 100 ~ 599까지의 숫자로 구성
▪︎ 200 성공
▪︎ 400 Front-end 에러
▪︎ 500 Back-end 에러

API

API란 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능이다.
데이터 요청을 받고 응답을 주는 담당자

Rest-API

▪︎ 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야만 한다.
▪︎ rest-API에 요청하는 요청담당자: Axios

API를 구분하는 4가지 방식(CRUD)

새로운 것을 생성하는 API ⇒ CREATE
기존의 것을 조회하는 API ⇒ READ
기존의 것을 수정하는 API ⇒ UPDATE
기존의 것을 삭제하는 API ⇒ DELETE

Axios Api 호출

생성 - Creat - Post
수정 - Update - Put
삭제 - Delete - Delete
조회 - Read - Get

동기 / 비동기

서버와 데이터를 주고 받는 2가지 방식

동기

서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신
한번에 하나씩 통신
응답이 모두 끝난 후 요청
요청과 그에 따른 결과가 동시에 일어남

비동기

서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신
서버에 요청(등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않고 다른 작업 진행
동시에 여러개 통신
오래걸리는 일( 이메일 전송하기, 게임 다운 받으면서 카톡하기 )
요청에 따른 결과가 그 자리에서 동시에 일어나지 않음

▪︎ 비동기를 동기로 바꿔주는 명령어 async / await

rest-API 또는 graphql-API를 사용해서 해야할 일은 요청에 대한 응답을 받은 객체(JSON)를 변수에 담아서 사용한다. 응답 결과를 변수에 담아서 사용하려면 통신이 완료될 때까지 기다려야한다. 이 때 async / await를 활용하여 기다려야한다.

// 비동기 통신
async function 함수이름(){
	axios('API이름') // 서버 컴퓨터에 요청(기다리지 않음)
}

// 동기 통신
async function 함수이름(){
	await axios('API이름') // 서버 컴퓨터에 요청(기다림)
}

요약

동기 방식은 설계가 매우 간단하고 직관적이지만, 결과가 주어질 때까지 아무것도 못한다.
비동기 방식은 좀 더 복잡하지만, 결과가 주어지는 시간 동안 다른 작업을 할 수 있으므로 시간 사용에 있어서 효율적이다.

Promise

자바스트립트 비동기 처리에 사용되는 객체
API가 실행되면 서버에다가 요청을 보내는데 받아오기도 전에 화면에 데이터를 표시하려고하면 오류가 발생하거나 빈화면이 뜸(이런 문제점을 해결하기위한 방법이 Promise)
✚ Promise는 비동기적으로 실행하는 작업의 결과를 나타내는 객체이다.

// 비동기통신
async function aaa(){
  const data = axios.get('https://koreanjson.com/posts/1')
  cosnlole.log(data)
	// Promise
}
//동기 통신
async function bbb(){
  const data = await axios.get('https://koreanjson.com/posts/1')
  cosnlole.log(data)
    //{id:1, title:"정당의 목적이나 활동이.."}
}

Reference
https://velog.io/@h1225hs/http
https://danac.tistory.com/251

onebbu