비동기처리란? 비동기 처리 객체 Promise란?

1. 동기 처리와 비동기 처리

동기는 순차적으로 일을 처리하는 방법이며, 비동기는 한꺼번에 많은 일을 처리할 수 있는 방법입니다.

비동기 처리가 멀티스레드로 동작한다고 생각할 수 있지만, 실제 싱글 쓰레드로 동작합니다.

이해를 돕기 위해 동기와 비동기를 다음과 같이 정리하였습니다. 싱글 스레드로 동작하는 방식입니다.
다음 그림에서 확인할 수 있듯, 동기 처리는 CPU가 Idle 상태가 되면서 자원을 낭비하는 것을 알 수 있습니다.
반면, 비동기 처리는 CPU가 Idle상태에 빠지지 않게 함으로써 자원 낭비를 줄입니다.

• 동기:
  • 순차적으로 일을 처리
  • 호출부에서 실행 결과가 리턴되어야 다음 일을 처리 가능

---

• 비동기:
  • 병렬적으로 일을 처리
  • 한 번에 여러 가지 작업 처리
  • 호출부의 실행결과가 리턴되지 않아도 다음 일 처리 가능

---

✔ 동기와 비동기를 공부하다 보면 Blocking과 Non-blocking이란 용어를 만나게 됩니다. 블로킹을 동기적, 논블로킹을 비동기적이라고 오해할 수 있습니다. 제어권을 어떻게 처리하느냐에 따라 Blocking과 Non-blocking으로 구분할 수 있다는 것만 유념한 뒤, 이는 다른 게시물에서 하나의 주제로 다루어 보겠습니다.

---

2. 비동기 처리 - 콜백 함수

JavaScript에서 비동기 처리방식을 이해하기 위해서는 콜백함수를 먼저 이해하여야 합니다. 앞으로 비동기처리방식 중 Promise와 async-await에 대해 알아볼 것인데 이때, 콜백 함수 개념이 잘 잡혀있지 않다면 두 방식을 이해하는 데 혼란스러울 수 있습니다.

1) 콜백함수

• 나중에 호출될 함수
• 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템이 호출하는 함수

const greeting = (name, callback) => {
    console.log(`Hello! ${name}`);
    callback();
}

const callback_function = () => {
    console.log("콜백함수가 호출되었습니다.");
}

// 인자값으로 Edlin을 주고 greeting 함수가 호출되면, callback_function 함수를 호출해줘.
greeting("Edlin", callback_function);

// Hello! Edlin
// 콜백함수가 호출되었습니다.

const greeting = (name, callback) => {
    console.log(`Hello! ${name}`);
    callback();   
}

// 인자값으로 Edlin을 주고 greeting 함수가 호출되면, 익명함수를 호출해줘.
greeting("Edlin", function() {
    console.log("콜백함수가 호출되었습니다.");
});

// Hello! Edlin
// 콜백함수가 호출되었습니다.

---

2) 비동기 처리에서 콜백 함수를 사용하는 이유

• 서버에 요청을 보냈을 때 언제 응답이 올지 알 수 없기 때문에, 어떤 시점에 도달했을 때 호출 가능한 콜백함수를 사용

---

3) 내장 비동기 함수 setTimeout(function() {...}, miliseconds)

• 다음 코드를 실행해봅시다. 콜백 함수를 사용하지 않았습니다.

function greeting(country) {
  let result;

  setTimeout(function () {
    console.log("1초 후 실행");
    if (country === "Korea") result = "안녕?";
    else if (country === "America") result = "Hello";
  }, 1000);
  return result;
}

const result = greeting("Korea");
console.log("한국어 인사: ", result);

<예상 결과>

1초 후 실행
한국어 인사: 안녕?

<실제 결과>

• setTimeout()은 비동기 함수로 동기 함수처럼 순차적 실행을 보장하지 않습니다.
• 함수의 실행이 완료되기 전 다음 라인이 실행될 수 있다는 점을 유의해야 합니다.

🧡 비동기 함수를 실행할 경우 line by line으로 코드가 실행되어 결과가 반환되지 않는다는 점을 유의하세요!

---

• 다음 코드를 실행해봅시다. 콜백 함수를 사용한 예입니다.

function greeting(country, callback) {
  let result;

  setTimeout(function () {
    console.log("1초 후 실행");
    if (country === "Korea") result = "안녕?";
    else if (country === "America") result = "Hello";
    callback(result);
  }, 1000);
}

greeting("Korea", function (result) {
  console.log("한국어 인사: ", result);
});

---

3. 비동기 처리 객체 Promise

• ES6 전, 콜백함수를 중첩하여 연쇄적으로 호출(콜백 지옥) 하였습니다. 
• ES6 후, Promise를 사용하여 불편함을 해소하였습니다. 

Promise의 사전적 의미:... 일 것 같다,... 의 조짐을 보이다.
" An indication of future success or improvement "

1) Promise 란?

• 비동기 처리 작업의 완료와 실패의 결과 값을 나타내는 객체
• 비동기 연산이 종료된 이후의 결과 값을 이용하여 그 이후의 처리를 담당하는 처리기와 연결
• 비동기를 마치 동기 작업처럼 동작하게끔 하여 값을 반환할 수 있습니다. 
  
  • 주의할 사항은 최종 결과가 아닌, 미래의 어떤 시점에 결과를 제공하겠다는 약속을 반환한다는 것입니다. 

---

2) Promise.all(iterable)

• 주어진 모든 프로미스를 이행 혹은 한 프로미스가 거부될 때 대기하는 새로운 프로미스 반환
• iterable: 이행하고자 하는 프로미스의 결과 값을 가진 배열
• values: 이행하고자 하는 프로미스를 모두 이행하여 반환 값을 가지고 있다면(성공), 각각의 반환 값을 배열
• 이행하고자 하는 비동기 처리가 실패할 경우, 매개변수의 프로미스 중 거부된 첫 프로미스의 사유를 그대로 사용

// Promise.all() 예제

const promise1 = Promise.resolve(5);
const promise2 = 30;
const promise3 = new Promise((resolve, reject) => {
// Promise()의 인자값에는 처리하고자하는 비동기 메서드가 들어갈 수 있다.
  setTimeout(resolve, 100, "hello");
}); 

// values: 각 Promise 성공 시 가지는 값 (배열)
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // (3) [3, 30, 'hello']
});

// iterable 객체 : Promise {<state>: "fulfilled", <value>: Array[3]}
let iterable_value = Promise.all([1, 2, 3]); 

// 실패 시 iterable 객체 : Promise{<state>: "rejected", <reason>: 555}
let itrable_value2 = Promise.all([1, 2, 3, Promise.reject(555)]);

---

3) Promise.allSettled(iterable)

• Promise.all() 메서드:
  • 반환한 프로미스는 서로 연관된 작업을 수행하거나 하나라도 거부당했을 때 즉시 결과 반환
• Promise.allSettled(iterable):
  • 메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 객체 배열로 반환

// Promise.allSettled() 예제

const promise1 = Promise.resolve(5);
const promise2 = 30;

Promise.allSettled([promise1, promise2]).then((results) => {
  results.forEach((result) => console.log(result));
});

// {status: 'fulfilled', value: 5}
// {status: 'fulfilled', value: 30}

---

4) Promise.race(iterable)

• iterable 안에 있는 프로미스 중에 가장 먼저 완료된 것의 결괏값으로 그대로 이행 혹은 거부 

// Promise.race() 예제

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1, "called before promise2");
});
const promise2 = 30;

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 30
});

// promise1과 promise2 둘 다 실행되지만, promise2가 더 빨랐다.

---

5) Promise.resolve()

// Promise.resolve()

Promise.resolve(3).then((value) => {
  console.log(value); // 3
});

6) Promise.reject(reason)

• reason type: String

// Promise.reject(reason)

Promise.reject("error")
  .then()
  .catch((value) => {
    console.log(value);
  });

---

4. 사용법

• Promise는 함수에 콜백을 전달하는 대신, 콜백을 첨부하는 방식의 객체
  • 위 밑줄은 무엇을 의미하는 것일까요? 백문의불여일타! 코드로 이해해 봅시다.
  • 다음 예제는 mdn web docs를 참고한 내용입니다.

function successCallback(result) {
    console.log(result);
}

function failureCallback(error) {
    console.log(error);
}

// createAsync: 비동기 처리 함수의 결과 값을 Promise 객체로 반환
// 성공 시 successCallback 첨부 (콜백 직접 선언 X)
// 실패 시 failureCallback 첨부 (콜백 직접 선언 X)
createAsync(information_parameter).then(successCallback, failureCallback);

 

• 앞서 설명했던 Callback 함수의 예를 살펴봅시다. 인자값과 별개로 수행할 콜백함수를 선언해주었습니다. 그러나 Promise 객체는 callback을 첨부하는 방식의 객체임을 확인할 수 있습니다. 

function greeting(country, callback) {
  let result;

  setTimeout(function () {
    console.log("1초 후 실행");
    if (country === "Korea") result = "안녕?";
    else if (country === "America") result = "Hello";
    callback(result);
  }, 1000);
}

greeting("Korea", function (result) {
  console.log("한국어 인사: ", result);
});

---

1) 보장

• 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않습니다.
• ✨ then을 여러번 추가하여 여러 개의 콜백 함수를 추가할 수 있습니다. → chaining

---

2) Chaining

• 두 개 이상의 비동기 작업을 순차적으로 진행하고자 할 때 Promise Chain을 이용할 경우 콜백지옥에 빠지지 않을 수 있습니다.
• then() 함수는 새로운 Promise 객체를 반환합니다.
• 콜백 지옥의 예

firstThing(function(result) {
    secondThing(result, function(result2){
        thirdThing(result2, function(result3){
            console.log(result3);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

• ES6  이후 Promise 객체 사용하여 개선한 예

// 축약한 예
firstThing().then(function(result){
    return secondThing(result);
}).then(function(result2){
    return thirdThing(result2);
}).then(function(result3){
    console.log(result3);
}).catch(failureCallback);

// 축약하지 않은 예
firstThing().then((result) => secondThing(result))
            .then((result2) => thirdThing(result2))
            .then((result3) => {
                console.log(result3);
            })
            .catch(failureCallback);

• 한 chaining 작업이 실패하더라도 연속해서 비동기 작업을 처리할 수 있습니다.

new Promise((resolve, reject) => {
  console.log("Initial");
  resolve();
})
  .then(() => {
    throw new Error("Something failed"); // error 발생 - catch 수행

    console.log("Do this");
  })
  .catch(() => {
    console.log("Do that");
  })
  .then(() => {
    console.log("Do this, whatever happened before");
  });

---

3) 정리

• 콜백함수에서는 순차적으로 비동기처리를 수행할 경우, 에러처리를 각각 해주었습니다. (위 예제에서 3번)
• Promise 객체 사용 시, 에러처리는 1번으로 줄어듭니다.
• Chaining 대신 async/await를 사용하는 방법이 직관적이어서 더욱 선호되는 방식입니다.

Promise의 내용이 길어지는 관계로, 비동기 처리 함수 async / await는 다음 글에서 이어 설명하겠습니다.

// Promise then을 사용한 Chaining
firstThing().then((result) => secondThing(result))
            .then((result2) => thirdThing(result2))
            .then((result3) => {
                console.log(result3);
            })
            .catch(failureCallback);
            
// try...catch를 이용한 Chaining
try{
    const result = firstThing();
    const result2 = secondThing(result);
    const result3 = thirdThing(result2);
    console.log(result3);
} catch(error) {
    failureCallback(error);
}

// async/await 구문을 이용
async function asyncFunction() {}
    try{
        const result = await firstThing();
        const result2 = await secondThing(result);
        const result3 = await thirdThing(result2);
        console.log(result3);
    } catch(error) {
        failureCallback(error);
    }
}

---

 

<참고 사이트>

https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/

Javascript - 콜백함수(Callback function)이란?

https://www.daleseo.com/js-async-callback/

[자바스크립트] 비동기 처리 1부 - Callback

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises - JavaScript | MDN

https://ko.javascript.info/async-await

async와 await

 

깔끔하게 정리하려 노력하였는데, 잘못된 정보가 있을 수 있습니다.
글을 읽으시다 잘못된 부분이 있다면 알려주세요.
다음 정리부터는 정리내용을 간단히 정리하기 위해 "...습니다." 대신 "...다."로 문장의 마무리를 짓겠습니다.