비동기

비동기란, "동시에 일어나지 않는다"는 의미이다. 자바스크립트는 본래 싱글 스레드 언어이다. 싱글 스레드는 쉽게 말해 실을 생각해보자. 실은 다 풀려야 끝이 난다. 한 번에 하나의 작업만 처리할 수 있다. 

예를 들어, 서버에서 데이터를 가져오는 작업을 하는데. 작업 시간이 오래 걸린다고 하는데 이 작업이 동기적으로 처리된다면, 데이터를 가져올 때까지 아무것도 할 수가 없어 사용자는 웹 페이지에서 아무런 반응을 볼 수 없게 된다. 

하지만 비동기적으로 처리되면, 서버에서 데이터를 가져오는 동안에도 다른 작업들을 처리할 수 있다. 즉, 데이터를 요청하고 그 결과를 기다리는 동안에 다른 작업들을 계속 진행할 수 있다. 이렇게 함으로써, 싱글 스레드인 자바스크립트에서도 사용자가 웹 페이지와 상호작용하는 동안에도 웹 페이지가 반응성을 유지할 수 있게 해준다. 

너무 오래 걸리는 일은 잠시 뒤로 미루고, 빠르게 처리할 수 있는 다른 일을 먼저 처리한다. 

자바스크립트에서는 비동기 작업을 처리하기 위해 "axios", "fetch", "async/await" 등을 사용한다. 

1. axios

import axios from "axios"

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.log("Error:", error);
    });

axios 형식은 이렇다. 먼저 URL을 통해서 데이터를 요청하고, 성공적으로 데이터를 받으면 then을 통해서 해당 데이터를 활용할 수 있고 실패하면 catch 구문을 사용해서 에러 표시를 한다. 에러를 표시하는 이유는 주소가 잘못되거나, 서버가 문제가 있으면 데이터를 받아올 수 없는 상황을 대비하기 위해서다. 

 

2. fetch

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error", error));

fetch 형식도 axios랑 비슷하다. 다만 then을 두 번 사용하는데, 첫 번째 단계에서는 서버에 데이터를 요청해서 서버로부터 응답 받고 응답 객체인 Response라는 객체를 반환한다. 이 객체 안에는 HTTP 응답 상태 코드, 헤더 등과 같은 메타 정보(웹 상에서 데이터를 주고 받을 떄, 그 데이터와 함께 전달되는 추가 정보)를 포함하고, 실제 본문 데이터는 포함하지 않는다.

두 번째 단계는 응답 본문을 읽는 작업이다. Response 객체의 메서드인 json(), text() 등을 사용하면 이 작업을 사용한다. 그리고 axios랑 차이점 중에 하나는 axios는 라이브러리를 설치해야한다. 반면에 fetch는 내장함수라서 별도의 설치과정을 거치지 않는다. 

 

3. async/await

async function fetchData() {
   try {
       const response = await fetch("https://api.example.com/data");
       const data = await response.json();
       console.log(data);
   
   } catch (error) {
       console.log("Error", error);
   }

}

fetchData();

fetch와 axios는 실제 서버에 HTTP 요청을 보내는 함수를 제공하는 반면, async/await는 이러한 비동기 작업을 보다 쉽게 다루기 위한 문법이다. 따라서 async/await는 fetch나 axios와 함께 사용된다. 예를 들어, fetch나 axios로 요청을 보내고, 그 결과를 async/await를 사용하여 처리한다.