[기술질문] 비동기란 무엇인가요?

🤔 비동기? 동기? 코드를 짜면서 작업을 어떻게 처리할 건지 정하는 것은 정말 정말 중요하다!
비동기에 대해서 알아보자! (전에 동기도 살짝 알아보자)

 

 

 

---

🙋🏻‍♀️ 동기란? (나라사랑 동기사랑..)

(비동기를 알아보기 전에 동기를 먼저 간단히 보자면)

* 동기 방식은 직렬적인 특성을 띄웁니다.
* 한 작업이 처리가 완료될 때까지 기다린 후, 다음 작업을 처리하는 방식입니다. 
* 작업은 정해진 순서대로 실행됩니다. 
* EX) 웹 페이지에서 데이터를 서버로부터 불러올 때, 동기적으로 처리할 경우, 사용자는 데이터가 모두 로드될 때까지 기다려야 합니다. 

 

🙋🏻‍♀️ 비동기란? 

* 비동기 방식은 병렬적인 특성을 띄웁니다.
* 특정 작업의 완료 여부와 상관없이 다음 작업으로 넘어갑니다.
* 비동기 작업을 위해 콜백 함수, async/await, Promise 등을 사용할 수 있습니다. 

👀 콜백 함수, Promise, async/await에 대해서 알아보자!

 

 

💨  콜백 함수

👀 콜백 함수란?
* 어떤 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수를 말합니다.
* 콜백 함수는 특정 이벤트가 발생했을 때나 특정 시점에 실행되도록 설정할 수 있습니다.

const exampleFunction = (callback) => {
  setTimeout(() => {
    console.log("나부터 실행!")
    callback()
  }, 1000)
}

const callbackFunction = () => {
  console.log("난 두번째로 실행!")
}

// 함수 호출
exampleFunction(callbackFunction)

💁‍♀️ callbackFunction이 exampleFunction의 인자로 사용된 간단한 예시

➡️ exampleFunction 함수를 호출하면 setTimeout으로 인해 1초 뒤에 "나부터 실행!"이 출력됩니다. 
다음으로 콜백함수로 사용된 callbackFunction의 "난 두 번째로 실행!"이 출력됩니다. 

✅ setTimeout에 의해 지연된 작업을 기다리지 않고, 다음 작업으로 진행합니다. 따라서 exampleFunction 내의 setTimeout 부분은 비동기적으로 처리되고, 주어진 시간이 경과한 후에 콜백 함수가 실행되는 구조입니다. 

❗️하지만 처리 순서를 보장하기 위해 여러 비동기 작업을 중첩하여 사용하면 콜백 지옥이 발생할 수 있습니다. 

 

 

👿 콜백 지옥

const exam1 = (callback) => {
  setTimeout(() => {
    console.log("첫 번째 데이터")
    callback()
  }, 1000)
}

const exam2 = (callback) => {
  setTimeout(() => {
    console.log("두 번째 데이터")
    callback()
  }, 1000)
}

const exam3 = (callback) => {
  setTimeout(() => {
    console.log("세 번째 데이터")
    callback()
  }, 1000)
}

const exam4 = (callback) => {
  setTimeout(() => {
    console.log("네 번째 데이터")
    callback()
  }, 1000)
}

const processData = () => {
  console.log("모든 데이터 처리")
}

// 함수 호출
exam1(() => {
  exam2(() => {
    exam3(() => {
      exam4(processData)
    })
  })
})

🤮 해당 코드는 4개의 비동기 작업을 순차적으로 실행하며, 각 작업은 그 이전 작업의 콜백 내부에서 호출됩니다. 
➡️ output : "첫 번째 데이터" (1초 후, exam1 함수에서 출력) ▶️ "두 번째 데이터" (1초 후, exam2 함수에서 출력) ▶️ 
"세 번째 데이터" (1초 후, exam3 함수에서 출력) ▶️ "네 번째 데이터" (1초 후, exam4 함수에서 출력) ▶️ "모든 데이터 처리" (exam4 함수의 콜백으로서 processData 함수에서 출력)

✅ 각 함수는 setTimeout을 통해 1초 지연 후 메시지를 출력하며, 함수들은 중첩된 콜백 구조로 인해 순차적으로 실행됩니다.
(총 실행 시간은 4초)

❗️ 단점) 가독성을 떨어뜨리며, 유지 보수가 어렵다!

 

 

💨 Promise와 async/await

https://cyjcyj.tistory.com/198

[기술질문] async/await란 무엇인가요?

😄 Promise와 async/await는 지난 시간에 작성한 포스팅이 있으니, 여기서 확인해 보자!