본문 바로가기

데브코스/도서 판매 쇼핑몰

비동기 처리

Node.js 비동기

논 블로킹 I/O => 한 명이 일을 하는데 요리를 순차적으로 X, 중간 중간 비는 시간이 있으면 다른 요리를 한다.

node.js 에는 순서가 의미가 없다. 

 

ex) 라면 1개 ( 10 분 중 물 끓는 시간 5분), 볶음밥 ( 완성 5분) 

: 라면 물 끓여놓고 => 볶음밥 요리 => 라면 요리 

 

Node.js 비동기 처리 방식

비동기 발생

: 실행되는 코드가 기다려야 하는 시간이 생긴다는 의미

: 일단 이전 시간이 오래 걸리면 안 기다려주고 ( 알아서 하라고 하고 ) 다음 코드를 무작정 실행함. 

ex) setTimeOut() ,  setInterval() , query()  ... 

 

⭐ 비동기 처리

: 비동기가 필요 없을 때 

: 이전 코드들의 시간을 다 기다려준다. 순서를 맞춰서 코드를 실행해주겠다 ! 

 

1. 콜백 함수 : 할 일 다 하고, 이거 실행해줘 ( = 순서 맞춰서 이걸 뒤에 실행해줘)

2. promise ( resolve, reject)

3. then & catch

4. ES2017 promise  => async & await 

 

Promise 객체 : 무조건 약속을 지키는 친구

let promise = new Promise(function (resolve, reject) { // 매개변수를 함수로 받는다.
      // executor: 이 친구가 할 일
      setTimeout(()=> resolve("완료!"),3000);
      
      // 일을 다 하면 무조건 콜백함수 resolve() 또는 reject() 둘 중 하나는 호출 
      // 할 일을 성공적으로 하면 resolve(결과)
      // 실패하면 reject(에러) 
});

// promise 의 기본 메소드 : promise 가 일 다 하고 ( = 약속 다 지키고 ) 호출해야 하는 함수
promise.then(
  function ( result ){ // 성공하면 자동으로 실행
    console.log(result);
  },
  function(error) {} // 실패하면 자동으로 실행
);

 

promise chaining

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve("완료!"), 3000);
}).then(
  function (result) {
    console.log(result);
    return result + "!!!!!!";
  },
  function (error) { }
).then(
  function (result) {
    console.log(result);
    return result + "!!!!!!";
  },
  function (error) { }
).then(
  function (result) {
    console.log(result);
  },
  function (error) { }
);

계속  then 으로 성공했을 때 호출되는 함수의 매개변수로  result 의 값이 전달되어 위와 같은 결과가 출력된다. 

 

async- await 

 

: Promise 객체를 좀 더 쉽고 편하게 사용하기 위한 문법, 즉 비동기 처리가 쉽다. 

  • _____ function f() {} : 일반 함수
  • async function f() {} : async 함수
async function f() {
  return 7; // Promise 객체를 반환 중 (= Promise.resolve(7))
}

f().then(
  function (result) {
    console.log("promise resolve: ", result);
  },
  function (error) {
    console.log("promise reject: ", error);
  }
);

 

async 의 기능

 

1️⃣ 무조건 Promise 객체를 반환한다. 만약 반환값이 Promise 가 아니면, Promise.resolve() 로 감싼다. 

2️⃣ Promise 객체가 일이 끝날 때까지 기다릴 수 있는 공간을 제공한다. 

     => await : Promise 객체.then() 메소드를 좀 더 쉽게 사용할 수 있는 방법

async function f() {
  let promise = new Promise (function (resolve, reject) {
    setTimeout(()=> resolve("완료!"), 3000);
  });

  let result = await promise; 
  // promise 객체가 일 다 할 때까지 기다려줌 
  console.log(result);
}

f();


🌟 배운 점

오늘 비동기 처리에 대해 배웠다. 비동기 처리라는 개념은 많이 들어봤지만, 오늘에서야 그 정확한 의미를 알게 되었다. Promise 객체와 async-await의 역할은 이해했지만, 실제로 사용하는 데에는 아직 헷갈리는 부분이 있는 것 같다. 이를 능숙하게 활용하기 위해서는 스스로 복습하고, 따로 시간을 내어 공부하는 것이 필요할 것 같다.