[포스코x코딩온] JS_06 비동기처리

동기 처리 vs 비동기 처리

작업을 어떤 흐름으로 처리할거야?

세탁기가 다 돌아가야 설거지를 시작할 수 있어! => 동기 처리

세탁기가 돌아가는 동안 설거지를 하자! => 비동기 처리 

 

동기 처리(Synchronous) : A가 B의 작업 완료 여부를 확인하고 완료를 기다리는 것

비동기 처리(Asynchronous) : A가 B를 부를 때 콜백함수를 같이 보내서 B의 작업이 끝나면 콜백함수를 실행하고, 호출 이후, B가 완료하든 말든 신경쓰지 않는다. 

 

setTimeout()

setTimeout() 메서드는 시간이 만료되면 지정된 코드를 실행하는 타이머 역할이다. 

//delay동안 기다리다가 code 함수 실행
setTimeout(code, delay);

기다리지 않고 다음 줄을 실행함 => 비동기 처리

 

비동기 처리

특정 코드가 끝날 때까지 기다리지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 특성이다.

왜 바로 넘겨? 

- 화면에서 서버로 요청한다 했을 때, 언제 응답을 줄지도 몰라서 기다리지 않는다. 

function Menu() {
  console.log('배달의 민족 주문~🛵');
}

function PickUp() {
  //setTimeout 함수로 3초 뒤 코드 실행
  setTimeout(function () {
    console.log('배달 끝~!');
    distance = '1km';
    price = 3000;
  }, 3000);
}

function pay(distance, price) {
  console.log(`거리 : ${distance}, 가격: ${price}`);
}

let distance;
let price;
Menu();
PickUp();
pay(distance, price);

PickUp 함수의  setTimeout 함수가 다 끝나지 않은 상태에서 pay함수를 실행하였기에 거리와 가격 값에는 undefined 가 나온다.  

 

콜백 함수  

다른 함수의 실행이 끝난 후에 실행되는 함수를 콜백함수라고 부른다. 독립적으로 수행되는 작업도 있지만, 응답을 받은 이후 처리되어야 하는 종속적인 작업도 있을 수 있다. 그에 대응하는 함수가 콜백함수이다. 

•  parameter == 인자 == 매개변수

 

콜백 함수 사용

일반 함수 파라미터 맨 뒤에 정의한다.

function Menu() {
  console.log('배달의 민족 주문~🛵');
}

function PickUp(callback) {
  //setTimeout 함수로 3초 뒤 코드 실행
  setTimeout(function () {
    console.log('배달 끝~!');
    distance = '1km';
    price = 3000;
    callback(distance, price); //매개변수로 넘긴 콜백함수 실행
  }, 3000);
}

let distance;
let price;
Menu();
PickUp(function (distance, price) {
  console.log(`거리 : ${distance}, 가격: ${price}`);
});

 

콜백 지옥

콜백함수는 들여쓰기가 깊어지면서 가독성 떨어지고, 수정 난이도 높아진다.

See the Pen Untitled by Jung ji young (@stop-zero) on CodePen.

 

Promise

특정 코드가 실행이 완료되기도 전에 다음 코드를 수행하는 자바스크립트의 비동기 처리 특성을 동기 처리하기 위한 객체이다. 

성공과 실패로 나누어 결과를 반환하고, 비동기가 다 완료된 후 다음 작업을 연결시켜 진행할 수 있다 

 

Promise의 상태

pending(대기) : 진행 중 

fulfilled(이행) : 성공 = reslove

Rejected (거부) : 실패 = reject

settled : fulfilled 혹은 rejected 로 결론이 난 상태

 

Promise 사용

promise는 두 가지 콜백 함수를 가진다. 

• resolve() -> then 메서드 실행
• reject() -> catch 메서드 실행

function Menu() {
  console.log('배달의 민족 주문~🛵');
}

function PickUp() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log('배달 끝~!');
      distance = '1km';
      price = 3000;
      resolve();
    }, 3000);
  });
}

let distance;
let price;
Menu();
PickUp().then(function () {
  cons

 

promise 체이닝 사용 안 한 경우

콜백 지옥 속으로...

Promise 체이닝 장점

1. then 메서드 연속 사용 -> 순차적 작업
2. 콜백 지옥 탈출
3. 예외 처리 간편
4. 마지막 catch 구문에서 한 번에 에러 처리 가능

 

비동기 처리 제어

1. 콜백 함수

2. promise

3. async/await

 

async/await

promise 를 좀 더 쉽게 쓰기 위해 생긴 최근 문법이다. 

기다려야하는 코드 앞에 await 를 붙여 사용한다.

//구조
async function 함수명(){
    await  비동기처리_메서드명();
}

• reject는 try {} catch{} 문 사용

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise