🧐 Blocking vs Non-Blocking과 Synchronous vs Asynchronous

들어가기에 앞서... 블로킹과 논블로킹은 와닿게 이해가 가는데 동기와 비동기는 이해가 가지 않아서 정확하지 않은 정보들이 들어가 있을 수도 있습니다.

블로킹과 논블로킹 & 동기와 비동기는 완전히 별개의 개념이다. ( 유사한 의미를 가진 개념인거지 서로 연관관계는 전혀 없다. )
그냥 "블로킹 + 동기" 또는 "논블로킹 + 비동기"를 같이 사용하기 때문에 같은 의미를 가진다 or 연관관계가 있다고 착각하는 것뿐이다.

🤜🤛 Blocking vs Non-Blocking

블로킹은 호출된 함수가 자신이 끝날 때까지 제어권을 갖는 것을 의미
논블로킹은 제어권은 본인이 가지고 실행은 알아서 실행하도록 하는 것을 의미

function outer() {
  inner1();
  inner2();
  inner3();
  
  /**
   * 만약 블로킹일 경우에 inner1()을 실행하는 코드를 만날 경우 제어권을 inner1()으로 넘겨준다.
   * 또한 inner1()이 끝날 때까지 제어권을 얻지 못해서 다음 코드로 넘어갈 수 없다. ( 즉, inner2()를 실행할 수 없다. )
   */
   
  /**
   * 만약 논블로킹일 경우에 제어권은 outer()가 계속 갖고 inner1(), inner2(), inner3()의 실행 결과에 관여하지 않고 계속 다음 코드를 실행한다.
   */
}

const inner1 = () => console.log("inner1()");
const inner2 = () => console.log("inner2()");
const inner3 = () => console.log("inner3()");

outer();

🤝 Synchronous vs Asynchronous

동기는 요청과 요청에 대한 응답을 기다리는 것을 의미
논블로킹은 요청은 하되 응답을 기다리지 않는 것을 의미

동기는 작업 완료 여부를 신경 쓴다. ( 신경 쓴다 => 기다 린다 or 확인한다 )
비동기는 작업 완료 여부를 신경 쓰지 않는다. ( callback()으로 처리한다. )

const fs = require('fs');

// 비동기 "fs.readFile()"의 요청에 대한 응답을 기다리지 않고 다음 코드를 실행한다.
const result1 = fs.readFile("경로");
console.log("다음 실행");

// 동기 "fs.readFileSync()"의 요청에 대한 응답을 기다렸다가 다음 코드를 실행한다.
const result2 = fs.readFileSync("경로");
console.log("다음 실행");

// 비동기는 어떤 실행에 대한 응답을 기다리지 않으므로 대부분 callback함수를 이용한다.
const callback = () => console.log("콜백 함수 실행");
setTimeout(callback, 1000);

😒 Blocking + Synchronous

함수 처리를 시작하면 함수에게 제어권을 넘겨주고 응답을 기다린다.

가장 직관적으로 이해하기 쉽지만 실행하는 함수가 끝날 때까지 다른 행위를 하지 못하는 단점이 있다.

const callback = (v) => console.log(v);

// 아래 처럼 코드를 실행하면 동기처럼 보이도록 코드를 실행할 수 있다.
// 또한 실행 순서를 보장할 수 있다.
(async () => {
  // "fetch(1)" => "fetch(2)" => "fetch(3)" 순서로 먼저 실행 후 다음 코드 실행
  // 즉, 순차적으로 실행된다.
  // 하지만 단점으로는 동시에 처리할 수 있는 ajax 요청임에도 불구하고 하나의 응답이 올 때까지 기다려야 하는 시간적인 손해가 발생한다. ( 속도가 느려짐 )
  await fetch("https://jsonplaceholder.typicode.com/posts/1").then(result => result.json()).then(callback);
  await fetch("https://jsonplaceholder.typicode.com/posts/2").then(result => result.json()).then(callback);
  await fetch("https://jsonplaceholder.typicode.com/posts/3").then(result => result.json()).then(callback);

  console.log("다른 처리 1");
  console.log("다른 처리 2");
  console.log("다른 처리 3");
})();
// 결과 => fetch()의 결괏값 3개, 다른 처리 1, 다른 처리 2, 다른 처리 3

😮 Non-Blocking + Asynchronous

함수 처리를 시작하면 처리하라는 요청만 하고 다음 실행으로 넘어간다. 또한 응답은 콜백 함수를 이용해서 처리한다.

const callback = (v) => console.log(v);

// 각 "fetch()"에 대한 응답을 기다리지 않고 다음 코드를 실행한다.
fetch("https://jsonplaceholder.typicode.com/posts/1").then(result => result.json()).then(callback);
fetch("https://jsonplaceholder.typicode.com/posts/2").then(result => result.json()).then(callback);
fetch("https://jsonplaceholder.typicode.com/posts/3").then(result => result.json()).then(callback);

console.log("다른 처리 1");
console.log("다른 처리 2");
console.log("다른 처리 3");
// 결과 => 다른 처리 1, 다른 처리 2, 다른 처리 3, fetch()의 결괏값 3개
// 단, fetch()의 결괏값은 순서를 보장하지 않는다. ( 1, 2, 3 순서로 코드를 실행해도 1, 2, 3 순서로 응답하지 않는다. )

👇 참고한 포스트

• https://private.tistory.com/24
• https://evan-moon.github.io/2019/09/19/sync-async-blocking-non-blocking/
• https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-%EB%8F%99%EA%B8%B0%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B8%94%EB%A1%9C%ED%82%B9%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC#%EB%8F%99%EA%B8%B0&%EB%B9%84%EB%8F%99%EA%B8%B0_vs_%EB%B8%94%EB%A1%9C%ED%82%B9&%EB%85%BC%EB%B8%94%EB%A1%9D%ED%82%B9_%EA%B0%9C%EB%85%90_%EC%B0%A8%EC%9D%B4