22.02.17 면접 Q & A

📌  자바스크립트는 동기적 언어인가 비동기적 언어인가 ?

📌  자바스크립트의 "동기"와 "비동기"에 대해 아는대로 말해보기

 

자바스크립트는 동기적 언어입니다.
자바스크립트의 엔진이 싱글 스레드로 동작하기 때문에, 코드를 순서대로 읽을 수밖에 없습니다.
동기적인 언어의 문제점은, 해당 태스크를 끝내기 전까지는 아무것도 처리할 수 없다는 점입니다.
일례로 데이터를 불러오는 작업과 UI 컴포넌트의 렌더링 작업이 차례로 진행된다고 했을 때,
데이터가 모두 불러오기 전까지 화면이 하얗게 뜨는 문제가 발생할 수 있습니다.

반대로 UI 컴포넌트를 먼저 렌더링하더라도 컴포넌트에 할당된 이벤트가 동작되지 않는 문제를 야기할 수 있습니다.
이를 해결하기 위해 브라우저 엔진에 내장된 비동기 메서드를 사용합니다.
fetch( ) 나 setTimeout( ) 등이 비동기적으로 동작하는 함수입니다.
비동기적으로 동작한다는 의미는, 동기적으로 동작하는 코드와 함께 진행될 수 있음을 뜻합니다.

순차적으로 코드를 읽다 비동기 함수를 만나면, 비동기 함수를 처리하는 로직으로 넘긴 후
다시 동기적으로 코드를 읽어갑니다. (제가 알고 있는 동기와 비동기는 여기까지입니다.)

 

-> 아무것도 보지 않고 혼자 읊으면서 써봤다. 쳐낼 건 쳐내고 문장 다듬기.

 

자바스크립트는 동기적인 언어입니다. 
자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖고, 한번에 하나의 태스크만 수행할 수 있기 때문입니다.
현재 실행 중인 태스크가 종료될 때까지 다음 태스크가 대기하는 방식을 "동기 처리"라고 합니다.

그런데 이는, 선행된 태스크가 종료될 때까지 이후 태스크들이 블로킹된다는 단점이 있습니다.
이를 해결하고자 나온 개념이 "비동기 처리"입니다.
현재 실행중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식을 "비동기 처리"라고 합니다.

자바스크립트의 비동기 처리는 브라우저 엔진이 돕습니다.
싱글 스레드로 동작하는 자바스크립트 엔진과 달리
브라우저는 멀티 스레드로 동작하기 때문에 비동기 처리를 도울 수 있습니다.

실행컨텍스트 스택에서 브라우저에 내장된 비동기 함수를 호출하면,
브라우저에 내장된 태스크 큐에 일시적으로 저장됩니다.
브라우저의 이벤트 루프는 실행컨텍스트 스택이 비워짐을 감지해 태스크 큐에 저장된 함수들을 차례로 실행시킵니다.

자바스크립트는 동기적으로 동작하지만, 데이터의 블로킹을 막으면서 동작할 수 있는 이유입니다.

 

-> 외우진 말고 흐름만 가져가기.

 

📍  과거 학습 내용 복습

 

2021.09.06 - [Front-end/JS] - 자바스크립트 비동기 프로그래밍 Asynchronous Programming

자바스크립트 비동기 프로그래밍 Asynchronous Programming