(JS) 동기와 비동기 (1/3)

---

사전 지식 : 콜백 & 프로미스 & 블로킹 & 논블로킹

콜백(callback)

다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.
코드를 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 나중에 실행할 수도 있다.
이를 실행권을 위임한다라고 말할 수 있다.

살펴보기

프로미스(Promise)

프로미스는 자바스크립트 비동기 처리에 사용되는 객체를 말한다. 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다.
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
살펴보기

블로킹(Blocking)

호출된 함수가 자신의 할 일을 모두 마칠때까지 제어권을 가지는 것을 말한다.

논 블로킹(non-blocking)

호출된 함수가 할 일을 마치지 않더라고, 바로 제어권을 내주어 호출된 함수가 다른일을 진행할 수 있는 것.

---

비동기 쉽게 이해하기

패스트 푸드 점의 주문 체계에 비교하면 동기와 비동기를 명쾌하게 설명할 수 있다.

Sync Ordering System

1. 주문을 하기 위해 계산대에 줄을 선다.
2. 순서를 기다린다.
3. 순서가 되면, 음식을 주문한다.
4. 음식이 나올때까지 줄에서 비키지 않고 계산대에서 대기합니다.
5. 음식이 나오면서 줄에서 나와 자리에 앉아 식사를 합니다.
6. 뒤에 줄 서 있던 고객들 또한 위 순소대로 음식을 주문합니다.

function multiply (a, b) {
  return a * b;
}

function square (n) { // 3) squre 함수를 실행하고, squre 함수는 
  return multiply(n, n);  // 4) mutiply 함수를 실행
}

console.log("Start"); // 1) 제일 먼저 실행 

const result = square(2); // 2) 다음으로 해당 줄이 실행
console.log(result);  // 5) 해당 코드가 실행이 되고, 

console.log("end");  // 6) 앞선 코드 실행문들 모두가 완료된 후 실행

Async Ordering System

1. 주문을 하기 위해 계산대에 줄을 섭니다.
2. 순서를 기다립니다.
3. 순서가 되면, 음식을 주문합니다.
4. ❗️주문 번호를 받고 자리에 앉아 음식이 나오기를 기다립니다
5. 우리 뒤에 줄 서 있던 고객들 또한 순서대로 음식을 주문합니다.
6. 주문한 음식이 완료되어 번호가 호출되면 음식을 가져갑니다.

function multiply (a, b) {
  return a * b;
}

function square (n) {
  return multiply(n, n);
}

console.log("Start"); // 1) 해당 줄이 실행됩니다. 

// setTimeOut은 인자로 주어진 함수를 비동기로 실행합니다.
setTimeout(function doSomething () { // 2) 해당 줄이 실행됩니다. (1초 후에 doSomething 함수 실행예약) 
  // 4) 일 초가 지난 후, doSomething 함수가 실행됩니다. 
  const result = square(2);
  console.log(result); // 5)마지막으로 콘솔에 result(4)가 표시된다. 
}, 1000);

console.log("end"); // 3) setTimeout의 모든 작업이 완료되기를 대기하지 않습니다. setTimeout은 브라우저에게 예약을 한 후, 그 다음 대기 중인 코드가 실행될 수 있도록 자리를 비켜줍니다. 때문에, 해당 줄이 해당 줄이 먼저 실행된다.

비동기의 흐름으로 실행되는 함수 혹은 기능들은 몇몇 정해져 있다.

중요한 부분은 비동기 함수를 사용하지 않는한 작성하는 일반적인 자바스크립트가 갑자기 비동기로 작동되는 경우는 절대 없다.

어떤 함수가 비동기인지, 비동기 함수의 예제를 많이 살펴보는 것이 좋다.

비동기 함수 예제(fetch)

console.log("start"); // 1) 해당 줄이 실행됩니다. 

fetch("https://www.naver.com/") // 2) 해당 줄이 실행됩니다. fetch란, 브라우저에게 요청을 보내달라는 주문을 넣는 함수입니다. fetch는 비동기로 동작하기 때문에, 다음 실행문을 진행합니다. 
  .then((res) => {
    console.log("Response ▶︎▶︎▶︎", res); // 4) 요청이 완료되면 응답이 콘솔에 출력됩니다.
  });
  
console.log("end");  // 3) 해당 줄이 실행됩니다. 

비동기 직렬 진행과 병렬 진행

// 직렬적으로 진행 (첫 번째 비동기 작업이 모두 완료된 후, 다음 비동기 시작)
setTimeout(function foo () {
  console.log("foo complete");

  setTimeout(function bar () {
    console.log("bar complete");
  }, 1000);
}, 1000);

// 병렬 진행 (첫 번째 비동기에 대한 완료를 기다리지 않고 다음 비동기 시작)
setTimeout(function foo () {
  console.log("foo complete");
}, 1000);

setTimeout(function bar () {
  console.log("bar complete");
}, 1000);

---

이어서 2편 보기 : Promise