제가 생각하고 사용하는 동기와 비동기를 다룹니다. 제가 잘못 알고 있는 내용이 있거나 말씀해주실 부분이 있다면 댓글 한 번 적어주시면 정말 감사하겠습니다.
동기
동기는 요청후에 응답을 기다렸다가 다음이 실행되는 것이다.
동기의 핵심은 기다림이다. 어떤 작업이 수행중이라면 기다린다.
프로그램이 동기로만 이루어진다면 쓰레드 하나로도 작업을 할 수 있겠지만 문제는 응답이 오래 걸리는 작업들을 무작정 기다린다면 비효율적일 것이다.
비동기
비동기는 요청후의 응답을 기다리지 않고 다음이 실행되는 것이다.
비동기의 핵심은 건너뜀이다. 어떤 작업의 응답을 건너뛴다.
만약 비동기가 없다면 응답의 양이 많고 시간이 오래걸리는 코드가 많아진다면 모든 실행이 느려질 것이다.
비동기가 있음으로 효율적인 프로그래밍이 가능해진다.
자바스크립트에서 제일 많이 사용하는 비동기로 동작하는 코드는 setTimeout(타이머)과 ajax 요청(서버로 요청)들이 있다.
자바스크립트는 싱글 쓰레드 아닌가요?
맞다. 자바스크립트는 동기적으로 작동하는 엔진을 가진 싱글 쓰레드 언어이다.
하지만 자바스크립트가 돌아가는 환경인 브라우저나 nodeJs에서는 자바스크립트의 비동기를 처리할 환경을 제공한다.
브라우저에서는 Web API를 제공한다.
Web API는 많은 것을 담당하는데 비동기적으로 작업하는 부분을 이벤트 루프로 옮긴 후에 처리가 끝나면 다시 동기적으로 작동하는 자바스크립트 엔진으로 옮겨준다.
아래 그림을 살펴보면 이해가 쉬울 것 같다.
그렇다면 webAPI에서 비동기를 동작시키는 코드는 어떤 방식일까?
function consoleLogWithDelay(callback, sec){
setTimeout(callback, sec*1000)
}
consoleLogWithDelay(()=>console.log("async callback"), 1)이런식으로 setTimeOut안에 콜백함수와 지연될 시간을 넣어주는 방법이 있다.
webAPI는 콜백함수 콜백함수를 백그라운드로 끌고가 이벤트 루프에 넣어주는 방식으로 비동기를 처리한다.
콜백함수란?
매개변수가 함수인 함수를 말한다.
function callback(callback){
console.log('HI');
callback();
}
Callback(function(){
console.log('콜백 받는곳');
})하지만 콜백함수는 실행순서가 직관적이지 않기 때문에 가독성이 안좋고 한번 시작하게 되면 많이 늘어날 가능성이 있다.
이를 해결하는 방식으로 JS는 Promise와 async, await을 제공하는데 이를 다음 포스트로 올려보겠다.
댓글