[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 4주차 (1): 비동기처리

1. 동기와 비동기

• 동기 (synchronous): 작업을 순차적으로 실행하는 방식. 한 작업이 완료될 때까지 다음 작업은 대기.
• 비동기 (asynchronous): 여러 작업을 동시에 처리 할 수 있다.

2. 서버통신

• 서버와 클라이언트 간의 데이터 교환 과정을 의미한다.
• 데이터를 다 불러오기도 전에 실행될 수 있다.

let data = 서버에서 데이터 불러오는 작업;
console.log(data);

• 기본 구조:
  • 서버: 리소스, 데이터, 또는 서비스를 제공하는 강력한 컴퓨터 시스템.
  • 클라이언트: 서버에 리소스나 서비스를 요청하는 장치 또는 소프트웨어 애플리케이션.
• 통신 과정:
  1. 연결 설정: 클라이언트가 서버에 연결을 요청
  2. 요청: 클라이언트가 서버에 특정 데이터나 서비스를 요청
  3. 처리: 서버가 요청을 처리
  4. 응답: 서버가 처리 결과를 클라이언트에게 전송
  5. 연결 종료: 통신이 완료되면 연결이 종료된다.
• setTimeout()

      // 콜백지옥
      setTimeout(() => {
        document.body.style.background = "red";
        setTimeout(() => {
          document.body.style.background = "orange";
          setTimeout(() => {
            document.body.style.background = "yellow";

            setTimeout(() => {
              document.body.style.background = "green";
              setTimeout(() => {
                document.body.style.background = "blue";
              }, 1000);
            }, 1000);
          }, 1000);
        }, 1000);
      }, 1000);

 

 

비동기 코드를 처리하기 위한 3가지 방법: callback 함수, promise, async await

3. Callback 함수

• 다른 함수에 인자로 전달되어 나중에 실행되는 함수.

function goMart() {
  console.log("마트에 갑니다.");
}

// 콜백함수를 이용해서 pickDrink 작업이 끝난 후 pay가 실행 되도록
function pickDrink(callback) {
  // 3초동안 고민하는 함수
  setTimeout(function () {
    console.log("고민 끝!");
    product = "콜라";
    price = "1500";
    // 9번 ~ 11번 라인 실행 후 callback 호출
    callback(); // 매개변수로 받고 있는 콜백함수
  }, 3000);
}

function pay() {
  console.log(`상품 ${product}에 대한 가격 ${price}지불`);
}

let price, product;
goMart();
pickDrink(pay); // pickDrink 이후에 pay함수가 실행되도록 콜백으로 넘겨 줌
// pay();

/**
마트에 갑니다.
고민 끝!
상품 콜라에 대한 가격 1500지불
 */

 

4. Promise

• 비동기 작업의 최종 완료 또는 실패를 나타내는 객체.
• 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐.
• promise의 상태
  1. pending (대기): promise를 수행 중인 상태
  2. fulfilled (이행): promise가 resolve가 된 상태 (성공)
  3. rejected (거부): promise가 지켜지지 못한 상태. (실패)
  4. settled: fulfilled 혹은 rejected로 결론이 난 상태
• 🍔 햄버거 주문에 비유:
  1. 주문 (Promise 생성)
  2. 대기 중 (Pending 상태)
  3. 햄버거 완성 (Fulfilled 상태) 또는 재료 소진 (Rejected 상태)

function goMart() {
  console.log("마트에 갑니다.");
}

function pickDrink() {
  return new Promise(function (resolve, reject) {
    // 3초동안 고민하는 함수
    setTimeout(function () {
      console.log("고민 끝!");
      product = "콜라";
      price = "1500";
      //   resolve("구매 완료"); // then의 콜백의 인자로 전달
      reject("구매 실패");
    }, 3000);
  });
}

function pay() {
  console.log(`상품 ${product}에 대한 가격 ${price}원 지불`);
}

// 실행함수
function exec() {
  goMart();
  pickDrink()
    .then((result) => {
      // pickDrink가 끝나고 나서 실행되는 작업
      pay();
      console.log("result?", result);
      // result는 resolve로 전달된 값
    })
    .catch((err) => {
      console.log("err?", err);
      // reject로 전달된 값
    })
    .finally(() => {
      console.log("집으로 돌아갑니다."); // finally: promise의 성공 여부와 상관없이 무조건적으로 실행
    });
}
let price, product;
exec();

 

5. async / await

• promise를 더 쉽게 사용할 수 있게 해주는 문법. 
  • promise 기반 코드를 좀 더 읽고 쓰기 쉽게 하기 위해 등장
• async는 함수 앞에 붙어 promise를 반환한다.

function callPromise(name) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
    //console.log(name);
      resolve(name); // cb 대신 resolve로 값 넘기기
    }, 1000);
  });
}

function backPromise() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      //console.log("back");
      resolve("back");
    }, 1000);
  });
}

function hellPromise() {
  // reject생략 가능
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve("callback hell");
    }, 1000);
  });
}

async function execute() {
  const name = await callPromise("harry");
  console.log(name + "반가워");
  const back = await backPromise();
  console.log(back + "을 실행했구나");
  const hell = await hellPromise();
  console.log("여기는 " + hell);
}

execute();

 

어렵다. 비동기 작업은 이해하였지만 async/await와 promise를 이해하는데 시간이 좀 걸릴 것 같다...!