D-23

🔍 동기와 비동기란?

동기(synchronous)란 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것을 의미한다.

비동기(asynchronous)란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것을 의미한다.

💡 비동기적으로 작동되어야 효율적인 작업들

백그라운드 실행, 로딩 창 등 작업

인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업

큰 용량의 파일을 로딩하는 작업

---

🔍 비동기

자바스크립트에서 비동기의 예시로 타이머와 관련된 API가 있다.
이 API는 비동기로 작동하도록 구성되어있다.

---

📌 타이머 관련 API

setTimeout(callback, millisecond)

일정 시간 후에 함수를 실행한다.

매개변수(parameter) : 실행할 콜백 함수, 콜백 함수 실행 전 기다릴 시간(밀리초)
return 값 : 임의의 타이머 ID

---

clearTimeout(timerId)

setTimeout 타이머를 종료한다.

매개변수(parameter) :타이머 ID
return 값 : 없음

---

setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행한다.

매개변수(parameter) :실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간(밀리초)
return 값 : 임의의 타이머 ID

---

clearInterval(timerId)

setInterval 타이머를 종료

매개변수(parameter) :타이머 ID
return 값 : 없음

---

👨‍🏫 예제

📌 비동기 코드의 작동 순서

비동기 코드는 코드가 작성된 순서대로 (A, B, C) 작동되는 것이 아닌
동작이 완료되는 순서대로 작동하게 된다.
그러므로 코드의 순서를 에측할 수 없다.

이를 해결할 방법으로 Callback 함수를 사용하면 비동기 코드의 순서를 제어할 수 있다.

---

📌 Callback 함수 예제

이처럼 비동기 코드의 순서를 제어할 수 있다.

하지만 코드가 길어진다면?
복잡하고 가독성이 낮아지는 단점이 있다.
이 단점을 Callback Hell이라고 부른다.

📌 Callback Hell 예제

알파벳을 나열하는 코드다. 보기만해도 어지럽다.
이런 Callback Hell 을 방지하기 위해 Promise를 사용할 수 있다.

---