Javascript 비동기 프로그래밍에 관하여

deeno_0yong·2022년 5월 30일
0

JavaScript에 관하여

목록 보기
4/4
post-thumbnail

Javascript는 비동기 언어가 아니다?

Javascript를 막 시작한 입문자들이 가장 크게 오해하는 것중 하나가 Javascript는 비동기언어라고 인지하는 것인데.. 근데 솔직히 오해할 만하다. 아니 찾아보면 자꾸 비동기 얘기가 나오니까 막 입문자면 오해 할 수 있지. 암암
그것보다 비동기에 특화된 언어라고 이해하는 것이 조금 더 가깝지 않나? 라고 생각한다.

???: 아니 그럼 동기 언어란 말인가??
>>그게 맞다.
단순하게만 생각해보면 알 수 있다. V8엔진 기준 Javascript의 동작 구조를 보면 Single Process Single Thread 기반으로 동작하며 기본적으로 인터프리터 언어이다. 물론! 요즘은 스크립트 언어의 특성상 기본형태 자체가 무거운편이기에 상황에 따라 컴파일러를 혼용한다고는 하지만 ...

Single Thread

한번 생각을 해보자고.
싱글 프로세스싱글 쓰레드이다. 무려 싱 글
즉 하나의 소스 코드를 가지고 순차실행만 가능하다는 말이다.

싱글 쓰레드를 사람의 입구멍이라고 생각해보자. 저 친구는 이제 저렇게 먹을 것이다. 그런데 저기서 김치찌개를 호로록 하다가 사레라도 들면??
소주는 어떻게 마실거임. 입구녕은 하나인데 ㅋ.
일단 대충 이런 모냥새로 돌아간다는 얘기니까
이렇게만 봐도 Javascript는 동기 언어라는 의견에 무게가 실리게 된다.

Javascript는 혼자가 아니다.

🤯 : 아니 그럼 저따구로 움직이면 비동기 처리는 우째함? 다들 사기라도 친건가?

Javascript의 런타임 구조이다. 그냥 크롬 웹브라우저에서 Javascript code를 동작 시키는 방식이라고 이해하자. 진짜 간단하게 어떤 구조로 흘러가느냐.
1. Javascript code를 호출하여 Call Stack에 스택을 쌓아간다.
2. 스택이 쌓이다가 해당스택이 Event Listener, HTTP, Ajax 요청을 처리한다?? 그럼 바로 Web API가 해당 스택을 가져간다.
3. 위 과정을 반복하여 더 이상 쌓을 스택이 없다면 Call Stack에서 스택을 제거해가며 작업을 수행한다. 그와 동시에 스택을 가져온 Web API에서도 스택을 제거하며 해당 작업을 수행한다. 수행한 후의 반환 값은 Callback Queue에 전달한다.
4. Event loop에서 Call Stack이 모두 비워졌는지의 여부를 확인하기 위해 수시로 검사한다. 만약 Stack이 모두 비워졌을 경우 Callback Queue에 있는 스택을 Call Stack으로 가져가 관련작업을 수행한다.
(더 자세하게 알아보고 싶다면 Stack, Queue자료구조도 함께 공부해보면 좋을 듯하다.)

🤬: 뭐라는지 하나도 모르겠다.
>> 필자의 개똥같은 말이 이해가 가지 않는다면 여기에 들어가 직접 체험해봐도 좋다. 혹은 유튜브 영상으로도 아주 잘 설명이 되어있으니 참고해도 좋을듯?

Web API

여기서 주목해야할 것은 Web API. 해당 API가 Javascript의 몇몇가지의 역할을 대신 처리해주기때문에 그 사이에 자바스크립트엔진은 본업을 그대로 진행할 수 있게 된다. 무엇보다 WebAPI가 관여하는 규모가 꽤나 큰 점에 빗대어 'Javascript는 비동기에 특화된 언어'라고 보통 얘기한다. Multi Thread기반 언어의 비동기 프로그래밍은 '여러명의 직장동료가 작업한다.'라고 하면 Javascript의 비동기 프로그래밍은 '일정 수준의 작업은 외주업체에 맡긴다.' 라고 생각하면 될거 같다.

Javascript는 비동기 특화 언어이다.

만약 Web API를 사용하지 않는다면 Javascript로 Synchronous한 프로그래밍이 가능하긴 하다. 하지만 Javascript의 고향인 Front-End에서 Back-End와의 통신을 위해서는 각종 API를 사용해야하는데(대표적으로 Fetch-API) 이 API가 Web API의 인터페이스이다. 그리고 무엇보다 웹페이지 생성에 가장 중요한 DOM마저도 Web API의 인터페이스이다.. 버릴래야 버릴 수 없는 구조...

이렇게나 사용빈도가 높은 인터페이스들이 모두 비동기로 동작하기 때문에, 특히나 API같은 경우 Back-End에서 데이터를 응답 받아야 다음 작업이 가능해지기 때문에 Javascript는 비동기 특화언어라고 할 수 있다.

그러니까 다음 포스팅에서는 비동기 프로그래밍에 대해서 끄적일거다.😎
근데 다들 읽고 이해하시나.. 나만 신나게 끄적이는 느낌이 ㅜㅜ

profile
목표가 생겨 개발을 시작한, 아직은 미성숙한 학생이라 합니다

0개의 댓글