HTTP API 동기/비동기 Router

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 기능이다.
데이터 요청을 받고 응답을 주는 담당자

▪︎ API 종류

Rest-API

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

Graphql-API

▪︎ 응답 결과로 back-end 개발자가 만든 함수에서 필요한 데이터만 골라받을 수 있다.
▪︎ 필요한 데이터만 골라 받을 수 있는 장점이 있어서, 효율적인 통신을 할 수 있다.
▪︎ graphql-API에 요청하는 요청담당자: apollo-client

❀ 요청담당자: Front-end 에서 설치하는 라이브러리

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

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

Rest-API

import axios from "axios"

const result = axios.post(API 이름) // 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

Graphql-API

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

const result = useMutaion(API 이름)
const result = useQuery(API 이름)

▪︎ API 명세서

Back-end 개발자에게 받는 API 사용 설명서

REST-API
- 연습: PostMan(크롬 확장프로그램에 설치해야함)
- API 설명서: Swagger

GRAPHQL-API
- 연습: Playground
- API 설명서: Playground

▪︎ API 요청 결과 타입(JSON)

자바스크립트 객체 표기법 JSON(JavaScript Object Notation)

API 요청의 결과가 자바스크립트의 객체처럼 표기되어 JSON이라 부른다.

{
	classmate: "철수",
	age: 13
}

동기 / 비동기

서버와 데이터를 주고 받는 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:"정당의 목적이나 활동이.."}
}

▪︎ graphql mutation에 try ~ catch

mutaion이 항상 성공하는 것이 아니다. 여러가지 실패 가능성이 있다. 그래서 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야한다.

try {
	await createBoard({
		variables: {
			aaa: "훈이",
			bbb: "1234",
			ccc: "안녕하세요 훈이에요",
			ddd: "반갑습니다"
				}
		})
} catch(error) {
	alert(error.message)  // 경고창(실패했습니다.)  ==>  백엔드 개발자가 보내주는 실패 메시지

}

라우터 객체와 라우팅

▪︎ 라우터(router) 객체: 페이지 이동과 관련된 기능을 가지고 있는 객체.
A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다"

const router = useRouter() → router.push("이동할 페이지")

▪︎ 라우팅 종류 - 정적라우팅과 동적라우팅

정적 라우팅(Static Routing)

직접 경로를 일일히 설정을 한다.

import { useRouter } from "next/router";

export default function StaticRoutingPage() {
  const router = useRouter();

  function onClickMove() {
    router.push("/05-02-static-routed");
  }

  return <button onClick={onClickMove}>정적 라우팅 페이지 이동!!!</button>;
}

동적 라우팅(Dynamic Routing)

한번 설정을 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해진다.
폴더 이름에 대괄호[]를 써주는 것이 특징

Quiz

REST-API 요청하기

1. [ REST-API 요청하기 ] 라는 버튼을 만들고, 이 버튼을 클릭했을 때 https://koreanjson.com/users 라는 Endpoint에 get 방식으로 요청하여 데이터를 받아보세요.
2. 위 1번에서 받은 데이터를 console.log()로 출력해 보세요.
   (혹시, Promise 라고 나오나요? 그렇다면 async/await로 기다려야겠죠??)

import axios from 'axios'
//
export default function RestGetPage(){   
    async function zzz(){
        const result = await axios.get('https://koreanjson.com/posts/1')
        console.log(result)
    }
    return (
        <button onClick={zzz}> REST-API 요청하기!!</button>
    )
}