동기 비동기 / 서버 통신 (feat. react axios)

😎 동기 비동기 / 서버 통신 (feat. react axios)

 

✅ 동기와 비동기

1. 동기 (synchronous: 동시에 일어나는)
요청과 결과가 동시에 일어난다는 의미.

요청을 하면 시간이 걸리더라도 요청한 자리에서 결과가 출력되어야 한다.

 

장점 : 설계가 간단하고 직관적이다.
단점 : 이번 결과가 주어질 때까지 다음 작업 진행을 못하고 대기해야 한다.

 

2. 비동기 (Asynchronous: 동시에 일어나지 않는)
요청과 결과가 동시에 일어나지 않는다는 의미.

요청한 그 자리에서 결과가 주어지지 않음.

데이터를 불러오는 서버와의 통신 절차에서 주로 사용된다.

 

장점 : 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 진행할 수 있다.
단점 : 동기식보다 설계가 다소 복잡하다.

 

예를 들자면

동기: A 작업 요청 > A 작업 결과 출력 > B 작업 요청 > B 작업 결과 출력 > C 작업 요청 > C 작업 결과 출력

비동기: A 작업 요청 > B 작업 요청 > C 작업 요청 > A + B + C 작업 결과 출력

이렇게 이해할 수 있다.

 

동기, 비동기 참고 이미지

 

✅ axios란?

자바스크립트에서 API를 연동하기 위해서(서버와 통신) 보통 Fetch API를 사용한다.
리액트도 자바스크립트 built-in 라이브러리중 하나인 Fetch API라는 API 연동 모듈을 사용한다.
하지만 리액트에서는 axios 사용을 선호한다.

 

axios 특징

-Fetch API 보다 간소화된 문법

-Axios는 운영환경에 따라 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다
-promise API를 사용한다(.then 사용 가능)
-HTTP 요청과 응답을 JSON 형태로 자동 변경
-CSRF 보호 기능이 내장되어 있다

 

fetch api post

fetch("https://localhost:3000/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "userA",
    job: "developer",
  }),
}).then((response) => console.log(response));

axios post

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'user',
    job: 'developer'
  }
}).then((response) => console.log(response));

 

 

✅ axios 사용법

axios 설치

yarn add axios

npm i axios

//프로젝트 파일 상단 import
import axios from 'axios'

 

axios 문법

// POST 요청 전송
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Hello',
    lastName: 'World'
  }
});

axios({
  method: 'get',
  url: 'http://server/api',
  responseType: 'stream'
})
  .then(function (response) {
    console.log(response)
  });

// GET 요청 전송 (기본값)
axios('/user/12345');

 

axios 메소드

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

 

 

 

 

참고

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs