본 게시물은 동기와 비동기에 대해 알아본 내용을 공유합니다.
동기
동기란 한 작업이 실행되는 동안 응답을 받을 때까지 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 의미합니다.
예를 들어 롯데리아에 주문하러 갔을 때 앞 사람이 주문이 끝날 때까지 키오스크 줄 뒤에 서서 기다렸다 결제하는 것과 비슷합니다.
저희 동네에는 롯데리아 키오스크가 하나뿐이라 완전 동기적입니다 ..
function adjective(){
console.log("good");
}
console.log("Hi");
adjective();
console.log("morning");
위와 같은 코드는 "Hi good morning"으로 출력됩니다.
한마디로 동기는 하나의 작업이 끝날 때까지 다음 작업을 처리하지 못하며 실행 순서를 지켜 출력하는 방식을 말합니다.
JavaScript
JavaScript는 동기식 언어입니다.
JavaScript가 비동기식 언어라고 오해할 수 있는데 그럴만한 이유는 JavaScript를 비동기식으로 동작하도록 조작할 수 있기 때문입니다.
그렇다면 비동기에 관해 알아보도록 하겠습니다.
비동기
비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리지 않고 응답과 관계없이 바로 다음 동작을 실행하는 방식을 의미합니다.
예를 들어 식당의 웨이팅이 전화번호를 입력해 입장 순서가 다가오면 문자를 받는 시스템일 경우 입장 문자가 오기 전까지 다른 곳을 구경할 수 있습니다.
식당의 웨이팅이라는 일이 끝날 때까지 기다리지 않고 다른 곳을 구경한다는 동작을 실행하기 때문에 이와 같은 것을 비동기라고 할 수 있습니다.
그렇기에 Blocking(작업 중단)이 일어나는 동기와 다르게 비동기는 Blocking이 발생하지 않습니다.
console.log("How");
setTimeout(() => {
console.log("you?");
}, 1000);
console.log("are");
그렇다면 위와 같은 코드는 어떻게 출력이 될까요?
"How you? are"로 출력 되겠다는 생각이 들지만 이 코드는 How are you?로 출력됩니다.
이유는 setTimeout은 비동기 작업을 수행하기 때문입니다.
언제 비동기를 사용할까?
위에서 말씀드린 것과 같이 비동기는 응답이 오기까지 시간이 걸리더라도 답을 기다리지 않고 여러 개의 일을 수행할 수 있습니다.
일의 효율성을 높여주기 때문에 많은 데이터를 전송해야 하는 환경에서는 비동기적인 방식을 택해 사용되고 있습니다.
비동기 구현 방법
JavaScript는 동기적 언어라고 하였는데 그렇다면 비동기는 어떻게 구현할 수 있을까?
JavaScript 엔진만으로는 비동기적으로 구현할 수 없어 브라우저에서 제공하는 Web API를 사용하여 비동기를 구현할 수 있습니다.
이때 사용하는 것으로 Callback, Promise, Async await 등이 있는데 이에 관한 내용은 다음 게시글에서 소개할 예정입니다.
마무리
순서가 보장되는 동기와 순서가 효율적으로 실행되는 비동기에 대해 알아봤습니다.
설명하는 과정에서 혹시나 잘못된 부분이 있을 시 피드백 부탁드립니다.
글 읽어주셔서 감사합니다 🙂
