동기와 비동기

동기와 비동기는 무엇인가.

프론트엔드에서 비동기 작업 어쩌구.. 많이 듣고 사용하는데 동기와 비동기의 개념이 확실히 다져져 있지 않았다. 확실히 짚고 넘어가야하는 동기와 비동기의 개념

비동기 작업

애플리케이션이 동시에 여러 작업을 처리하거나, 작업의 완료를 기다리지 않고 다른 작업을 수행할 수 있는 프로그래밍 개념. 다른 작업을 수행하면서 비동기 작업이 백그라운드에서 동시에 실행된다.
시간이 오래걸리는 작업이 있어도 더욱 반응적이고 효율적으로 동작.

네트워크 요청 - 서버와의 데이터 통신, 데이터를 요청하고 응답을 기다리는 동안 애플리케이션이 다른 작업을 수행할 수 있다.

파일의 입출력 = 파일을 읽거나 쓰는 작업은 시간이 걸릴 수 있으므로, 비동기 방식으로 처리하여 다른 작업을 동시에 수행

타이머 / 이벤트 처리 - 특정 시간 간격으로 작업을 수행하거나 사용자 입력등의 이벤트를 비동기적으로 처리할 수 있다. setTimeout 같은 거..

console.log("Before delayed work");

setTimeout(() => {
  console.log("Delayed work");
}, 2000); // 2초 후에 실행되는 지연된 작업

console.log("After delayed work");

setTimeout 함수는 2초 후에 콜백 함수를 실행한다.
Before delayed work와After delayed work 사이에 Delayed work가 옴
"Before delayed work"와 "After delayed work"가 setTimeout 함수 이후에 즉시 실행되지만, setTimeout 내부의 콜백 함수는 2초 후에 실행

비동기 작업에서는 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행하기 위해 콜백함수, 프로미스, async / await을 사용하는데 이를 통해 작업이 완료되면 결과를 처리하거나 다음 작업을 계속 할 수 있게 한다.

동기

동기적인 작업은 순서대로 진행되며 한 작업이 완료될 때 까지 다음 작업이 실행되지 않는다.
이전 작업이 완료되기를 기다렸다가 다음 작업을 실행.
코드의 흐름이 순차적으로 진행되기 때문에 작업이 순서대로 실행되어 결과 예측이 쉽다.
하지만 한 작업이 오래 걸리면 다음 작업은 대기해야하므로 오래 걸리는 작업이 있으면 응답성이 떨어짐.