[TIL] 코드 스테이츠 블록체인 부트캠프 8기 DAY-8 공부노트(callback, promise, 동기, 비동기)

드림보이즈·2022년 12월 2일

코드 스테이츠 블록체인 부트캠프

오늘의 한 짤 : 우리도 할 수 있다.

오늘의 컨디션 : 7.05 /10

7시간 좀 못 잤음에도 월드컵과 함께 눈을 뜰 수 있었다.
따뜻한 차 마시니 역시 효과는 굉장했다.
금요일이라는 생각에 더 괜찮았다.

무엇을 공부했나? : 동기/비동기, callback, promise, js engine 구조, event loop,

1. 동기(Synchronous) / 비동기(Asynchronous)

동기: A작업이 모두 진행될 때 까지 B작업은 대기
비동기: 요청을 보냈을 때 응답과 상관없이 다음 동작 수행 가능. A작업 시작하면 B작업 시작. A작업은 결과값 나오는대로 출력

-비동기 예시

console.log("1st");
setTimeout(() => {
	console.log("2nd");
    }, 0)
console.log("3rd")

// 1 / null / 3 / 2
// setTimeout은 비동기적 api라 실행하면서 밑으로 내려가고 2는 나오는 대로 출력하니까

node.js : non-blocking + 비동기적 런타임
block : 하나의 작업이 끝날 때 까지 이어지는 작업을 막는
비동기 사용 예시 : 백그라운드 실행, 로딩 / 서버 요청, 응답 기다림 / 파일 로딩
고차함수 : 함수를 인자로(callback), 함수를 리턴(curry function)
비동기 함수 전달 : 콜백 or 이벤트 등록
예시 : DOM Element 이벤트 핸들러(마우스 키보드 / 페이지) / 타이머 api , 애니메이션 / 서버 자원 요청(fetching, ajax)

Callback

const printString = (string, callback) => {
  setTimeout(() => {
    console.log(string);
    callback();
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {});
    });
  });
};

printAll();
// A B C

Promise

pending : 대기 (아무것도 안함)
fulfill : 이행 (연산이 성공적으로 완료)
reject: 거부 (연산 실패함)

예시 1.

const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(string);
      resolve();
    }, Math.floor(Math.random() * 100) + 1);
  });
};

const printAll = () => {
  printString("A")
    .then(() => {
      return printString("B");
    })
    .then(() => {
      return printString("C");
    });
};

printAll();

예시 2. 더 깔끔하게

function eatLunch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("3.eatLunch");
    }, 100);
  });
}
function eatDinner() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("4.goToBed");
    }, 100);
  });
}

eatLunch()
  .then((data) => {
    console.log(data);
    return eatDinner();
  })
  .then((data) => {
    console.log(data);
    return console.log("sleep");
  });

예시 3. 커피 예시로 보는 비동기

// 시작 시간과 현재 시간 비교해 ms 범위 내에서 무한 로프 도는 blocking 함수
function waitSync(ms) {
    var start = Date.now();
    var now = start;
    while(now - start < ms) {
        now = Date.now();
    }

}

function drink(person, coffee) {
    console.log(person + "는" + coffee + "를 마십니다");
}


function orderCoffeeSync(coffee) {
    console.log(coffee + "가 주문되었습니다")
    waitSync(2000);
    return coffee
}

let customers = [
    {name: "joo" , request: "latte"}, {name: "jon", request: "espa"}];

customers.forEach(function(customer) {
    let coffee = orderCoffeeSync(customer.request);
    drink(customer.name, coffee);
});
//latte가 주문되었습니다
//joo는latte를 마십니다
//espa가 주문되었습니다
//jon는espa를 마십니다