HTTP API 동기&비동기

1. HTTP란 ?

HyperText Transper Protocol 의 준말, 하이퍼텍스트 트랜스퍼란 링크 기반으로 데이터를 요청하고 받겠다는 것
클라이언트와 서버가 요청을 하고 응답을 하기위해 따르는 프로토콜이다.
HTML 문서를 주고 받을 수 있음, 뿐만 아니라 이미지, 동영상, 오디오, 텍스트 문서 등을 주고 받을 수 있다.

2. HTTP 메소드 그리고 API의 종류

메소드란 ? 요청의 종류를 서버에 알리기 위해 사용하는 것, 게시판 기능 (CRUD , REST API)을 만들 때 사용
메소드 종류

1.POST : 정보를 입력하기 위해 사용( CREATE )

2.GET : 정보를 요청하기 위해 사용 ( READ )

3.PUT : 정보를 업데이트하기 위해 사용 ( Update )

4.Delete : 정보를 삭제하기 위해 사용 ( Delete )

1) API의 종류

Rest-API

Graphql-API

REST API 프로토콜 장점을 살릴 수 있는 네트워크 기반 아키텍처 1) REST API 구현하기 위해 HTTP 메서드 + 모든 개체 리소스화 + URL디자인 (라우팅) 필요

라우팅이란 ? 클라이언트의 요청에 대한 결과(응답)을 어떻게 이어줄 것인가를 처리하는 것
URL를 이용한 접근 : 모든 개체를 리소스로 보고, 리소스에 고유번호를 부여
URL 디자인 원칙 : 자원에 대한 처리를 주소에 나타내지 않음(HTTP 메소드는 내부적으로 처리하도록 만듦), 어떤 자원인지 주소에 명확하게 나타냄

2) REST-API

import axios from "axios"

const result = axios.post(API name) // create (생성)

const result = axios.get(https://naver.com/board1) // read (읽기)

const result = axios.put(https://naver.com/board1) // update (수정)

const result = axios.delete(https://naver.com/board1) // delete (삭제)

3) Graphql-API

응답 결과로 백앤드 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수있다. 필요한 데이터만 골라 받을 수 있어서, 효과적인 통신이 가능하다.

graphql-API에 요청하는 요청 담당자 : apoollo-client 요청담당자: 프론트엔드쪽에서 설치하는 라이브러리

import { useMutaion , useQuery } form '@apollo/client'

const result = useMutaion(API name)

const result = useQuery(API name)

3. API를 구분하는 4가지 방식

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

4. 동기 와 비동기

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

동기
- 서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신
- 한번에 하나씩 통신
- 응답이 모두 끝난 후 요청
비동기
- 서버 컴퓨터가 작업이 끝날 떄까지 기다리지 않는 통신
- 서버에 요청(등록,수정,삭제 등) 저장이 될 때까지 기다리지 않고 다른 작업 진행
- 동시에 여러개 통신 ex) 오래 걸리는 일(이메일 전송, 다운로드 받으면서 메신저하기)

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

rest_API 또는 graphql-API를 사용해서 요청에 대한 응답을 받는 객체( JSON )를 변수에 담아서 사용한다.

응답결과를 변수에 담아서 사용하려면 통신이 완료될 떄까지 기다려야한다.

이 때 async/await를 활용하여 기다려야한다.

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

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

Promise

자바스크리트 비동기 처리에 사용되는 객체

API가 실행되면 서버에다가 요청을 보내는데 받아오기도 전에 화면에 데이터를 표시하려 하면 오류가 발생하거나 빈화면이 뜸

Promise 는 비동기적으로 실행하는 작업의 결과를 나타내는 객체이다.

//비동기 통신

async funciton 함수(){
    const data = axios.get('https://adadjson.com/posts/1')

    cosnlole.log(data)

    //Promise

}

//동기 통신

async funcion 함수(){

    const data = await axio.get('https://adadjson.com/posts/1')

    cosnlole.log(data)

    //{id:1}
}