API

API란?

백엔드 서버에서 데이터 처리를 담당하는 명령어. API를 만드는 방법에는 Rest와 Graphql이 있다.

rest 와 Graphql 의 API 생김새는 다음과 같다

	rest-API	Graphql-API
1번 게시글 조회	http://abc.com/board/1	board(1)
프로필 조회	http://abc.com/profile/죠르디	profile(“죠르디”)

Rest는 주소 형태를 띄는 반면 Graphql 은 일반 함수 형태와 같다

또, 둘의 가장 큰 차이는 응답에서 나타난다.

rest-API 는 백엔드에서 준비된 내용을 전부 받아와야 하지만 graphql-API 는 원하는 내용만 받아올 수 있다.

즉, 프론트에서 게시물에 대한 요청이 있을 때 rest-api는 게시물 전체를 받아올 수 밖에 없지만 graphql-api 는 작성자, 제목 등 원하는 내용만 선택해서 받아올 수 있다.

CRUD

API의 메소드로 Create, Read, Update, Delete 를 의미한다.하나의 기능에 대해 CRUD 형태의 API를 만들어야 한다. (최소 CRUD 4개 이상이 필요하다)

	rest	Graphql
생성(creat)	POST	MUTATION
수정(update)	PUT	MUTATION
삭제(delete)	DELETE	MUTATION
조회(read)	GET	QUERY

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)

Graphql-API 작성 예시

import { useMutation, useQuery } from ‘@apollo/client’
const result = useMutation()
const result = useQuery()

동기와 비동기

동기란, 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이고 비동기란 이와는 반대로 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 통신이다.

즉, 비동기는 동시에 여러가지 작업을 처리할 수 있고 동기는 그렇지 않다. 그렇다고해서 비동기 처리 방식이 무조건 효율적이라고 볼 수는 없다. 만일 우리가 게시글을 등록하고 등록한 게시글을 조회해야 한다면 그땐 동기 처리 방식이 필요하다.

promise

promise는 자바스크립트에서 비동기 처리에 사용되는 객체다.

pending(대기) : 비동기 처리 로직 완료 전
fullfilled(이행) : 비동기 처리 완료
rejected(실패) : 비동기 처리 실패/오류

function callRestAPI () {
	const data = axios.get('https://koreanjson.com/posts/1')
	console.log(data) 
}

rest-API 에서 데이터를 요청하고 받아오기 위해 axios를 사용하면 비동기 실행이 일어나기 때문에 콘솔창에 promise 가 출력되는 걸 볼 수 있다.
데이터를 받아오기 전 데이터를 출력하려고 할 때 화면에 오류가 나는 문제를 해결하기 위한 방법이다. promise 말고 값을 받아 오기 위해선 비동기 실행을 동기 실행으로 바꿔줘야 할 필요가 있다.

async 와 await

비동기 실행을 동기 실행으로 바꾸기 위해선 async 와 await 를 사용해준다. await가 적힌 줄의 코드 실행이 완료되기 전까지 다음 코드는 실행되지 않는다.


async는 사용하고자 하는 함수 앞에 await는 함수 안에 적어주면 된다. 둘은 꼭 함께 써줘야한다는 점 잊지 말기!!

 const callRestApi = async () => {
    const result = await axios.get("http://koreanjson.com/posts/1")