뭐든지 할 수 있어

동기/비동기 정리

동기/비동기는 자바스크립트에서 중요한 개념 중 하나이다. 동기는 코드가 순차적으로 실행된다는 것을 의미하며, 비동기는 코드가 순차적으로 실행되지 않는다는 것을 의미한다. 비동기 코드는 예측할 수 없는 순서로 실행되며, 실행이 완료되면 콜백 함수가 호출된다.

동기 코드의 예시는 다음과 같다.

function add(x, y) {
  return x + y;
}

const result = add(1, 2);
console.log(result); // 3

위 코드에서 add 함수는 두 개의 숫자를 더한 값을 반환하는 일반적인 함수이다. 함수가 호출되면 결과가 즉시 반환되며, 결과는 result 변수에 할당된다. 이것은 동기 코드이다.

비동기 코드의 예시는 다음과 같다.

setTimeout(() => {
  console.log('Hello, World!');
}, 1000);

위 코드에서 setTimeout 함수는 일정 시간이 지난 후에 실행될 콜백 함수를 등록하는 함수이다. 이 함수는 1초 후에 'Hello, World!' 문자열을 콘솔에 출력한다. 이것은 비동기 코드이다. setTimeout 함수가 호출되면 결과가 즉시 반환되지 않으며, 1초 후에 콜백 함수가 호출된다.

따라서 자바스크립트에서는 비동기 함수를 항상 콜백 함수와 함께 사용해야 한다. 이를 통해 비동기 코드의 실행 순서를 보장하고, 비동기 함수가 완료된 후에 콜백 함수를 호출할 수 있다.

예시

동기와 비동기를 이해하기 위해 일상 생활에서의 예시를 들어볼 수 있다.

예를 들어, 음식을 주문하는 것을 생각해보자. 동기 방식에서는 주문을 하면 음식이 나올 때까지 대기하며, 결과가 반환될 때까지 다른 일을 할 수 없다. 반면, 비동기 방식에서는 주문을 하고 나면 다른 스케줄을 세우거나, 다른 주문을 하거나, 롤이나 한 판 하는 등 다른 작업을 할 수 있다. 음식이 나오면 알림을 받아서 음식을 수령하고 먹으면 된다.

이와 같이 동기 방식은 결과가 반환될 때까지 대기해야 하며, 다른 작업을 수행할 수 없다. 반면, 비동기 방식은 결과가 반환되기를 기다리지 않고 다른 작업을 수행할 수 있다.

• [ 시나리오 1 ]
• 개발팀장이 3명의 사원에게 동시다발적으로 각각의 업무를 지시한다. ( = 비동기 )
• 놀랍게도 개발팀장은 3명의 사원에게 시킨 일을 확인도 안하고 본인 할 일도 한다 ( = 비동기 )
• 사원마다 맡은 일을 알아서 끝내고 개발팀장에게 보고한다. ( = 논블로킹 )
• [ 시나리오 2 ]
• 개발팀장이 사원1 에게 업무를 지시한다.
• 그리고 사원1 업무가 끝날때까지 언제 끝나냐고 눈초리를 준다. ( = 동기 )
• 사원1 의 업무처리가 너무 느려서 다른 사원에게 일을 주려고한다. ( = 비동기 )
• 그런데 사원1 은 도와달라며 개발팀장의 옷자락을 붙잡는다. ( = 블로킹 )
• 그걸 지켜보는 사원2 와 사원3 은 무슨 일을 주던 열심히 할 생각은 있지만 일이 없다. ( = 동기 )

요약

동기/비동기 프로그래밍은 모든 프로그래밍 언어에서 중요한 개념 중 하나이다. 동기 프로그래밍은 코드가 순차적으로 실행되며, 결과가 즉시 반환된다는 것을 의미한다. 비동기 프로그래밍은 코드가 순차적으로 실행되지 않으며, 결과가 바로 반환되지 않는다는 것을 의미한다.

비동기 함수는 대개 비동기 콜백 함수와 함께 사용되며, 콜백 함수는 비동기 함수가 완료된 후에 호출된다. 이를 통해 프로그램이 예측 가능한 방식으로 실행되는 것을 보장할 수 있다. 예를 들어, 파일을 읽는 비동기 함수는 파일이 성공적으로 읽혔을 때 콜백 함수를 호출하여 결과를 반환한다.

동기 함수와 비동기 함수는 각각의 장단점이 있으며, 상황에 따라 적절한 방식을 선택해야 한다. 일반적으로, 네트워크 요청과 같은 오래 걸리는 작업을 수행할 때는 비동기 함수를 사용하는 것이 좋다. 이를 통해 사용자 인터페이스가 응답성을 유지하면서 백그라운드 작업이 수행될 수 있다.