비동기, 동기라는 단어 들어보신 적 있으신가요??
처음 프로그래밍 시작할 때 굉장히 어렵게만 느껴졌는데요..
이번에 부트 캠프에서 비동기에 대해 배우고 나서 비동기의 개념에 대해 잊지 않기 위하여 기록하는 겸 제가 이해한 부분을 이 포스트를 보시는 분들께 알려줌으로써 도움을 주고자 합니다.
먼저 비동기에 대해 알기 전에 자바스크립트 엔진의 특징을 알아야 비동기에 대해 이해가 가능하기 때문에, 아래 자바스크립트 엔진에 대하여 설명 먼저 하겠습니다.
자바스크립트 엔진의 특징
자바스크립트 엔진은 다른 멀티 스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리합니다.먼저 자바스크립트 엔진은 하나의 메인 스레드로 구성되어 있고, 인터프리터 언어로 코드를 한 줄 한 줄씩 해석하며 실행을 합니다. 따라서 현재 실행 중인 코드가 종료될 때까지 다음줄에 있는 코드를 실행하지 않으며 이를 동기적 제어 흐름이라고 합니다. 분기분, 반복문, 함수 호출 등이 동기적으로 실행됩니다. 이러한 특성 때문에 하나의 코드에 문제가 생기면 다른 코드를 실행할 수가 없기 때문에 프로그램을 멈추게 합니다. 이러한 특성으로 인하여 비동기 처리를 진행해야 됩니다.
비동기
그렇다면 비동기는 어떤 의미일까요?? 이러한 자바스크립트 엔진의 특징으로 인하여 속도가 오래 걸릴 것 같은 작업을 "job queue" (사진에서는 microtask Queue입니다.)에 넘겨놨다가 이벤트 루프는 콜백 큐와 콜 스택을 보며 콜 스택이 비면 콜백 큐의 함수를 꺼내 콜 스택에 넣습니다. 따라서 비동기 작업으로 빼놓으면 다른 코드를 먼저 실행하고 그다음에 코드가 실행됩니다.
아래는 비동기 작업의 실행 원리입니다.
출처:https://velog.io/@minyoung22222/%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90%EB%A7%A4%ED%81%AC%EB%A1%9C%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90-VS-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90
하지만 자바스크립트 엔진은 비동기 처리를 제공하지 않습니다. 대신 비동기 코드는 정해진 함수를 제공하여 활용할수 있습니다. 이함수들을 API(Application Programming Interface)라고 합니다. 비동기 api의 예시로 settimeOut, XmlHttpRequest,fetch등 webapi가 있습니다.
다음장에서는 비동기 api의 종류와 사용방법에 대하여 포스트 하겠습니다.
지금까지 읽어주셔서 감사합니다.
