JavaScript - 비동기, Callback

동기와 비동기

동기(Synchronous)란?

자바스크립트의 동기란 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것을 의미한다. 실행이 종료될 때까지 다른 작업을 할 수 없다.

• 특징

1. 순차적(직렬적)으로 작업을 수행한다.
2. 요청 후 응답을 받아야 다음 동작이 이루어진다.
3. 순차적으로 실행되므로 어떤 작업이 수행중이라면 뒤의 작업은 대기한다.
4. blocking(작업 중단)이 발생한다.

• 장점 : 설계가 간단하고 직관적이다.
• 단점 : 특정 작업이 완료될 때까지 아무것도 하지 못하고 대기 해야한다.

비동기(Asynchronous)란?

자바스크립트의 비동기란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것을 의미한다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할 수도 있다.

• 특징

1. 병렬적으로 작업을 수행한다.
2. 현재 작업의 종료 여부와 관계없이 다음 작업을 실행한다.
3. 순서가 보장되지 않는다.
4. blocking이 발생하지 않는다.

• 장점 : 특정 작업이 수행되는 동안 다른 작업을 처리할 수 있어 효율적이다.
• 단점 : 동기 방식보다 복잡하다.

비동기가 필요한 이유?

카페에서 커피를 주문할 때 먼저온 손님들의 커피가 나올 때까지 주문을 할 수 없고 커피가 모두 나오고 나서야 주문을 할 수 있는 동기적인 방식은 효율적이지 못하다.
하지만 비동기 처리의 경우 순서에 관계 없이 언제든 커피를 주문할 수 있고 커피가 완성되는 즉시(진동벨 이용) 제공하므로 보다 효율적이다.

웹으로 예를 들면, 서버로부터 데이터를 받아 화면에 띄워줘야 하는 경우 서버가 언제 요청에 대한 응답을 줄지 모르는 상황에서 무작정 기다리고 있을 수는 없다. 그러므로 특정 코드의 실행이 끝날 때까지 기다리지 않고 나머지 코드를 실행시키는 것이 효율적이다. 수십 수백개의 요청이 동기 처리라면 코드를 실행하고 기다리고, 실행하고 기다리고.. 웹 애플리케이션을 실행하는데 수십 분을 걸릴 것이다.

자바스크립트는 싱글 스레드이기 때문에 하나씩 작업을 수행하는 동기적인 방식이지만 이벤트루프를 통해 비동기 처리가 가능하다.

setTimeout

동기적인 자바스크립트에서 비동기를 경험할 수 있는 메서드이며 브라우저에서 제공하는 Web API이다.

// Synchronous
console.log('1');
console.log('2');
console.log('3');

// 1
// 2
// 3

• 맨 윗줄부터 순서대로 코드 실행

// Asynchronous
console.log('1');
setTimeout(() => {
	console.log('2');
}, 2000)
console.log('3');

// 1
// 3
// 2

• 동작 과정

1. 맨 윗줄부터 순서대로 코드를 실행하므로 '1'이 출력된다.
2. setTimeout을 만나면 브라우저에게 지정된 시간이 지나면 콜백 함수를 실행 해달라고 요청한다.
3. 이후 응답을 기다리지 않고 다음 코드가 실행되며 '3'이 출력된다.
4. 지정된 시간이 지나면 브라우저가 콜백 함수를 실행하고 '2'가 출력된다.

Callback

콜백 함수란?

1. 자바스크립트 비동기 처리 방식에 의해 야기될 수 있는 문제들을 해결하기 위해 어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때 호출하는 함수를 말한다.

2. 이름 그대로 나중에 호출되는 함수이며 함수에 매개변수로 전달되는 함수를 의미한다.

3. setTimeout의 경우 매개변수로 전달된 함수가 콜백 함수이며 바로 실행되지 않고 지정된 시간이 지나면 호출되는 함수이다.

콜백함수 조금 더 쉽게 이해하기

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있습니다.

자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있습니다.

출처 - https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/#%EB%A7%88%EB%AC%B4%EB%A6%AC

Callback Hell

콜백 함수를 통해 비동기 코드의 순서를 제어할 수 있지만 콜백 함수 안에서 다른 콜백 함수를 반복적으로 호출할 경우 Callback Hell이 발생한다.
Callback Hell은 코드가 길어지면서 복잡해지고 가독성이 좋지 않아 로직을 파악하기 어렵다. 또한 에러 발생 시 문제를 찾기 어려워 유지보수에 좋지않다.