Javascript - 동기/비동기

Addie L.·2020년 7월 11일
4

Javascript 필수 개념

목록 보기
1/1

자바스크립트 실행 문맥(Call Stack)에 대한 이해

자바스크립트는 함수를 실행하기 위해 스택의 전역코드에서 해당 함수를 실행하기 위한 문맥을 Stack에 push하고, 작업이 끝나거나 return 결과 값을 반환하면 함수를 호출한 부분으로 되돌아오게되면 스택에서 pop하게 된다. 이 과정이 비동기적으로 이루어지는데, 코드를 실행하는 와중에 다른 함수를 호출하면 그 함수의 실행 문맥도 push되게된다. 이러한 이유로 자바스크립트의 실행 문맥을 Call Stack, 즉 호출 스택이라고 부른다.

Single Thread, Multi Thread

프로그램을 실행하는 방식에는 크게 두 가지가 있다. 싱글 스레드 방식과 멀티 스레드 방식이다. 스레드는 프로그램에서 순차적인 처리 흐름을 나타내는 것으로 자바스크립트에서는 싱글 스레드 프로그래밍 언어이므로 단일 호출 스택을 가지게 된다. 이 뜻은 한 번에 하나의 일만 처리할 수 있다는 뜻이다. Call Stack에 쌓인 실행문맥을 위에서부터 아래로 차례차례 실행하게된다.

단일 호출 스택을 가졌을 때의 문제점, 해결책

  • 브라우저가 호출 스택에서 많은 작업을 처리하게 되면 꽤 오랜 시간동안 응답을 멈출 수 있다. 혹은, 하나의 함수 처리가 엄청 느려서 다른 함수 실행에 지장을 줄 수도 있다.

이때 가장 쉬운 해결책은 비동기 콜백을 사용하는 것이다.
코드 일부만 실행하고 나중에 실행될 콜백함수를 정해주게 되면, 즉시가 아닌 특수한 시점에 실행되므로 스택 안에 바로 push될 필요가 없게 된다.

Event Que, 비동기 콜백 처리 과정

Javascript Web API는 콜백 함수를 Event Que (콜백 큐)에 밀어넣게 되는데
이때 이벤트 큐는 대기하다가 스택이 완전히 비는 시점에 이벤트 루프를 스택에 넣어 이벤트 큐에 대기 행렬을 만들고 현재 실행중인 함수 작업이 끝나면 대기 행렬에서 실행중인 함수의 작업이 끝날 때마다 첫 번째 실행 문맥부터 차례대로 콜 스택에 push시켜 실행하게 한다. 여기서 이벤트 루프는 큐와 스택을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜주는 역할을 담당한다.

자바스크립트 비동기 처리

브라우저에서는 비동기식 일처리로 요청에 대한 응답을 기다리지않고 바로 다음 줄의 함수/코드를 실행시킨다. 반대로 동기식 일처리란 요청에 대한 응답을 기다린 후 응답이 오면 다음 요청을 진행하는 방식이다. 자바스크립트에서는 비동기 처리를 위해 비동기 함수 종류인 콜백 함수를 이용하거나 promise객체, async-await 등을 활용할 수 있다.

0개의 댓글