코드스피츠 스터디 3회차

응애 나 프론트애긔👶·2023년 1월 9일

코드스피츠

blocking & non-blocking

농구나 배구를 접해본 사람이라면 블로킹이라는 단어를 알 것이다.

스포츠에서의 블로킹의 뜻은 막아내다라는 뜻인데
프로그래밍에서도 이와 비슷한 뜻으로 해석된다.

blocking

블로킹이란 작업을 진행 중 다른 작업이 시작되면 제어권이 넘어가 해당 작업이 끝날 때까지 기다렸다가 다시 자신의 작업을 한다.

자바스크립트의 블로킹 중 가장 좋은 예시는 prompt이다.

const firstFunc = () => {
  const name = "James";
  console.log(name);
  console.log(promptFunc());
  console.log("모든 로직이 끝났당 !");
};

const promptFunc = () => {
  let number = prompt("몇살이신가요 ?");
  return number;
};

firstFunc();

// James
// 11
// 모든 로직이 끝났당 !

firstFunc 함수에서 코드가 실행이 되고 promptFunc 함수로 제어권이 넘어가고 prompt에 값을 주어지지 않을 경우 firstFunc 함수에 제어권이 가지 않게 된다.

이렇게 기존 작업의 제어권이 다른 작업으로 넘어가고 기존 작업이 실행을 할 수 없을 때를 블로킹이라고 한다.

non-blocking

논 블로킹은 말 그래도 제어권이 넘어가더라도 다시 바로 제어권을 받아 본인의 작업을 이어가는 것이다.

const firstFunc = () => {
  const name = "James";
  console.log(name);
  setTimeout(secondFunc, 1);
  console.log("모든 로직이 끝났당 !");
};

const secondFunc = () => {
  for (let i = 0; i < 3; i++) console.log(i);
};

firstFunc();

// James
// 모든 로직이 끝났당 !
// 0
// 1
// 2

위의 코드를 살펴보자면 firstFunc 함수가 secondFunc에서 i값을 요청했지만 setTimeout함수를 사용해 1초 뒤에 주겠다는 말과 함께 다시 제어권을 firstFunc 함수에게 전달한다.

sync & async

예전 곰플레이어나 유튜브 같은 동영상 시청을 할 때 음성과 영상의 싱크가 안맞는다라는 표현을 들어본 적 있을 것이다.

프로그래밍에서도 이와 비슷한 뜻으로 사용된다.

sync

동기는 호출하는 A 함수가 호출되는 B 함수 작업 완료 후 리턴 값을 기다리며 작업 완료의 여부를 계속 확인한다.

const test = () => {
  console.log("test 실행 !");
  console.log(test2(2, 2));
  console.log("test 끝 !");
};

const test2 = (a, b) => {
  return a + b;
};

test();
// test 실행 !
// 4
// test 끝 !

test2 함수의 리턴 값인 a + b를 기다리다가 숫자 4를 출력하고 다음 코드를 실행하게 된다.

async

비동기는 동기와 다르게 함수의 호출을 기다리지 않고 callback 함수에서 결과를 처리한다.

const test = () => {
  console.log("test 실행 !");
  console.log(test2(2, 2));
  console.log("test 끝 !");
};

const test2 = (a, b) => {
  setTimeout(() => {
    a + b;
  }, 100);
};

test();
// test 실행 !
// undefined
// test 끝 !