자바스크립트 동기 비동기 동작 방식 이해

자바스크립트로 웹페이지의 동작이나 데이터를 표시할 때 동기와 비동기적인 처리를 한다. jquery를 사용할 경우 비동기는 기본값으로 동작한다. 동기와 비동기는 여러 개의 자바스크립트가 직렬처리 또는 병렬처리되는 것을 의미하기도 하고 다른 말로 순차실행 또는 비순차실행을 의미하기도 한다. 쉽게 말해 여러 개의 자바스크립트의 함수가 순서대로 실행된다면 동기, 여러개가 거의 동시에 실행된다면 비동기 라 한다.

자바스크립트 동기 비동기 동작 방식

자바스크립트 동기 비동기 동작 방식 이해

웹프로그래밍을 위한 개발에서 자바스크립트는 웹페이지의 동작을 담당한다.

웹페이지의 처리 절차가 많아질수록 서버에 데이터를 요청하는 웹브라우저는 동작을 분산하여 처리할 수 있다.

다만, 데이터의 양이 많을 수록 요청하는 데이터를 단위별로 나누고 순차적으로 처리할 것이지 아니면 여러개를 동시에 처리할 것인지는 선택적인 문제다.

여기서 나오는 단어가 동기와 비동기이다.

이 단어는 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에도 사용되며, 다른 말로 싱글 스레드, 멀티 스레드라 하기도 한다.

동기와 비동기

단어의 뜻을 먼저 살펴보자. 동기와 비동기란 단어만 보면 어려워 보이지만 동작 구조를 보면 이해가 쉽다.

자바스크립트에 대한 동작을 순차적으로 또는 멀티로 할 것인지의 차이이다.

직렬과 병렬의 차이랄까.

직렬처리는 한 방향으로 진행하고 하나가 처리된 후 다른 하나가 실행되는 구조를 가진다.

병렬처리는 여러 방향으로 진행하고 여러개가 한꺼번에 실행되는 구조를 가진다.

아래는 자바스크립트 함수 3가지가 있을 때 동기와 비동기의 동작 방식의 차이를 보여준다.

자바스크립트 위) 동기(직렬처리), 아래) 비동기(병렬처리)

순차동작, 비순차 동작

동기와 비동기는 자바스크립트의 동작 방식에서도 차이를 보인다.

위의 이미지는 동기와 비동기를 이미지로 표현한 것이다.

단어의 모양새가 틀릴 뿐 다 같은 뜻이다.

이미지를 보면 차이를 보이는 시작과 끝은 존재하지만 끝에 도달하는 방식에 차이가 있다.

자바스크립틔 동작 방식에 대한 차이는 다음과 같다.

• 동기 / 순차진행 / 직렬처리
  여러 개의 함수의 실행순서가 존재하고 하나의 함수가 실행되어 작업이 완료된 후 다음 함수가 실행된다.
• 비동기 / 비순차진행 / 병렬처리
  여러 개의 함수가 있을 때 실행순서는 다르다. 여러 함수가 거의 동시에 실행되어 독립적으로 동작한다.