이전 포스팅까지 기본 문법에 대한 이야기를 다루다가 갑자기 어려워진 감이 있으나.. ㅎㅎ
강의가 Node.js로 넘어가는 시점에서 빠르게 포스팅을 해야겠다고 생각했다.
아래 내용은 굉장히 중요한 개념으로 생각되기에 먼저 포스팅을 남긴다.
#1. 동기(sync) vs 비동기(async)
동기적 처리란 (sync)
위 이미지에서 주문을 받고, 커피를 만들어서 전달하면 다음 사람의 주문을 시작하는 경우처럼
특정 작업이 완료될 때까지 다른 작업들은 시작하지 않고 순서를 기다렸다가 처리하는 방식으로 이해하였다.
(Blocking Model : 코드 실행이 끝나기 전에 실행 제어권을 다른 곳에 넘기지 않아 다른 작업을 못하고 대기)
비동기적 처리란 (async)
위 이미지에서는 아래와 같이 주문을 받고 진동벨을 주어서 음료제조가 완료된 순서대로 전달하는 경우처럼
특정 작업이 완료되기 전에 다른 작업을 수행하며 처리하는 방식으로 이해하였다.
(Non-Blocking Model :코드 실행이 끝나기 전에도 실행 제어권을 다른 곳에 넘겨 다음 코드가 실행될 수 있음 (비동기 처리가 가능))
자바스크립트는 Async + Non-Blocking Model을 채용하여 현재 실행중인 코드의 실행이 끝나지 않아도 다음 코드를 호출
결론적으로 자바스크립트는 각 명령들이 순서대로 실행될 수 있게 구현되어 있지만, Non-Blocking Model에 의해 동기적 명령이 아닌 모든 함수는 비동기적으로 실행
만약 동기적(위 코드부터 순서대로 처리되는 상황 / Blocking Model) 이라면?
1번 - “코드가 실행되었습니다”
2번 - 1초 뒤 “setTimeout이 실행되었습니다.”
3번 - “코드가 종료되었습니다.”
모던 자바스크립트 DeepDive책에서 흥미로운 예제가 있었다.
위 예제에서 setTimeout 함수의 인터벌 시간이 0초로 되어 있기에
func1
func2
func3
순으로 찍힐 것이라고 생각했지만 결과는 달랐다.
위와 같은 현상은 setTimeout 메소드가 애초에 비동기 함수이기 때문인데 이해를 돕기 위한 예시도 있어서 참고가 될 것 같다.
위 코드 예제가 콜스택 예제와 함께 보면 약간 헷갈리는 듯 하여 약간 순서를 변경해보았다.
하지만 비동기적 처리를 동기적 즉 순서를 보장하면서 처리해야될 때도 있는데
관련 내용은 다음 포스팅에서 자세하게 다루겠지만 그 예시는 아래와 같다.
어떤 서버에서 특정 데이터를 받아와 가공하여 자바스크립트로 코딩할 때 !
서버에서 데이터를 다 받아오기 전에 자바스크립트가 실행된다면 ?
실제로 팀프로젝트를 하면서 사용했던 코드인데
TMDB라는 영화정보 사이트의 API를 이용해 영화 데이터를 받을 때 async / await를 이용하여 데이터가 다 받아질 때까지 기다리도록 구현하였다.
관련해서는 다음 포스팅에서 자세하게 다룰 수 있도록 하겠다.