비동기 프로그래밍이란?

비동기 프로그래밍이란?

비동기란?

• 앞에서 행하여진 사상(事象)이나 연산이 완료되었다는 신호를 받고 비로소 특정한 사상이나 연산이 시작되는 방식. [네이버 국어사전]

즉, 비동기 프로그래밍이란 특정 코드의 처리가 완료되기 전, 처리하는 도중에도 아래로 계속 내려가며 수행을 하는 것이다.

비동기 프로그래밍이 필요한 이유로 아래와 같이 현실의 예를 들 수 있다.

짜장면배달부는 짜장면을 배달하고, 빈 그릇을 회수하여야 한다.
이것을 동기 방식으로 처리한다면 아래와 같다.

• 1. 배달부가 A집에 짜장면 배달

• 2. A가 짜장면을 다먹고, 빈 그릇을 회수할 때까지 대기

• 3. 그릇을 회수한 후 B집에 짜장면 배달

  이렇게 일을 한다면, 배달부는 동기적으로 일을 하는 사람이며,
  아마 사장님한테 혼날 것이다... 😡

그런데 여기서 잠깐!✋

자바스크립트는 싱글스레드 즉, 한번에 하나의 작업이 끝나야 다음 작업으로 넘어갈 수 있다. 그렇다면 자바스크립트는 어떻게 비동기 프로그래밍을 수행할 수 있을까?
해당 설명은 여기서..

비동기 프로그래밍 방식

비동기 프로그래밍 방식은 무엇이 있을까?

1. 콜백방식

우선 콜백이란 무엇인가?
프로그래밍에서 콜백(callback) 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.
위키백과-콜백

그리고 콜백 방식이란 비동기 작업이 '완료되면' 콜백함수를 호출하는 방법이다. 즉, 콜백함수란 순차적으로 실행하고 싶을 때 사용하는 것 이다.비동기 프로그래밍에서 콜백이 어떻게 쓰이는지 다음을 살펴보자.

	const func = () =>{
    	console.log("two");
    }
    console.log("one");
    setTimeout(func, 5000);
    //(다른 데서 만든 함수도 콜백함수로 넣을 수 있음)
    //콜백함수가 필요한 함수들에만 콜백함수 사용가능.
    //ex) setTimeout, addEventListener("click", 콜백함수)
    console.log("three");

위와 같이 코드를 작동시키면 자바스크립트는 콜스택에서 "one"을 출력하고 비동기 작업(setTimeout)을 Web API로 보내버리고 "three"를 출력한다. Web API에서 setTimeout 작업이 끝나면 그 안에 있는 콜백 함수("two")를 콜백큐(태스크 큐)로 넘기고, 콜스택이 비워져있다면 콜백큐의 콜백함수가 콜스택으로 넘어가 "two"를 출력하게 된다.

콜백의 약점
함수안에 함수, 또 그 함수안에 함수, 또 그 함수안에 함수, 또 그 함수안에.....
콜백을 사용하게 되면 위와 같이 정말 복잡한 구조를 가진 콜백지옥이 완성될 수 있다. 이것은 가독성도 떨어지고 실수 위험도 커지기 때문에 말그대로 지옥이 될 수 있다.

2. Promise 방식

위에서 본 콜백의 약점때문에 자바스크립트는 ES6부터 Promise를 도입하였다.
Promise는 생성자에 인자로 들어가는 함수에 첫 번째 인자로는 수행할 비동기 작업, 두 번째 인자로는 그 결과물을 콜백함수에 전달하는 함수가 들어간다.

	const func = (id) =>{
    	return new Promise(resolve, reject){
        	ajax(baseUrl + id),
            //첫 번째 인자(비동기 작업)
            function(response){
            	resolve(response)
            }
            //결과물 전달
        }
    }
    
    func("z123123")
    .then((response) =>console.log(response))
    .then((value)=> let data = value);

비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다.

• .then( respose => {콜백 함수1} )
  .then( respose => {콜백 함수2} )
  .catch( err => {콜백 함수} )

then()
Promise객체의 응답객체를 파라미터로 전달받아, 비동기적으로 내부의 콜백함수를 수행. then 메소드는 Promise를 반환한다. 또한, then() 블럭은 프로미스를 반환하기 때문에 then() 블럭을 여러개 사용해 연쇄적인 비동기 작업을 수행할 수도 있다.

catch()
예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다. catch 메소드는 Promise를 반환한다.

finally()
프로미스의 결과가 성공인지 실패인지 관계없이 프로미스가 완료된 후 최종적으로 코드를 실행하고 싶을 때 사용한다.

2-1 fetch API?
fetch는 Promise의 단점을 보완한 최신 문법으로, 특정 URL로부터 데이터를 불러오는데 사용하는 API이다. 비동기 통신 중 하나이며, Promise 객체를 return하기에 사용하기 편하다.

fetch("https://apiURL")
    .then((response) =>response.json())
    .then((value)=> let data = value);

3. async/await 방식

async/await 방식은 비동기 함수를 동기 처리로 작동하도록 할 수 있다.
다음 예시를 보면 쉽게 이해할 수 있다.

const test = async()=>{
	console.log("one")
	await fetch("https://apiURL")
    	.then((response) =>response.json())
    	.then((value)=> let data = value)
    	.finally(()=>console.log("two"))
    console.log("three")
}

기존에 알던 비동기 방식이었다면 "one" -> "three" -> "two" 순으로 출력이 되어야한다.
하지만 async함수안에 await로 지정한 비동기 함수를 사용하면, 해당 작업이 완료되기 전까진 다음으로 넘어가지 않는다.
즉, 위의 코드는 "one" -> "two" -> "three" 순으로 실행이 된다.