[javascript] 비동기란?

자바스크립트에서 사용되는 콜백함수, Promise, async & await 개념을 알기 위해서는 먼저 비동기 개념을 알아야 한다.

그럼 비동기가 무엇인지 살펴보자.

 

비동기 처리란?

자바스크립트에서 비동기 처리란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기 처리를 예로 Ajax, setTimeout 등이 있다.

자바스크립트는 single thread(싱글 스레드)이기 때문에 작업을 하나씩만 수행할 수 있다. 그럼 어떻게 비동기 처리를 할 수 있는가? 바로 이벤트 루프때문에 가능하다. setTimeout은 브라우저의 다른 비동기 함수들(addEventListener, XMLHttpRequest)이나 node.js들 모든 비동기 방식의 api들처럼 이벤트 루프를 통해 콜백 함수를 실행한다

setTimeout(function() {
  console.log("Hello");
}, 0);
console.log("안녕하세요");

//결과는 안녕하세요 -> Hello 순으로 찍힌다.

다음 결과로 원리를 알아보자. 비동기 api는 작업이 완료되면 콜백 함수를 Task Queue에 추가한다. 이벤트 루프는 현재 실행중인 일이 없을때 Task Queue에서 꺼내와 실행하며 비동기를 구현하게 되는 것이다.

 

콜백 함수

비동기 처리는 Ajax로 데이터를 불러오기 전에 바로 다음 코드를 실행시켜 오류를 발생시킬 수 있다. 따라서 콜백(callback) 함수를 이용해 그 문제를 해결할 수 있다.

콜백 함수는 예약과 같다. 예약시간 전까지 무엇을 하던 그 시점에 원하는 동작을 수행할 수 있다.

하지만 콜백 함수는 콜백 지옥을 만들 수 있는 문제점이 존재한다. 예를 들어 데이터를 받아오고 난 뒤에 사용자 인증을 하고 그 뒤에 또 다른 작업을 하는 등 계속 꼬리를 무는 경우 코드가 상당히 지저분해지고 복잡해지는 것을 콜백 지옥이라고 한다.

call1(function (err, data) {
    if (err) {
        return;
    }
    call2(function (err, data) {
        if (err) {
            return;
        }
        call3(function (err, data) {
            if (err) {
                return;
            }
            call4(function (err, data) {
                if (err) {
                    return;
                }
				call5(function (err, data) {
					//...
            	});
            });
        });
    });
});

이 문제를 해결하기 위해서는 콜백 함수를 분리해주면 된다. 

또는 더 좋은 방법으로 Promise / Async & await를 사용하는 방법이 있다.

Promise와 Async await은 다음 포스팅을 참고하자.

 

Promise 포스팅 보러가기

Async Await 포스팅 보러가기

 

오늘 성장에 도움을 주신 개발자분

참고문헌 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

참고문헌 : https://kyounghwan01.github.io/blog/JS/JSbasic/eventLoop/#ecmascript%E1%84%8B%E1%85%A6%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%85%E1%85%AE%E1%84%91%E1%85%B3%E1%84%80%E1%85%A1-%E1%84%8B%E1%85%A5%E1%86%B9%E1%84%83%E1%85%A1

감사합니다.