비동기처리란?

동기는 순차적으로 일을끝내는 방식이다.

비동기는 엄청 효율적으로 작동을 한다. 비동기는 쓰레드나 프로세스가 여럿이 돌고 있는거라는 뜻이다. 즉 멀티테스킹을 하는 코드를 짜는것이다.

 

 

궁금증: 자바스크립트는 쓰레드가 하나만 돌아간다고 배웠는데 어떻게 그런 비동기 작업이 되는것인가?

자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행된다.

이 엔진에는 자바스크립트를 돌리는 하나의 쓰레드, 자바스크립트 함수 전용 특급 선로가 있다.

 

궁금증: 선로라면 먼저 들어간 게 먼저나오는 큐 형태인데, 함수는 나중에 넣은걸 먼저 꺼내는 스택으로 처리되는거 아닌가?

다른 포함 레벨의 함수들이 처리되는 순서는 역순이다. 하지만 같은 포함 레벨에서의 함수들은 순서대로 처리된다. 그래서 이해하기 쉽도록 같은 레벨에서의 함수들을 한 선로 위의 열차로 비유하겠다.

자바스크립트가 도는 환경에서는 이 엔진 뿐만이 아니라 web API라는것이 함께 동작한다. 여기서는 타이머를 사용하는 작업을 하거나 AJAX로 http 요청을 보내거나 파일에서 데이터를 읽어오는 등 시간을 소요하는 작업들을 수행한다.

이 중 하나에 해당하는 태스크가 선로 진입부로 들어오면 컴퓨터는 이 열차를 자바스크립트용 특급 선로가 아닌 브라우저나 Node.js에서 운영하는 비동기 작업용 선로에 올려놓는다. 이 선로는 한번에 여럿이 만들어 질 수 있다. 

이 열차들은 보통 '콜백' 열차칸을 뒤에 달고 있다. 시간이 걸리는 이동을 다 마친 열차들은 비동기 처리 톨게이트에 도착한 순서대로 Task Queue라는 하나의 선로에 콜백 칸을 올려보낸다. 이 콜백 칸들은 태스크 큐 선로를 따라 자바스크립트 특급 선로로 들어오게 된다. 이곳에서 물래방아처럼 계속 돌아가는 한 장치가 비동기 작업이나, 클릭 등의 사용자 입력으로부터 태스크 큐를 타고 들어오는 콜백 칸들을 기다리고 있다. 콜백 칸들이 도착하는대로 특급 선로에 올려서 이 콜백 함수들이 자바스크립트에서 실행되도록 하는 이 장치를 '이벤트 루프'라고 한다. 

 

 

즉, 시간이 걸리는 작업들을 분리된 선로에서 처리하면 특급 선로가 담당하는 브라우저 화면이 얼거나 버벅거리는 일을 방지할 수 있구나!

 

궁금증: 그런데 코드는 순서도 뒤섞이고 함수가 다른 함수 안에 들어있고 하는 모습이라 보기가 좀 머리아프다.

그렇다. 실전에서 비동기로 해결해야 하는 문제들은 훨씬 복잡할때가 많다. 특히 이것을 콜백지옥이라고 부르는데, 가독성도 떨어지고 실수 위험도 커지고 디버깅 작업은 그야말로 지옥이 되어버린다. 이러한 문제를 해결하기 위해, 자바스크립트는 ES6버전부터 Promise라는 걸 도입했다. 

Promise는 비동기 작업을 수행하는 함수가 프로미스의 객체를 반환하는데, 그 생성자에 인자로 들어가는 함수에 첫번째 인자로는 수행할 비동기 작업, 두번째 인자로는 그 결과물을 콜백함수에 전달하는 함수가 들어간다. 

먼저 학생 정보를 조회하는 함수를 사용한다. Promise를 반환하는 함수는, 그 결과물에 then이라는 함수로 다음작업을 알려주기 위한 콜백을 넣어 줄 수 있다. 받아온 정보들로 고교 DB 주소를 조회하도록 하고, then 그 주소로부터 수강 수업들을 받아오고, 또 then, 그 수업들 중 고3 수업의 수업코드로 수업정보를 받아와서 마지막으로 then, 해당수업의 교사명을 출력하는 것이다. 이렇게 then 함수로 꼬리에 꼬리를 잇는 체이닝 방식으로 비동기 작업들을 순차적으로 처리할 수 있게 된다. 단, promise는 polyfill 등의 라이브러리 없이는 익스플로러에서는 동작하지 않으니 주의해야한다.

cf. 수행할것은 비동기 작업으로, return으로 반환하는것은 콜백함수로 전달!

 

 

궁금증 : 좀 더 쉬운방법은 없을까? Promise는 아직도 장황하고 복잡해보인다.

고맙게도 자바스크립트 ES7에는 Async/Await 이란 기능이 추가되었다. 프로미스로 작성한 코드들을 한층 간결하고 직관적이게 실행할 수 있게 됬다. C#이나 Dart같은 다른 언어들에서도 사용이 되니까 자바스크립트 개발자가 아니더라도 알아두면 유용하다. 

 

 

 

궁금증 : callback이란?

즉 비동기로 주어진 일을 다 마친 다음에는 이 함수를 실행하도록, 추후 업무를 맡겨놓는것이다. 이것을 callback 함수라고 한다.