TIL : 동기(Synchronous)와 비동기(Asynchronous) 그리고 콜백(callback)

오늘을 동기와 비동기에 대해서 기록해보자!

동기와 비동기에 대해서 설명할 때 가장좋은 예시가 바로 "커피숍"이다. 커피숍에서 줄을 서고 있는 상황을 생각해봅시다(심지어 직원도 1명). 맨 앞에 있는 손님이 커피를 주문하고, 그 커피를 받을 때 까지 계속기다려야 한다면? 즉, "커피를 주문하기 위해서는 한줄로 서서 한명씩만 주문이 가능하다는 것"입니다. 이러한 처리 순서를 동기 방식이라고 부릅니다. 이 때 blocking이라고 부릅니다. 동기적인 작업에 의해서 이후의 작업이 "막히게 된 것"입니다. 하지만 반대로 옆에 있는 커피숍은 주문을 받고 진동벨을 고객에게 전달하는 시스템을 가지고 있습니다. 심지어 직원도 2명이어서 한명은 주문을 받고 한명은 커피를 내리면서 진동벨로 손님에게 알려주고 있습니다. 각자의 파트별로 맡아서 일을 하고 있는 것입니다.  이 카페가 바로 비동기적인 방식, 병렬적으로 자신의 역할을 수행했다고 말할 수 있습니다. 결과가 주어지는데 시간이 걸려도, 막히지 않고(non-blocking) 다른 작업을 할 수 있기 떄문에 효율적으로 사용할 수 있다.

 

---

✅ 1. 동기(Synchronous)

동기적인 수행이라는 것은 쉽게 말해서 일처리 방식이 순차적으로 실행된다는 의미입니다. 그래서 앞에 있던 일이 다 끝나지 않으면 뒤에 일을 할 수 없게 됩니다. 

function showOne() {
  console.log('One!');
  showTwo();
}

function showTwo() {
  console.log('Two!')
  showThree();
}

function showThree() {
  console.log('Three!')
}

showOne();
// -------------------------
// One!
// Two!
// Three!

---

✅ 2. 비동기(Synchronous)

비동기적인 수행은 위해서도 말했지만, 동기적 수행과는 다르게 각각의 수행을 병렬적으로 하는 것에 의미가 있다. 예를들어서 '네이버'를 열었다고 생각해보자. 네이버의 서버에서 데이터를 받아와서 검색창, 실시간 검색창, 로그인, 뉴스, 날씨, 웹툰 등등 랜더링을 해야한다. 만약 이 과정이 동기적으로 되어있다면, 맨 위에 배너를 받아와야, 검색창을 받고, 검색창을 받아와야, 로그인 창이 뜨고............. 그중에 하나라도 오류가 난다면... 데이터 불러오는 것에 실패한다면....🤯 난 그저 웹툰을 원하는 것 뿐인데 웹툰 탭 기다리는데 한세월....

하지만 이 과정을 비동기적으로 수행한다면, 계속해서 다음 데이터를 받아오기 전에 순차적으로 기다릴 필요 없이, 대기할 필요없이 각 파트별로 데이터를 받아와서 보여주게 되서 내가 원하는 탭을 쉽게 받아와서 클릭할 수 있게 된다.

function showOne() {
  console.log('One!');
  showTwo();
}

function showTwo() {
  setTimeout(() => {
    console.log('Two!')
  }, 3000)
  showThree();
}

function showThree() {
  console.log('Three!')
}

showOne();
// -------------------------
// One!
// Three!
// <-3초뒤->
// Two!

대표적인 함수는 setTimeout함수가 있다. 이부분은 이벤트 루프에 대한 유튜브 영상을 보면 훨씬 좋다!
www.youtube.com/watch?v=8aGhZQkoFbQ&t=441s

한글 자막 됩니다!

---

✅ 3. 콜백(Callback)

콜백은 함수의 매개변수로 전달되는 함수를 말한다. 이 콜백함수는 함수를 전달받은 함수 안에서 다시 호출되어진다. 콜백은 자바스크립트에서 비동기적으로 수행하기 위해 사용되는 가장 일반적인 기법이자, 비동기적 패턴이다. 

다시 말해서 콜백함수를 이용하게 되면, 처리가 끝날 때까지 기다리는 것이 아니라, 처리가 끝나는 시점에서, 즉 데이터가 준비가 되었을 때 그결과물로 함수를 통해 사용하게 된다. 

function add(a, b, callback) {
  let result = a + b;
  callback(result)
}

function showResult(num) {
  console.log(`${num}`)
}

add(2, 5, showResult); // 7

하지만 이 콜백에도 단점이 있다. 바로 가독성이 떨어진다는 것이다. 흔히 콜백 지옥이라고 말한다. 비동기 처리를 위해서 계속해서 콜백으로 코드를 작성하다 보면 다음 사진과 같이 된다.

그래서 이와 같은 콜백지옥에 빠지지 않기 위해서 Promise와 async / await가 등장하게 된다.

다음은 promise와 async / awiat를 기록해보자!