[JavaScript] 비동기 처리 방식 (callback, setTimeout, promise)

1. 비동기 처리 방식이란?

비동기 처리 방식은 병렬적으로 테스트를 수행하는 것을 뜻한다. 즉, 순차적으로 특정 코드의 연 사이 끝날 때까지 기다리는 동기 처리 방식과는 달리 코드의 실행을 멈추지 않고 병렬적으로 코드가 실행되는 방법을 뜻한다. 이런 비동기 처리 방식은 자바스크립트 언어가 싱글 스레드 프로그래밍 언어이기 때문에 많이 사용된다. 

 

2. callback 함수

callback은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말하며 자바스크립트에서는 특정한 이벤트가 발생했거나 특정 시점에 시스템에서 호출하여 비동기 처리방식으로 사용 할 수 있다. 

- Synchronous callback: 즉각적으로 실행하는 동기적 callback 함수

- Asynchronous callback: 언제 실행할지 예측할수 없는 비동기적 callback 함수

 

하지만 콜백함수내에서 콜백 함수를 빈번하게 반복되어 사용되고 들여 쓰기 정도가 매우 깊어지면서 가독성이 떨어지고 비즈니스 로직을 파악하기 어려워지기 때문에 에러 발생 시 디버깅을 할 때 어려움을 느끼고 유지보수가 힘들어진다는 단점이 있다. 콜백 지옥을 무분별하게 써서 가독성이 매우 떨어지게 된 코드랄 `콜백 지옥`이라고도 한다.

 

3. setTimeout

자바스크립트의 내장되어있는 타이머 함수이며 비동기 처리를 할 수 있게 해준다. 일정 시간을 지연시켜서 작업을 수행한다. 두 개의 매개 변수를 받는데, 첫번째는 실행할 작업 내용을 담은 콜백 함수이고, 두 번째는 콜백 함수를 수행하기 전에 기다리는 밀리초 단위 시간이다.

예시) 3초 뒤 2 콘솔창에 출력

setTimeout(function () {
            console.log('2');
},3000);

 

4. promise

 모든 프라미스 동작은 ‘마이크로태스크 큐’(ES8 용어)라 불리는 내부 ‘프라미스 잡(promise job)’ 큐에 들어가서 처리되기 때문에 프라미스 핸들링은 항상 비동기로 처리된다.

 

* promise의 상태

- pending(대기상태) - resolve(해결) - fulfilled(성공)

- pending(대기상태) - reject(거부) - rejected(실패)

 

- resolve는 성공상태, reject는 실패 상태를 뜻 하며, resolve일 때는 then으로 메시지를 전달하고 reject일 때는 catch로 메시지를 전달한다.

 

promise는 들여 쓰기도 없고 가독성이 좋아지기 때문에  콜백 지옥을 해결할 수 있는 장점이 있다.

예시) 

let p = new Promise(function (resolve, reject) {
            // resolve('hello world');
            reject('hello world');
        }).then(메시지 => {
            alert(메시지);
            return 메시지.split(' ')[0]
        }).then(메시지 => {
            alert(메시지);
            return 메시지[0]
        }).then(메시지 => {
            alert(메시지);
        }).catch(메시지 => {
            alert('catch 실행!! :' + 메시지);
        });